MDUtil LogoMDUtil

Markdown コードブロックジェネレーター

ブロックの種類と言語を選んでコードを貼り付けるだけで、ハイライト付きのMarkdownコードブロックをコピーできます。処理はすべてブラウザ内で完結します。

無料 · 登録不要 · ブラウザ内で完結最終更新

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

コードの前後にバッククォート3つだけの行を置き、開始行の直後に言語名を書きます。シンタックスハイライトはこの言語識別子で切り替わります。文中の短いコードにはバッククォート1つを使います。半角スペース4つの字下げでもコードブロックになりますが、言語は指定できません。

markdown
```python
print("Hello, Markdown!")
```

Pythonのハイライトが付いたフェンスコードブロックとして表示され、HTMLでは <pre><code class="language-python"> になります。

Markdown コードブロックジェネレーターを使う

設定

出力

Markdownのコードブロック記法

Markdownでコードを示す方法は3つあります。フェンスコードブロック、インデントコードブロック、インラインコードです。言語識別子を付けられるのはフェンス記法だけなので、現在はこれが標準です。

言語指定付きのフェンスコードブロック

バッククォート3つで開始し、3つで閉じます。言語名は開始側のバッククォートの直後に、スペースを空けずに書きます。GitHub、GitLab、Obsidian、Discord、主要な静的サイトジェネレーターがこの書き方を理解します。

markdown
```javascript
export function slugify(title) {
  return title.toLowerCase().replace(/\s+/g, "-");
}
```

JavaScriptのハイライトが付いたブロックになります。言語名を省くと、同じコードがハイライトなしのプレーンテキストとして表示されます。

シンタックスハイライト用の言語識別子

識別子はハイライターが認識する短い名前にすぎません。よく使うものを挙げると次のとおりです。GitHubはLinguistを通じて200以上に対応し、js、ts、py、sh、yml、cs、c++ といった別名も受け付けます。

markdown
```javascript   ```typescript   ```python   ```java
```c            ```cpp          ```csharp   ```go
```rust         ```swift        ```kotlin   ```php
```ruby         ```bash         ```sql      ```json
```yaml         ```html         ```css      ```diff

名前ごとに異なる文法定義が選ばれます。未知の識別子はエラーにはならず、ハイライトなしのテキストとして表示されるだけです。

インデントコードブロック（半角スペース4つ）

各行を半角スペース4つまたはタブ1つで字下げする書き方で、フェンスが登場する前からある元祖のコードブロックです。今もどこでも動きますが、言語を指定できず、コード自体に字下げがあると崩れます。

markdown
    int main(void) {
        printf("Hello, Markdown!\n");
        return 0;
    }

ハイライトなしのコードブロックになります。各行の先頭にある半角スペース4つは取り除かれて表示されます。

文中で使うインラインコード

バッククォート1つは、本文中の変数名やオプション、コマンドといった短いコードを囲むために使います。囲みたい内容自体にバッククォートが含まれる場合は、区切りをバッククォート2つにします。

markdown
デプロイ前に `npm run build` を実行してください。

`` ` `` という文字でインラインコードが始まります。

1行目は npm run build が等幅フォントで表示されます。2行目はバッククォート1文字がそのまま表示され、途中でコードが閉じられることはありません。

diffで変更内容を見せる

diff識別子は各行の先頭文字で色分けします。マイナスは削除、プラスは追加、半角スペースは変更のない行です。READMEやプルリクエストのコメントでパッチを示すには、これがもっとも読みやすい方法です。

markdown
```diff
- const timeout = 1000;
+ const timeout = 5000;
  retry(request, { timeout });
```

GitHubとGitLabでは削除行が赤、追加行が緑に着色され、変更のない行はそのままの色で表示されます。

バッククォートのエスケープとフェンスの入れ子

コードブロックの中にコードブロックを表示したいときは、外側のフェンスを内側より長くします。4つは3つを、5つは4つを囲めます。

markdown
````markdown
```js
console.log("このフェンスは閉じられません");
```
````

内側のバッククォート3つがそのまま出力され、外側のブロックが途中で閉じられることはありません。

各サービスでの対応状況

フェンスコードブロックはほぼどこでも使えますが、対応する言語の数と、その上に載っている拡張機能はサービスによって大きく異なります。

プラットフォーム対応状況備考
GitHub / GitLab対応Linguistにより200以上の言語に対応し、diffの色分けや<details>による折りたたみも使えます。
Qiita / Zenn対応```言語 が使えます。```js:app.js と書くとファイル名を見出しとして表示できます。
Discord対応メッセージ内で ```言語 が使えます。対応言語はhighlight.jsに同梱されているものに限られます。
Slack一部``` でコードブロックにはなりますが、言語名は無視されハイライトは付きません。
Obsidian対応Prismによるハイライトに加え、mermaidのように図として描画されるコードブロックもあります。
Notion対応``` と入力すると自動でコードブロックになり、言語は右上のドロップダウンから選びます。
VS Code対応Markdownプレビューでもエディター上でもハイライトされます。

Markdownでコードブロックを作る手順

  1. ブロックの種類を選ぶ

    複数行のコードはフェンスコードブロック、古いMarkdownパーサー向けはインデントコードブロック、文中の短い断片はインラインコードを選びます。

  2. 言語を選ぶ

    コードに合った言語識別子を選ぶと、レンダリング時にシンタックスハイライトが適用されます。ログやコンソール出力はプレーンテキストのままで構いません。

  3. ファイル名を入力する（任意）

    フェンスコードブロックではファイル名を入力するとtitle属性が出力されます。チュートリアルでコードがどのファイルのものかを示すときに便利です。

  4. コードを貼り付けてコピーする

    エディターにコードを貼り付け、プレビュータブで確認してからMarkdownをコピーします。<pre><code>タグが必要な場合はHTMLタブに切り替えてください。

よくある質問

Markdownでコードブロックを作るには？

コードの前の行と後の行に、それぞれバッククォート3つだけを書きます。開始側のバッククォートの直後に python や javascript のような言語名を続けると、シンタックスハイライトが有効になります。各行を半角スペース4つで字下げする方法でもコードブロックになりますが、そちらは言語を指定できません。

コードブロックに言語を指定するには？

開始のバッククォート3つの直後に、スペースを空けずに識別子を書きます。たとえば ```python です。多くのレンダラーで大文字小文字は区別されません。インデントコードブロックには言語を書く場所がなく、これがフェンス記法のほうが好まれる最大の理由です。

Markdownのコードブロックで使える言語は？

レンダラーによって異なります。GitHubはLinguistを通じて200以上を認識します。よく使う識別子は javascript、typescript、python、java、c、cpp、csharp、go、rust、swift、kotlin、php、ruby、bash、powershell、sql、json、yaml、toml、html、css、xml、markdown、diff です。js、ts、py、sh、yml、cs といった別名も使えます。

C言語のコードブロックの識別子は？

Cは c、C++ は cpp、C# は csharp を使います。GitHubでは c++ と cs という別名も受け付けます。識別子はハイライターへのヒントにすぎないため、認識されない名前を書いてもエラーにはならず、色分けなしで表示されるだけです。

フェンスコードブロックとインデントコードブロックの違いは？

フェンス記法はバッククォート3つで囲み、言語識別子やファイル名といったメタ情報を付けられるためシンタックスハイライトが効きます。インデント記法は各行を半角スペース4つで字下げする最初期のMarkdown 1.0由来の書き方で、これらの機能はありません。ただしリスト項目の中では、古いパーサーがフェンスを誤解釈することがあるためインデント記法が役に立ちます。

コードブロックの中でバッククォートをエスケープするには？

表示したいバッククォートの連続数より、フェンスを長くします。4つのフェンスは3つを含むブロックを、5つのフェンスは4つを含むブロックを囲めます。インラインコードではバッククォート2つを区切りにし、内容の両端に半角スペースを1つずつ入れると、中の1つのバッククォートがそのまま表示されます。

Markdownでdiffを表示するには？

言語識別子に diff を指定し、削除した行の先頭にマイナス、追加した行の先頭にプラス、変更のない行の先頭に半角スペースを置きます。GitHubやGitLabをはじめ、GitHub Flavored Markdownに対応したレンダラーの多くが自動で赤と緑に色分けします。

コードブロックにファイル名を表示するには？

共通の標準はありません。GitHubや多くのドキュメントテーマは言語の後ろのtitle属性を読み、```js title="app.js" のように書きます。QiitaやZenn、VuePressでは ```js:app.js の形式で、一部のJekyll構成では fileName="app.js" を使います。追加のテキストを理解しないレンダラーはそれを無視するため、コードブロック自体は正しく表示されます。

Markdownのコードブロックに行番号は付けられますか？

素のMarkdownでは付けられません。行番号はMarkdownの仕様ではなくシンタックスハイライターの機能なので、プラットフォーム次第です。Prismとhighlight.jsにはどちらも行番号用のプラグインがあり、Hugo、MkDocs、Docusaurusなどのサイトジェネレーターには設定項目が用意されています。GitHubはコードブロック内に行番号を表示しません。

リストの中にコードブロックを入れるには？

フェンスコードブロック全体を、リスト項目の本文の位置までインデントします。番号付きリストなら半角スペース4つ、箇条書きなら2つが目安です。前後には空行を入れてください。この字下げがないとフェンスがリストを終わらせてしまい、コードブロックがトップレベルに出てしまいます。