MDUtil

Markdownのコードブロックとインラインコード

バッククォートで囲むとインラインコード、前後の行をバッククォート3つで囲むとコードブロックになります。シンタックスハイライト、言語名、コードの中のバッククォート、diffを説明します。

要点

Markdownでコードブロックを書くには？

コードの前の行と後の行にバッククォートを3つずつ書きます。最初のバッククォートのあとに ```python のように言語名を書くと、シンタックスハイライトが付きます。文中のコードはバッククォート1つで囲みます：`コード`。

Markdown
```python
def greet(name):
    return f"こんにちは、{name}さん！"
```

`greet()` に名前を渡して呼び出します。

表示結果

def greet(name):
    return f"こんにちは、{name}さん！"

greet() に名前を渡して呼び出します。

コードの書き方と例

バッククォートの中は入力したとおりに表示されるため、コード内のMarkdownの記号も書式になりません。

インラインコード

バッククォート1つで、文中のコマンド、ファイル名、関数名を示します。

Markdown
`npm install` を実行してから `src/index.ts` を開きます。

表示結果

npm install を実行してから src/index.ts を開きます。

言語名付きのコードブロック

最初のバッククォートのあとに言語名を書くと、シンタックスハイライトが付きます。

Markdown
```js
const total = items.reduce((sum, item) => sum + item.price, 0);
console.log(total);
```

表示結果

const total = items.reduce((sum, item) => sum + item.price, 0);
console.log(total);

diff で変更を示す

diff のブロックでは、- と + で始まる行が削除と追加の色で表示されます。

Markdown
```diff
- const rate = 0.2;
+ const rate = TAX_RATE;
```

表示結果

- const rate = 0.2;
+ const rate = TAX_RATE;

コードの中のバッククォート

バッククォートを含むインラインコードは2つのバッククォートで囲み、バッククォート3つを含むブロックは4つで囲みます。

Markdown
``インラインコードには `code` を使う``

````markdown
```js
console.log("hi");
```
````

表示結果

インラインコードには `code` を使う

```js
console.log("hi");
```

チルダのフェンス

チルダ3つはバッククォート3つと同じ働きをします。コードにバッククォートが多いときに便利です。

Markdown
~~~bash
echo "``` で囲むとコードブロックになる"
~~~

表示結果

echo "``` で囲むとコードブロックになる"

字下げのコードブロック

各行の先頭に空白4つを入れてもコードブロックになりますが、言語名は付けられません。フェンスのほうが分かりやすい書き方です。

Markdown
    npm run build
    npm run start

表示結果

npm run build
npm run start

各サービスでの対応状況

インラインコードとフェンスのコードブロックはほぼどこでも使えます。ハイライトの対応はさまざまです。

サービス対応補足
GitHub / GitLab対応数百の言語をハイライトし、mermaid のブロックは図になります。
Discord対応言語名を書いたブロックはハイライトされます。
Slack違いありコードブロックは使えますが、ハイライトはありません。
Obsidian対応閲覧画面でハイライトされ、mermaid のブロックは図になります。
Notion違いあり/code コマンドでコードブロックを追加し、左上の言語名をクリックして言語を選びます。
Qiita / Zenn対応言語名でハイライトされます。Qiitaは ruby:app.rb のようにファイル名も書けます。

よくある質問

Markdownでインラインコードを書くには？

バッククォートで囲みます：`npm install`。中にバッククォートを含めるときは、2つのバッククォートと空白で囲みます：`` a`b ``。

シンタックスハイライトを付けるには？

最初のバッククォートの直後に言語名を書きます。```python や ```js のように書き、アプリがハイライトに対応していてその言語名を認識する必要があります。

どんな言語名が使えますか？

よく使うのは bash、c、cpp、csharp、css、diff、go、html、java、js、json、kotlin、markdown、php、python、ruby、rust、sql、swift、ts、yaml です。GitHubはさらに数百の言語に対応しています。

コードブロックの中にバッククォート3つを表示するには？

ブロックをバッククォート4つで開いて閉じるか、チルダ3つ ~~~ を使います。

コードブロックにならないのはなぜですか？

開始と終了のフェンスがそれぞれ単独の行にあるか、同じ記号を使っているか、終了のフェンスが開始と同じ長さ以上あるかを確認します。リストの中では、フェンスを項目の文字の位置まで字下げします。

行番号を表示できますか？

Markdownに行番号の記法はありません。サイトやエディタによっては、独自の設定やプラグインで行番号を表示できます。

コードブロックで図を描くには？

ブロックに mermaid と書き、Mermaidの記法で図を書きます。GitHub、GitLab、Obsidianで図として表示され、Markdown プレビューでも確認できます。

DiscordとSlackでコードブロックは使えますか？

どちらもインラインコードとコードブロックが使えます。Discordは書いた言語名でハイライトし、Slackは等幅の文字で表示するだけです。