(Updated: )
/ #markdown 

Markdown escape backticks in inline code and fenced code blocks

When writing technical documentation, blog posts or conducting code reviews, it can be useful to render backticks in Markdown inline code, code blocks or fenced code blocks.

Since backticks are part of the Markdown syntax for inline code and code fences, this post looks at how to render them without clashing with the syntax.

Table of Contents

Escaping backticks in inline code

To escape backticks in “inline code” we have to use double backticks and a space “`` ” as the inline code delimiter.

For example to get the output: “A Go struct tag: `json:"id"`” (see information on Go struct tags), the markdown source is as follows:

A Go struct tag: `` `json:"id"` ``

Any number of backticks can be escaped in a similar manner. To render ` or ```, we need to input the following markdown:

To render `` ` `` or `` ``` ``, we need to

We’ve now seen how to escape backticks ("`") both in the “backtick-delimited code” and in the “single backtick” case. Next we’ll see how to escape triple backticks (```).

Escaping backticks in fenced code blocks/code fences

The next scenario comes from real-life code reviews of Markdown documents on GitHub. The GitHub syntax for suggestions is a markdown code block using ```suggestion as the start delimiter. This can cause issues when reviewing Markdown changes and suggesting changes that include a Markdown code fence since using triple backticks ``` will break the “suggestion”.

Alternate markdown fenced code block delimiter

Triple tilde

In order to leave suggestions on Markdown fenced code blocks, we can use the alternate delimiter ~~~. For example the following markdown code:

~~~suggestion
```json
{}
```
~~~

Renders as follows:

```json
{}
```

Quadruple backtick notation

````suggestion
```json
{}
```
````

Renders as follows:

```json
{}
```

Using indents to denote a Markdown code block

A different way to denote a Markdown code block is a double indent.

A downside of using indents is that there’s no equivalent to ```lang which would mark a code fence as in language lang. Since this technique is generally for Markdown, whose syntax is meant to be easy to read, we probably don’t need the language-specific syntax highlighting.

For example a way to render the following, ie. code that includes both code fence delimiters (~~~ and ```).

~~~
```json
{}
```
~~~

Is to use this source (note the 4-space or 1 tab indent)

    ~~~
    ```json
    {}
    ```
    ~~~

See also

Markdown Guide has a good section about escaping backticks: https://www.markdownguide.org/basic-syntax/#escaping-backticks

Author

Hugo Di Francesco

Co-author of "Professional JavaScript", "Front-End Development Projects with Vue.js" with Packt, "The Jest Handbook" (self-published). Hugo runs the Code with Hugo website helping over 100,000 developers every month and holds an MEng in Mathematical Computation from University College London (UCL). He has used JavaScript extensively to create scalable and performant platforms at companies such as Canon, Elsevier and (currently) Eurostar.

Get The Jest Handbook (100 pages)

Take your JavaScript testing to the next level by learning the ins and outs of Jest, the top JavaScript testing library.