Markdownのコードでバッククオート(`)を表示する方法

Markdownのコードとしてバッククォート(バックティック)を表示する方法を紹介します。

Markdownでは、コードは`で囲むと<code>タグになります。また、```で囲んだブロックはコードブロックになります。そのため、バッククォートを表示しようとなると、Markdownの記法と衝突してしまって、うまく表示できない問題があります。

うまく行かない例

次の書き方では、コードとしてバッククォートを表示できません。

JavaScriptではテンプレートリテラルに```を用います。

表示は次のようになっていまいます。

JavaScriptではテンプレートリテラルに```を用います。

バックスラッシュでエスケープしてもダメです。

テンプレートリテラルは`\``を用います。

テンプレートリテラルは```を用います。

Markdownのコードでバッククォートを表示する方法

Markdownのコードとしてバッククォートを表示するには、いくつか方法があります。それぞれの方法で、ウェブサービスやMarkdownパーサーが対応しているものとそうでないものがあるので、どの方法が使えるかはお使いの環境で試して下さい。

コードの場合

インラインコードで`を表示する方法です。

方法1: <code>タグを使う

HTMLの<code>タグが使えるMarkdownパーサーでは、<code>タグでバッククォートを囲むと表示できます。

テンプレートリテラルは<code>`</code>を用います。

テンプレートリテラルは`を用います。

方法2: ダブルバッククォートを使う

ダブルバッククォート``で囲んだバッククォートはそのまま表示できます。注意点として、コードの前後には半角スペースが必要です。

テンプレートリテラルは`` ` ``を用います。
テンプレートリテラルには、`` `${式}` ``のように文字列上で式展開もできます。

テンプレートリテラルは`を用います。
テンプレートリテラルには、`${式}`のように文字列上で式展開もできます。

各環境の対応状況

環境	<code>	ダブルバッククォート
Qiita	✅	✅
GitHub	✅	✅
esa.io 1	✅	✅
Zenn 2	❌	✅
HackMD 3	✅	✅
GitLab 4	✅	✅

コードブロックの場合

コードブロック内で```を表示する方法です。たとえば、MarkdownでMarkdownのサンプルコードをコードブロックに出す場合に役立ちます。

方法1: トリプルチルダを使う

トリプルチルダ~~~を使うと、トリプルバッククォートとの衝突が避けられます。

GitHub上での表示:

方法2: バッククォートを4つを使う

バッククォート4つ````を使うと、バッククォート3つをコードブロックに表示できます。この方法はQiitaでは使えません。

GitHub上での表示:

方法3: インデントする

コードブロックにしたいところをインデントする方法です。この場合、シンタックスハイライトのための言語指定ができないデメリットがあります。

Markdownではトリプルバッククォートでコードブロックを表現します:
    
    ```markdown
    // code
    ```

Markdownではトリプルバッククォートでコードブロックを表現します:

```markdown
// code
```

各環境の対応状況

環境	~~~	4バッククオート	インデント
Qiita	✅	❌	✅
GitHub	✅	✅	✅
esa.io 1	✅	✅	✅
Zenn 2	✅	✅	✅
HackMD 3	✅	✅	✅
GitLab 4	✅	✅	✅

1. esa - 自律的なチームのための情報共有サービス https://esa.io/ ↩ ↩²

2. Zenn｜エンジニアのための情報共有コミュニティ https://zenn.dev/ ↩ ↩²

3. HackMD - Collaborative Markdown Knowledge Base https://hackmd.io ↩ ↩²

4. GitLab - Iterate faster, innovate together https://gitlab.com/ ↩ ↩²