💻
Markdownでコードブロックにバッククオートを含める方法
`こういうの`
とか
```
こういうの
```
をどうやって書くかというお話です。
\`こういうの\` って感じでバッククオートをエスケープできるのかな？と想像するかもしれませんが、エスケープの仕組みはなくて、バッククオートの数を変えることで実現します。
インラインコード
`` `バッククオート1つをバッククオート2つで囲む` ``
``` ``バッククオート2つをバッククオート3つで囲む`` ```
` ``バッククオート2つをバッククオート1つで囲む`` `
こうすると、
`バッククオート1つをバッククオート2つで囲む`
``バッククオート2つをバッククオート3つで囲む``
``バッククオート2つをバッククオート1つで囲む``
こうなります。
つまり、 コード中に含めたい連続するバッククオートのどれとも異なる長さの連続バッククオートで囲めばよい わけです👍
インラインコードのオリジナルのMarkdownの仕様は こちら。
コードブロック
```
4文字インデントする
```
または
````
```
バッククオート4つで囲った中に、バッククオート3つで囲ったコードブロックを書く
```
````
で実現できます。
上記のレンダリング結果は
```
4文字インデントする
```
```
バッククオート4つで囲った中に、バッククオート3つで囲ったコードブロックを書く
```
それぞれこのようになります。
オリジナルのMarkdownの仕様は こちら 。
Fenced Code BlockはオリジナルのMarkdownの仕様ではなくGitHub Fravored Markdownの独自仕様 のようです。
ちなみに、インラインコードの場合は ` `` ` というように内側よりも短い連続バッククオートで囲う書き方ができましたが、Fecnced Code Blockでは
``
```
test
```
``
こう書くと
``
test
``
こうなってしまいます。より長い連続バッククオートで囲う必要があるようですね。
余談：VuePressではIndented Code Blockがスタイリングされない
ちなみにこのブログはVuePressで書かれていて、Markdownパーサー には markdown-it が、Syntax Highlighter には Prism がそれぞれ採用されています。
この組み合わせだと、Indented Code BlockにPrismのスタイルが適用されないっぽくて、上記の例示も見た目がおかしくなっていますね🤔
以上、参考になれば！
Discussion