Markdownのコードブロック・インラインコードの書き方
プログラムのコードやコマンド、設定ファイルをそのままの形で見せたいときに使うのがコードブロック（```）とインラインコード（`）です。このページでは基本の書き方から、シンタックスハイライトの言語指定、「バッククォート自体を表示したい」ときのエスケープまでまとめました。動作は無料のMarkdownビューアーでその場で確認できます。
| やりたいこと | 書き方 |
|---|---|
| 文中にコードを埋める | `code`（バッククォート1つで挟む） |
| 複数行のコードを載せる | ``` の行でコードを上下から挟む |
| 色分け（ハイライト）を付ける | 開始の ``` の直後に言語名（例：```python） |
| コード内に ``` を表示する | 外側を ````（4つ）にする |
| 文中に ` を表示する | ``（2つ）で挟む |
インラインコード：文中にコードを埋める
文章の中に変数名・コマンド・ファイル名などを埋め込むときは、バッククォート（`）1つで挟みます。挟んだ部分は等幅フォント＋背景色付きで表示され、本文と明確に区別できます。
設定は `config.json` の `debug` を `true` に変更します。
設定は config.json の debug を true に変更します。
' と間違えやすいので注意してください。コードブロック：複数行のコードを載せる
複数行のコードは、バッククォート3つ（```）だけの行で上下から挟みます。ブロック内では改行・スペース・記号がすべて書いたまま表示され、# や * などのMarkdown記法も無効になります。
```
function greet(name) {
console.log(`Hello, ${name}!`);
}
```
function greet(name) {
console.log(`Hello, ${name}!`);
}
コードブロックは、プログラムに限らず「そのままの形で見せたいテキスト全般」に便利です。ターミナルのコマンド、エラーメッセージ、設定ファイル、フォルダ構成図（ツリー）などにも広く使われます。
言語指定でシンタックスハイライトを付ける
開始側の ``` の直後に言語名を書くと、GitHubやQiita・Zennなど対応環境ではコードが色分け（シンタックスハイライト）されます。
```python
def greet(name):
print(f"Hello, {name}!")
```
def greet(name): print(f"Hello, {name}!")
よく使う言語名の指定は次のとおりです。
| 言語・形式 | 指定名 | 言語・形式 | 指定名 |
|---|---|---|---|
| Python | python | JavaScript | js / javascript |
| TypeScript | ts / typescript | HTML | html |
| CSS | css | JSON | json |
| シェル・ターミナル | bash / sh | SQL | sql |
| Java | java | C / C++ | c / cpp |
| Ruby | ruby | PHP | php |
| YAML | yaml | Markdown | md / markdown |
バッククォート自体を表示したいとき（エスケープ）
「Markdownの解説記事を書く」など、記号そのものを見せたい場合の書き方です。
文中に ` を表示したい
バッククォート2つ（``）で挟むと、中の ` をそのまま表示できます。
`` ` `` で挟むとインラインコードになります。
` で挟むとインラインコードになります。
コードブロックの中に ``` を表示したい
外側の囲いをバッククォート4つ（````）にすると、内側に ``` を含むコードブロックを書けます。
````
```python
print("Hello")
```
````
```python
print("Hello")
```
コードブロックが崩れる原因と対処法
| 症状 | 原因 | 対処法 |
|---|---|---|
| ```がそのまま文字として表示される | 全角の「｀」を使っている／```の前後に余計な文字がある | 半角のバッククォートで、```だけの行にする |
| ブロックが閉じずに以降が全部コード表示になる | 終了側の```を書き忘れている／数が揃っていない | 開始と終了のバッククォートの数を揃える |
| リストの中のコードブロックがリストの外に出る | リストの字下げに合わせたインデントがない | ```ごと半角スペース4つで字下げする |
| ハイライトが付かない | 表示先が言語指定に非対応／言語名の綴りが違う | 表示先の対応言語名を確認する（例：nodeではなくjs） |
| コードの中の<タグ>が消える | コードブロックの外に書いたためHTMLとして解釈された | タグを含むテキストは必ずコードブロックか`の中に入れる |
コードブロックの表示、その場で確認しませんか？
バッククォートの数や言語指定を変えたときの挙動を、コピペするだけで試せます。
よくある質問
チルダ（~~~）でもコードブロックになると聞きました
はい、多くのパーサーで ~~~ 3つでも同じコードブロックになります。「コードブロックの中に```を書きたい」場面で、外側を~~~にするという使い分けも可能です。
行頭を4スペース空けたらコードブロックになりました
それは「インデント式コードブロック」という古い記法です。意図せず発動して驚くことが多い（箇条書きのつもりの字下げがコード表示になる等）ため、現在は```で囲む方式（フェンス式）が推奨です。
コードブロックに行番号やファイル名を表示したい
標準記法にはありませんが、Qiita・Zennなどは ```python:app.py のようにコロン区切りでファイル名を表示できる独自拡張があります。表示先のサービスの仕様を確認してください。
ChatGPTの回答のコードをブログに貼りたい
回答をそのままコピーすると```付きのMarkdownが取れます。Markdown Viewerに貼り付ければ整形済みHTMLに変換されるので、「HTMLコピー」ボタンでブログ用のコードとして持ち出せます。