Inside Markdown Code Blocks, You Can Use Backticks

Markdown is popular for creating technical documentation, tutorials, README files, and programming documentation. It to presents code, programming ideas and examples in a clean and readable manner. However, things can become confusing when you need to display backticks inside Markdown code blocks.

Backticks are often used for inline code and to define fenced code blocks. If your example has backticks in itself, Markdown might create formatting elements instead of backticks. This may lead to misaligned formatting, unwelcome blocks of code or documentation that is hard to read.

The nice thing is that with a little understanding of how Markdown processes them, it’s very easy to display backticks in the middle of Markdown code blocks. Learn multiple ways to output backticks, using longer fences, in-line code fences and more real-life examples.

Markdown: What Are Backticks?

The backtick (`) is a character that is used in markdown to indicate code formatting. It shall be a small and slanted mark, normally located on the same key as the tilde (~).

Markdown has two primary uses for backticks:

• In-line code: Single backtick in front of and behind a word or short section of code.
• Fenced code blocks: Three or more backticks in a row on adjacent lines, to start and end a code block.

Inline code can be written in this way:

console.log("Hello, world!");

A fenced code block is similar to this one.

function greet() {
  console.log("Hello, world!");
}

These are good for regular bit of code examples. When you do want to display the backtick character, or illustrate Markdown syntax that uses the backtick, there’s a problem.

(Why) Does Markdown have an issue with backticks?

Markdown uses the backticks as formatting indicators. It can be used at the start or end of an inline code span or a fenced code block.

For instance, you may wish to render the Markdown below when writing it within a code block:

Use `code` to highlight a word.

In this case the example is successful, since the outer code block is 3 back ticks, while the inner are single characters. But if you use three sets of backticks in your example, the same backticks can happen to enclose the code block.

This is frequently used in the documentation of Markdown syntax, in tutorials, and in examples of code fences.

To prevent such formatting problems, it is important to know how Markdown recognizes the beginning and end delimiters.

Method 1: Use Longer Backtick Fences

The easiest way to display backticks inside a fenced Markdown code block is to use a longer fence for the outer block.

Markdown provides the ability to use three or more consecutive back tics to enclose fenced code blocks. Closing fence must have at least as many backticks as opening fence and a fence opened with a backtic cannot contain backticks in its info string.

If any of your examples have three backticks, use four backticks on the “outside” of the backticks in your fenced div.

The following, for instance, is the content you want to display:

console.log(“Hello, world!”);

To literally render content, just use 4 backticks in your Markdown source enclosing the content.

```
console.log("Hello, world!");
```

The three-backtick inner fence can’t close the code block because it is surrounded by the four-backtick outer fence.

When are Longer Fences Appropriate?

Greater lengths of fence are needed when:

• Must include Markdown code block syntax.
• Triple backticks are found in your example.
• This is a step-by-step guide you’re creating using Markdown.
• You want to display examples of code within code without disrupting formatting.

This approach is typically the easiest and most understandable way to write technical papers.

Method 2: Use Tilde Fences Instead of Backticks

Rather than relying on backticks to submit a search term to the system, you can also submit a search term by using the “tilde fences”.

Another type of code block in Markdown is a fenced code block, which is enclosed in three or more tildes (~) as shown below.

This provides you another option to display your backticks without expanding the outer fence of backticks.

For instance you can demonstrate an example with triple backticks:

```
console.log("Hello, world!");
```

In this instance the outer example is supplemented with tildes and the inner example uses backticks. As the two delimiters are not the same, the inner backticks don’t close the outer block.

Why is there need for Tilde Fences?

Tilde fences are helpful when:

• You often write down Markdown syntax.
• Triple backticks are already included in your examples.
• You wish to use the same inner code fence.
• You like having a clear distinction between the outer and inner delimiters.

Most modern Markdown implementations support both the back tick fence and the tilde fence; however each Markdown processor might have restrictions.

Method 3: Display Backticks in Inline Code

If you just want to mark just one or two backticks in a sentence, not a block of code, then just put a few ticking in front of and behind the backtick(s) you want to highlight.

Code spans can be used in place, and, if you need to use backticks in the code span, you may use a longer sequence of backticks as the delimiter.

So, if you want to show just one backtick character, you should enclose it in two backtick characters:

` “

The two backticks are on the outside and there is one backtick in the actual content.

A word can also be displayed in a word with backticks:

Use code to format the text.

In this case the delimiters (two backside ticks) make the backside tick inside the content show as a literal backside tick.

What if the Content includes Double Backticks?

Utilize a delimiter that is not used in the content and is not as long as the longest string of backticks in the content.

For instance, two backticks in the text will act as the end of the inline code span when three backticks are used as the span’s open delimiter, as long as the Markdown processor supports standard use of a span of inline code.

The basic guideline is to pick an opening and closing delimiter that is bigger than any multi-line block of backticks that can be embedded within the content.

Method 4: Use HTML Entities Where Appropriate

When appropriate, use HTML entities to generate symbols.

Some Markdown systems will accept numbers to represent HTML characters, such as the backtick:

• &96; is the decimal character reference.
• The hexadecimal character reference (is) &x60;.

For instance, without a code span, &96; will appear as a back tick in a Markdown processor which understands HTML character references.

But there is a drawback with this method. Unless it is inside a Markdown code span or fenced code block, Character references are usually rendered as-is, not as their respective characters.

For example:

&96;

This code block shows the characters &, “, 9, etc rather than replace the reference with a backtick.

HTML entities may be convenient in regular Markdown text, but can’t replace longer fences if you want to print a literal backtick in your code block.

Nested Markdown Code Examples

Literal values between two delimiters are considered code examples.Literal values between two delimiters are code examples.

The trick with nesting Markdown in Markdown is first selecting an outer delimiter which doesn’t clash with the enclosed example