Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?
Organization

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: トリプルチルダを使う

トリプルチルダ~~~を使うと、トリプルバッククォートとの衝突が避けられます。この方法はQiitaでは使えません。

carbon.png

GitHub上での表示:

CleanShot 2021-10-14 at 10.15.46@2x.png

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

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

carbon (1).png

GitHub上での表示:

CleanShot 2021-10-14 at 10.15.46@2x.png

方法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/ 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?