Markdown: Nested Code Block

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.

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.

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

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

• quora.com/how-do-you-insert-an-invisible-character-in-html