【保存版】サンプルでまとめてみた『Markdownチートシート』

はじめまして、ますみです！

[![自己紹介.png](https://www.umi-mori.jp/wp-content/uploads/2023/02/introduction_banner_2-2048x533.png)](https://bit.ly/banner_intro_masumi_creator_qiita)


# はじめに
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. 番号付きリスト 1
2. 番号付きリスト 2
3. 番号付きリスト 3

- [ ] チェックボックス 1
- [ ] チェックボックス 2
- [x] チェックボックス 3


## 4. 画像（`![]()`）
`![画像が読み込めなかった時に表示するテキスト](画像のリンク)`

```
![サンプル写真](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/63557e45-4b4f-cd5a-1fe3-5a2c5d3e3596.png)
```
![サンプル写真(画像が読み込めなかった時に表示するテキスト)](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/63557e45-4b4f-cd5a-1fe3-5a2c5d3e3596.png)

### サイズ指定
画像のサイズを指定する場合、HTMLで書くこともできます。

```
<img width="500" alt="サンプル写真(画像が読み込めなかった時に表示するテキスト)" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/63557e45-4b4f-cd5a-1fe3-5a2c5d3e3596.png">
```
<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チートシート』](https://qiita.com/umi_mori/private/24f7b47563cffcc5fd86)

## 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)
\```
```

```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)
```

# 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]: この注釈は、下に自動的に表示されます。
```
[^注釈1]
[^注釈1]: この注釈は、下に自動的に表示されます。

## 13. 色付き文字 （HTML）
詳しい記事：[Qiitaのマークダウンで色をつける方法[140色]](https://qiita.com/twipg/items/d8043cd4681a2780c160)

```
<font color="Red">Red</font>
<font color="Green">Green</font>
<font color="Blue">Blue</font>

<font color="#ff0000">16進数</font>
```
<font color="Red">Red</font>
<font color="Green">Green</font>
<font color="Blue">Blue</font>

<font color="#ff0000">16進数</font>

## 14. アコーディオン / 折りたたみ (HTML)
```
<details>
    <summary>【保存版】サンプルでまとめてみた『Markdownチートシート』</summary>
    1. 見出し（`#`）
    2. 太字（`**`）
    3. リスト（`-`）
    4. 画像（`![]()`）
    5. リンク（`[]()`）
    6. 短いコード（`）
    7. 長いコード（```）
    8. 表
    9. 引用
    10. 水平線
    11. 打ち消し線 / イタリック
</details>
```

<details>
    <summary>【保存版】サンプルでまとめてみた『Markdownチートシート』</summary>
    1. 見出し（`#`）
    2. 太字（`**`）
    3. リスト（`-`）
    4. 画像（`![]()`）
    5. リンク（`[]()`）
    6. 短いコード（\`）
    7. 長いコード（\`）
    8. 表
    9. 引用
    10. 水平線
    11. 打ち消し線 / イタリック
</details>

## 14. 埋め込みタグ
### ~~Twitter~~（2020年の3月ごろから無効になりました）


```
<blockquote class="twitter-tweet">
    <a href="https://twitter.com/umi_mori_jp/status/1137261474064228352?ref_src=twsrc%5Etfw">ここに代替えテキストのようなものが入ります。</a>
</blockquote>
```
<blockquote class="twitter-tweet">
    <a href="https://twitter.com/umi_mori_jp/status/1137261474064228352?ref_src=twsrc%5Etfw">ここに代替えテキストのようなものが入ります。</a>
</blockquote>

### CodePen
詳しい記事：[Qiitaで記事にCodePenが埋め込めるようになりました](https://qiita.com/Qiita/items/edae7417214c8e957f54)

```
<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>
```

<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>

## 15. 数式
3種類の書き方です。（`\`を書いているが、実際は書かない。）
詳しい記事：[Qiitaの数式チートシート](https://qiita.com/PlanetMeron/items/63ac58898541cbe81ada)

```
\```math
e^{i\pi} = -1
\```

$$ e^{i\pi} = -1$$

オイラーの等式は、$ e^{i\pi} = -1 $ です。
```

```math
e^{i\pi} = -1
```

$$ e^{i\pi} = -1$$

オイラーの等式は、$ e^{i\pi} = -1 $ です。


# おまけ
## Markdown => HTML
### [Markdown to HTML - Markdownで書かれたファイルをHTMLに自動変換してくれるWebアプリ](https://www.umi-mori.jp/product/md_to_html.php)

[<img width="500" alt="スクリーンショット 2019-11-06 13.25.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/1f56c5d9-45c5-74c4-e71a-5992f32f285d.png">](https://www.umi-mori.jp/product/md_to_html.php)


## Markdownエディタ特集
### [Typora](https://www.typora.io/)
[<img width="500" alt="boostnote.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/7dddfc72-97c9-f4b5-ae18-8524c749c600.png">](https://www.typora.io/)

### [Boostnote](https://boostnote.io/)
[<img width="500" alt="typora.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/9dc936e7-4529-d83e-7528-25a88e476c67.png">](https://boostnote.io/)

### [Slack](https://slack.com/)
Slackも簡易的なMarkdownエディタを採用しています。


## Qiitaの右側の目次
Qiitaの右側の目次は、見出し（`#`）から自動検出されます。
<img width="200" alt="Qiitaの右側の目次.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240280/ea8e767c-af2d-4db9-af5f-1e3fb73a66f7.png">


## コード対応言語早見表

`
- 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

# 最後に
最後まで読んでくださり、ありがとうございました！
いかがだったでしょうか？

この記事を通して、少しでもあなたの学びに役立てば幸いです！

:::note info
【仕事の相談はこちら】
お仕事の相談のある方は、下記のフォームよりお気軽にご相談ください。

[問い合わせフォームはこちら](https://forms.gle/G5g1SJ7BBZw7oXYA7)

もしもメールでの問い合わせの方がよろしければ、下記のメールアドレスへご連絡ください。

info*galirage.com（*を@に変えてご送付ください）

🎁 「生成AI活用の無料相談券」もしくは「生成AIの社内ガイドライン（無料PDF）」を『公式LINE』で配布中 🎁
『生成AIを業務に活用したいけど、どうしたらいいかわからない』といった声を多くいただきます。

Galirageでは公式LINEにて、チャットやオンライン会議で「完全個別の生成AI活用無料相談会」を実施しております！
（期間限定で実施しているため、ご興味ある方はお早めに以下のLINE公式アカウントをご登録ください^^）
https://lin.ee/rvz6lMN

※ 予告なく、キャンペーンを終了する可能性がございますが、ご了承ください。

【業務内容】
具体的には、以下のお仕事を中心に受け付けております！（[詳しくはこちら](https://galirage.notion.site/Galirage-AI-c2f3945fafb0433d8d2fd03e56927fd8)）
1. 受託開発（例：生成AIを使った社内システムの開発）
2. コンサルティング（例：技術戦略のアドバイス）
3. 講演（例：社内研修、イベント登壇）

※ 特に「生成AIを使ったシステム開発のご依頼」が多く、ご好評いただいております。

【これまでの相談事例】
以下のようなご相談が多くあります。

🔑 機密情報を漏洩させないための、生成AIのシステム構築をお願いしたい。
🤖 自社データを用いたFAQチャットボットの作り方を知りたい。
💡 ChatGPTを、自分たちの事業にどのように活かせるか、アドバイスやアイデアが欲しい。
:::
# おまけ
エンジニアの仲間（データサイエンティストも含む）を増やしたいため、公式LINEを始めました🎉

「**一緒に仕事をしてくれる方**」「**友だちとして仲良くしてくれる方**」は、友だち追加をしていただけますと嬉しいです！（仲良くなった人たちを集めて、「ボードゲーム会」や「ハッカソン」や「もくもく会」もやりたいなと考えています😆）

とはいえ、みなさんにもメリットがないと申し訳ないので、特典を用意しました！

友だち追加後に、アンケートに回答してくれた方へ「**エンジニア図鑑（職種20選）**」のPDFをお送りします◎

https://lin.ee/hFUN4TL

[![](https://www.umi-mori.jp/wp-content/uploads/2023/10/line_banner_v2.png)](https://lin.ee/hFUN4TL)