はじめに
Mardown入門者・経験者の両方に向けて、書きました。
文章ではなく、直感でわかりやすい「サンプルでまとめる」形式を取りました。(Qiitaの記法を採用しています。)
A. 最頻出コマンド
1. 見出し(#
)
# タイトル
## サブタイトル
タイトル
サブタイトル
2. 太字(**
)
markdownはとても**便利**です。
markdownはとても便利です。
3. リスト(-
)
- 普通のリスト 1
- 普通のリスト 2
- 普通のリスト 3
1. 番号付きリスト 1
2. 番号付きリスト 2
3. 番号付きリスト 3
- [ ] チェックボックス 1
- [ ] チェックボックス 2
- [x] チェックボックス 3
- 普通のリスト 1
- 普通のリスト 2
- 普通のリスト 3
- 番号付きリスト 1
- 番号付きリスト 2
- 番号付きリスト 3
- チェックボックス 1
- チェックボックス 2
- チェックボックス 3
4. 画像(![]()
)


サイズ指定
画像のサイズを指定する場合、HTMLで書くこともできます。
<img width="500" alt="サンプル写真(画像が読み込めなかった時に表示するテキスト)" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/63557e45-4b4f-cd5a-1fe3-5a2c5d3e3596.png">
5. リンク([]()
)
[表示する文字](リンク)
[【保存版】サンプルでまとめてみた『Markdownチートシート』](https://qiita.com/umi_mori/private/24f7b47563cffcc5fd86)
【保存版】サンプルでまとめてみた『Markdownチートシート』
6. 短いコード(`)
バッククオート(`)という少し変わった記号を用いる。
`var x = 7;`
var x = 7;
7. 長いコード(```)
同様に、バッククオート(`)を用いる。(\
を書いているが、実際は書かない。)
\```python:sample.py
from flask import Flask, render_template, request
import logging
app = Flask(__name__)
@app.route('/')
def index():
sample_title = "title"
sample_array = ['x', 'y', 'z']
sample_json = {"title": "sample_title", "desc": "sample_desc"}
return render_template('index.html', title=sample_title, array=sample_array, json=sample_json)
@app.route('/test', methods=['GET', 'POST'])
def test():
if request.method == 'GET':
logging.log(30, 'warning')
logging.log(100, 'test1')
res = request.args.get('get_value')
elif request.method == 'POST':
res = request.form['post_value']
return res
if __name__ == '__main__':
app.debug = True
app.run(host='0.0.0.0', port=8080)
\```
from flask import Flask, render_template, request
import logging
app = Flask(__name__)
@app.route('/')
def index():
sample_title = "title"
sample_array = ['x', 'y', 'z']
sample_json = {"title": "sample_title", "desc": "sample_desc"}
return render_template('index.html', title=sample_title, array=sample_array, json=sample_json)
@app.route('/test', methods=['GET', 'POST'])
def test():
if request.method == 'GET':
logging.log(30, 'warning')
logging.log(100, 'test1')
res = request.args.get('get_value')
elif request.method == 'POST':
res = request.form['post_value']
return res
if __name__ == '__main__':
app.debug = True
app.run(host='0.0.0.0', port=8080)
B. 知ってて便利コマンド
8. 表
|概要 (中央寄せ)|担当 (左寄せ)|備考 (右寄せ)|
|:---:|:---|---:|
|概要 1|Aさん|備考 1|
|概要 2|Bさん|備考 2|
|概要 3|Cさん|備考 3|
概要 (中央寄せ) | 担当 (左寄せ) | 備考 (右寄せ) |
---|---|---|
概要 1 | Aさん | 備考 1 |
概要 2 | Bさん | 備考 2 |
概要 3 | Cさん | 備考 3 |
9. 引用
> 私たちの最大の弱点は諦めることにある。
> 成功するのに最も確実な方法は、
> 常にもう一回だけ試してみることだ。
> 『トーマスエジソン』より
私たちの最大の弱点は諦めることにある。
成功するのに最も確実な方法は、
常にもう一回だけ試してみることだ。
『トーマス・エジソン』より
10. 水平線
---
11. 打ち消し線 / イタリック
~~打ち消される文字~~
*イタリックな文字*
打ち消される文字
イタリックな文字
C. 知る人ぞ知るコマンド
12. 注釈
2行目は、注釈の内容が末尾に自動的に追加されます。(\
を書いているが、実際は書かない。)
[^注釈1]
\[^注釈1]: この注釈は、下に自動的に表示されます。
13. 色付き文字 (HTML)
詳しい記事:Qiitaのマークダウンで色をつける方法[140色]
<font color="Red">Red</font>
<font color="Green">Green</font>
<font color="Blue">Blue</font>
<font color="#ff0000">16進数</font>
Red
Green
Blue
16進数
14. アコーディオン / 折りたたみ (HTML)
<details>
<summary>【保存版】サンプルでまとめてみた『Markdownチートシート』</summary>
1. 見出し(`#`)
2. 太字(`**`)
3. リスト(`-`)
4. 画像(`![]()`)
5. リンク(`[]()`)
6. 短いコード(`)
7. 長いコード(```)
8. 表
9. 引用
10. 水平線
11. 打ち消し線 / イタリック
</details>
【保存版】サンプルでまとめてみた『Markdownチートシート』
1. 見出し(#
)
2. 太字(**
)
3. リスト(-
)
4. 画像(![]()
)
5. リンク([]()
)
6. 短いコード(`)
7. 長いコード(```)
8. 表
9. 引用
10. 水平線
11. 打ち消し線 / イタリック
14. 埋め込みタグ
Twitter(2020年の3月ごろから無効になりました)
<blockquote class="twitter-tweet">
<a href="https://twitter.com/umi_mori_jp/status/1137261474064228352?ref_src=twsrc%5Etfw">ここに代替えテキストのようなものが入ります。</a>
</blockquote>
ここに代替えテキストのようなものが入ります。
CodePen
詳しい記事:Qiitaで記事にCodePenが埋め込めるようになりました
<p data-height="265" data-theme-id="0" data-slug-hash="dJgNLK" data-default-tab="js,result" data-user="tomoasleep" data-embed-version="2" data-pen-title="dJgNLK" class="codepen">
See the Pen
<a href="https://codepen.io/tomoasleep/pen/dJgNLK/">dJgNLK</a>
by Tomoya Chiba (<a href="https://codepen.io/tomoasleep">@tomoasleep</a>)
on <a href="https://codepen.io">CodePen</a>.
</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
See the Pen dJgNLK by Tomoya Chiba (@tomoasleep) on CodePen.
15. 数式
3種類の書き方です。(\
を書いているが、実際は書かない。)
詳しい記事:Qiitaの数式チートシート
\```math
e^{i\pi} = -1
\```
$$ e^{i\pi} = -1$$
オイラーの等式は、$ e^{i\pi} = -1 $ です。
e^{i\pi} = -1
$$ e^{i\pi} = -1$$
オイラーの等式は、$ e^{i\pi} = -1 $ です。
おまけ
Markdown => HTML
Markdown to HTML - Markdownで書かれたファイルをHTMLに自動変換してくれるWebアプリ
Markdownエディタ特集
Typora
Boostnote
Slack
Slackも簡易的なMarkdownエディタを採用しています。
Qiitaの右側の目次
Qiitaの右側の目次は、見出し(#
)から自動検出されます。
コード対応言語早見表
- ABAP
- ActionScript
- Apache
- API Blueprint
- AppleScript
- Awk
- BIML
- 1C (BSL)
- C
- Ceylon
- CFScript
- Clojure
- CMake
- CoffeeScript
- Common Lisp
- Config File
- Console
- Coq
- C++
- Crystal
- C#
- CSS
- D
- Dart
- diff
- digdag
- Docker
- DOT
- Eiffel
- Elixir
- Elm
- ERB
- Erlang
- Factor
- Fortran
- FSharp
- Gherkin
- GLSL
- Go
- Gradle
- Graphql
- Groovy
- Hack
- Haml
- Handlebars
- Haskell
- HTML
- HTTP
- HyLang
- IDL
- IgorPro
- INI
- Io
- Irb
- Irb_output
- Java
- JavaScript
- Jinja
- JSON
- Json-doc
- Jsonnet
- JSX
- Julia
- Kotlin
- Lasso
- Liquid
- Literate CoffeeScript
- Literate Haskell
- LLVM
- Lua
- Make
- Markdown
- MATLAB
- MoonScript
- Mosel
- MXML
- Nasm
- nginx
- Nim
- Nix
- Objective-C
- OCaml
- Pascal
- Perl
- PHP
- Plain Text
- Plist
- Pony
- powershell
- Praat
- Prolog
- Prometheus
- .properties
- Protobuf
- Puppet
- Python
- Q
- QML
- R
- Racket
- Ruby
- Rust
- Sass
- Scala
- Scheme
- SCSS
- sed
- shell
- Sieve
- Slim
- Smalltalk
- Smarty
- SML
- SQL
- Swift
- TAP
- Tcl
- TeX
- TOML
- TypeScript
- Tulip
- Turtle/TriG
- Twig
- Vala
- Visual Basic
- Verilog and System Verilog
- VHDL 2008
- VimL
- Vue
- Wollok
- XML
- YAML
-
この注釈は、下に自動的に表示されます。 ↩