このページの内容

4.5フェンス付きコードブロック

コードフェンスとは、バッククォート(`)またはチルダ(~)を、少なくとも3個連続して並べたものです。チルダとバッククォートを混ぜることはできません。フェンス付きコードブロックは、最大3個のスペースによる字下げを前に置いたコードフェンスで始まります。

開始コードフェンスの行には、フェンスの後に任意でテキストを置けます。その先頭と末尾のスペースやタブを取り除いたものを、情報文字列と呼びます。情報文字列がバッククォートのフェンスの後にある場合、バッククォートを含んではいけません。この制限は、そうしないと一部のインラインコードが、フェンス付きコードブロックの開始と誤って解釈されてしまうためです。

コードブロックの内容は、開始と同じ種類(バッククォートまたはチルダ)で、開始フェンス以上の個数を持つ終了コードフェンスまでの、後続のすべての行です。開始フェンスがN個のスペースで字下げされている場合、内容の各行から、存在する範囲で最大N個の字下げスペースを取り除きます。内容行が字下げされていなければ、そのまま保持します。字下げがN個以下のスペースであれば、字下げをすべて取り除きます。

終了コードフェンスの前には、最大3個のスペースによる字下げを置けます。後に置けるのはスペースやタブだけで、それらは無視されます。終了コードフェンスが見つからないまま、そのコードブロックを含むブロックまたは文書の末尾に達した場合、開始フェンスの後から、含まれているブロックまたは文書の末尾までのすべての行がコードブロックの内容になります。別の仕様として、終了フェンスが見つからない場合に後戻りして解析する方法も考えられます。しかし、それでは解析の効率が大きく落ちますし、ここで述べた挙動に実質的な欠点は見当たりません。

フェンス付きコードブロックは段落を中断でき、前後に空行は必要ありません。

コードフェンスの内容は文字どおりのテキストとして扱われ、インラインとしては解析されません。情報文字列の最初の単語は、通常、コード例の言語を指定するために使われ、class属性としてcodeタグに出力されます。ただし、この仕様では、情報文字列の具体的な扱いは何も義務づけていません。

バッククォートを使った単純な例です。

```
<
 >
```
<pre><code>&lt;
 &gt;
</code></pre>

チルダを使った例です。

~~~
<
 >
~~~
<pre><code>&lt;
 &gt;
</code></pre>

バッククォートが3個より少ない場合は不十分です。

``
foo
``
<p><code>foo</code></p>

終了コードフェンスには、開始フェンスと同じ文字を使わなければなりません。

```
aaa
~~~
```
<pre><code>aaa
~~~
</code></pre>
~~~
aaa
```
~~~
<pre><code>aaa
```
</code></pre>

終了コードフェンスは、開始フェンス以上の長さでなければなりません。

````
aaa
```
``````
<pre><code>aaa
```
</code></pre>
~~~~
aaa
~~~
~~~~
<pre><code>aaa
~~~
</code></pre>

閉じられていないコードブロックは、文書の末尾、またはそれを含むブロック引用やリスト項目の末尾で閉じられます。

```
<pre><code></code></pre>
`````

```
aaa
<pre><code>
```
aaa
</code></pre>
> ```
> aaa

bbb
<blockquote>
<pre><code>aaa
</code></pre>
</blockquote>
<p>bbb</p>

コードブロックの内容は、すべて空行でもかまいません。

```

  
```
<pre><code>
  
</code></pre>

コードブロックは空でもかまいません。

```
```
<pre><code></code></pre>

フェンスは字下げできます。開始フェンスが字下げされている場合、内容行の先頭にも同じ字下げがあれば、それを取り除きます。

 ```
 aaa
aaa
```
<pre><code>aaa
aaa
</code></pre>
  ```
aaa
  aaa
aaa
  ```
<pre><code>aaa
aaa
aaa
</code></pre>
   ```
   aaa
    aaa
  aaa
   ```
<pre><code>aaa
 aaa
aaa
</code></pre>

4個のスペースによる字下げは多すぎます。

    ```
    aaa
    ```
<pre><code>```
aaa
```
</code></pre>

終了フェンスの前には最大3個のスペースによる字下げを置けます。その字下げは、開始フェンスの字下げと一致する必要はありません。

```
aaa
  ```
<pre><code>aaa
</code></pre>
   ```
aaa
  ```
<pre><code>aaa
</code></pre>

これは4個のスペースで字下げされているため、終了フェンスにはなりません。

```
aaa
    ```
<pre><code>aaa
    ```
</code></pre>

開始と終了のコードフェンスは、内部にスペースやタブを含めることはできません。

``` ```
aaa
<p><code> </code>
aaa</p>
~~~~~~
aaa
~~~ ~~
<pre><code>aaa
~~~ ~~
</code></pre>

フェンス付きコードブロックは、段落を中断できます。また、間に空行を置かず、直後に段落を続けることもできます。

foo
```
bar
```
baz
<p>foo</p>
<pre><code>bar
</code></pre>
<p>baz</p>

ほかのブロックも、間に空行を置かず、フェンス付きコードブロックの前後に置けます。

foo
---
~~~
bar
~~~
# baz
<h2>foo</h2>
<pre><code>bar
</code></pre>
<h1>baz</h1>

開始コードフェンスの後には、情報文字列を指定できます。この仕様は情報文字列の具体的な扱いを義務づけませんが、その最初の単語は、通常、コードブロックの言語を指定するために使われます。HTML出力では通常、code要素に、language-とその後に言語名をつなげたクラスを追加して、言語を示します。

```ruby
def foo(x)
  return 3
end
```
<pre><code class="language-ruby">def foo(x)
  return 3
end
</code></pre>
~~~~    ruby startline=3 $%@#$
def foo(x)
  return 3
end
~~~~~~~
<pre><code class="language-ruby">def foo(x)
  return 3
end
</code></pre>
````;
````
<pre><code class="language-;"></code></pre>

バッククォートのコードブロックの情報文字列に、バッククォートを含めることはできません。

``` aa ```
foo
<p><code>aa</code>
foo</p>

チルダのコードブロックの情報文字列には、バッククォートとチルダを含められます。

~~~ aa ``` ~~~
foo
~~~
<pre><code class="language-aa">foo
</code></pre>

終了コードフェンスに情報文字列を付けることはできません。

```
``` aaa
```
<pre><code>``` aaa
</code></pre>