Markdown のコードブロックの書き方は? 言語の指定とバッククォートの入れ方

コードブロックは、バッククォート 3 つだけの行で、コードの前後を囲みます。始めの行のバッククォートのすぐあとに js や python などの言語名を書くと、色分け(シンタックスハイライト)に対応したアプリで、その言語として色がつきます。チルダ 3 つ(~~~)で囲んでも同じです。

コードの中にバッククォート 3 つの行を書きたいときは、外側をバッククォート 4 つにします。CommonMark では、閉じる行は始めの行と同じ数以上のバッククォートでないといけないため、中の 3 つでは閉じません。文の中に短いコードを書くときは、バッククォート 1 つずつで囲みます。

コードブロックと言語の指定は、どう書く?

コードブロックの例(言語は JavaScript)

```js const greeting = "こんにちは"; console.log(greeting); ```

  • 言語名は、始めの行のバッククォートのすぐあとに書きます。js・ts・python・bash・json・html・css・sql などがよく使われます。
  • どの言語名が使えて、どう色がつくかは、仕様ではなく表示するアプリが決めます。GitHub は Linguist という仕組みで言語を見分けています。
  • 読みやすさのため、コードブロックの前後には空行を入れます(GitHub の案内)。

コードブロックの中に ``` を入れるには?

外側のバッククォートを 4 つにします。閉じる行は、始めの行と同じ数以上のバッククォートでないといけないので、中の 3 つの行ではコードブロックが終わりません。Markdown の書き方そのものを見せたいときに使います。

バッククォート 4 つで囲む例

````markdown ```js console.log("中のコードブロック"); ``` ````

外側をチルダ 3 つ(~~~)で囲み、中にバッククォート 3 つの行を書く方法もあります。

文の中に短いコードを書くには?

文の中では、コードをバッククォート 1 つずつで囲みます。コードの中にバッククォートが入るときは、外側をバッククォート 2 つにして、内側との間に空白を 1 つずつ入れます(CommonMark では、前後の空白は 1 つずつ取り除かれます)。

文の中のコードの例

設定は `npm install` で入れます。 記号のバッククォートは `` ` `` と書きます。

コードブロックにファイル名をつけられる?

CommonMark にも GFM にも、コードブロックにファイル名や題をつける書き方はありません。始めの行に js:app.js のように書く方法は、一部のサイトやアプリの独自の書き方で、ほかのところでは言語名が正しく読まれず、色がつかないこともあります。どこでも同じに見せたいときは、コードブロックのすぐ上の文にファイル名を書きます。

行の頭に空白を 4 つ入れた行も、コードブロックになります(字下げのコードブロック)。ただし言語名を書けないので、ふつうはバッククォートで囲む書き方を使います。

参考にした資料

あわせて読みたい

Markdown の書き方の記事を、すべて見る
お困りですか?使い方のご質問、機能のご要望、不具合のご報告など、お気軽にご連絡ください。
お問い合わせ →