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
Interested in Alpine.js?
Power up your debugging with the Alpine.js Devtools Extension for Chrome and Firefox. Trusted by over 15,000 developers (rated 4.5 ⭐️).
orJoin 1000s of developers learning about Enterprise-grade Node.js & JavaScript