コードブロックを表すMarkdownをコードブロックの中に表示する方法

手軽に文章を執筆できるMarkdown記法ではソースコードの整形も非常に簡単で、バッククオート `ここにコード` でくくるだけでインラインコードとして表示できます。

また、Markdownの記法そのものを表現したい時などは、エスケープ処理を表すバックスラッシュ \ を記号の直前に書くことでMarkdownとして解釈されるのを防ぐことができます。例えば、\# 見出し と書けば <h1></h1> タグにならずに、# 見出し のように通常の文字列として表示されます。

そして、バッククオートをエスケープしたい時も \`コード` と書きます。

では、複数行のコード(コードブロック)の場合はどうでしょうか。

コードブロックは通常下記のように記述します。

```javascript
var a = 100;
var b = 50;
```

結果↓

var a = 100;
var b = 50;

では、次のようにエスケープさせてみると…

\```javascript
var a = 100;
var b = 50;
\```

結果↓
`“javascript
var a = 100;
var b = 50;
`“

期待↓

```javascript
var a = 100;
var b = 50;
```

期待していた表示になりません。どのように記述すれば期待通りの結果を得られるでしょうか?

スポンサーリンク

コードブロックをコードブロックに表示する方法2パターン

1.より多くのバッククオートでくくる

表示させたいコードブロックを、より多くのバッククオートでくくりましょう。

````
```javascript
var a = 100;
var b = 50;
```
````

結果↓

```javascript
var a = 100;
var b = 50;
```

もっとネストさせることもできます。

`````
````
```javascript
var a = 100;
var b = 50;
```
````
`````

結果↓

````
```javascript
var a = 100;
var b = 50;
```
````

2.インデントでネストさせる

表示させたいコードブロックを、スペース4つかタブ1つでネストさせましょう。

```
    ```javascript
    var a = 100;
    var b = 50;
    ```
```

<b>結果↓</b>

    ```javascript
    var a = 100;
    var b = 50;
    ```

もっとネストさせることもできます。

```
    ```
        ```javascript
        var a = 100;
        var b = 50;
        ```
    ```
```

<b>結果↓</b>

    ```
        ```javascript
        var a = 100;
        var b = 50;
        ```
    ```

まとめ

コードブロックを表すMarkdownをコードブロック中に表示させる方法をご紹介しました。ただし、インデントで実現する方法では環境によっては先頭にスペースが残ってしまうようです。なので、より多くのバッククオートでくくる方法をおすすめします。

ちなみに

先頭のスペースが表示されてしまう環境でも↓のように書くとスペース無く表示できました。

````
```
    ```javascript
    var a = 100;
    var b = 50;
    ```
```
````

両方が混在しても大丈夫なようです。

この記事が気に入ったら
カリノバにいいね ! しよう

by

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です