Markdown: Nested Code Block

How to render a markdown code block inside another

resource
markdown

Problem

Since delimiters in markdown are the same for both the start and the end, it can be tricky to nest things.

I came across this when writing my markdown reference guide where I needed to show a raw code block inside an actual code block.

Example of a nested code block

Note: The black boxes above are markdown code blocks rendered as HTML.

The problem is that the first set of backticks closes the code block instead of being rendered.

The Solution

The solution is to put a character before the backticks of the inner code block. This prevents the second set of three backticks from closing out the code block.

When you write ⬇️

‍```
X‍```
code block
X‍```
‍```

You get ⬇️

X‍```
code block
X‍```

Obviously using an X (or any other visible character) would change the meaning of the block. So instead of using X I used an invisible character.

There are a few options for invisible characters. I used this HTML character: ‌. It is between the following square brackets: [‍].

<div class="message">
  <span class="message-header">Copyable solution</span>
  <div class="message-body is-family-monospace">
```<br>
‍```<br>
inner code block<br>
‍```<br>
```<br>
  </div>
</div>

Related

resource
markdown