How to write Markdown code blocks inside Markdown code blocks
⌠2023-03-28
Recently, I needed to show off some Markdown (archive) source code inside a Markdown code block (archive). To be precise, I wanted to include Markdown source code inside fenced code blocks (archive). Fenced code blocks werenât included in John Gruberâs original Markdown spec but it seems like most Markdown processors have added support for them since.
For the most part, showing markdown source code inside a fenced code block is pretty easy. You just write:
```markdown
**This** works just fine.
```
But what happens when you you need to add a code block to that Markdown source code? Wrapping the triple backticks (`) in yet-more-triple-backticks isnât going to work as the Markdown processor wonât understand where one block ends and the next one begins. As long as there are more than three backticks, it turns out that most Markdown processors donât mind how many backticks you use to delimit your code blocks. So, to write a Markdown code block inside a Markdown code block, just differ the number of backticks in the outer and inner code blocks:
````markdown
**This** also works just fine.
Here's my example code:
```json
{
"foo": "bar"
}
```
````
For some extra spice, this blog is also written in Markdown. So you may wonder how Iâve been writing these code blocks this whole time. Peeling back the curtain reveals:
`````markdown
````markdown
**This** also works just fine.
Here's my example code:
```json
{
"foo": "bar"
}
```
````
`````
Bonus
Markdown code blocks donât have to be delimited by backticks at all. So if youâre feeling fancy you could use triple tildes (~) instead:
~~~markdown
**This** also works just fine.
Here's my example code:
```json
{
"foo": "bar"
}
```
~~~