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

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

うまく行かない例

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

GitHub上での表示:

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

GitHub上での表示:

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

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

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

環境	`~~~`	4バッククオート	インデント
Qiita	✅	❌	✅
GitHub	✅	✅	✅
esa.io ¹	✅	✅	✅
Zenn ²	✅	✅	✅
HackMD ³	✅	✅	✅
GitLab ⁴	✅	✅	✅