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
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.
orJoin 1000s of developers learning about Enterprise-grade Node.js & JavaScript