Fenced Code Blocks(フェンスコードブロック)

《 初回公開:2022/03/26 , 最終更新:未 》

原文は

旧バージョンの記事は

【 目次 】

要約

Fenced Code Blocks拡張機能は、コードブロックを定義するための二次的な方法を追加します。
これにより、インデントされたコードブロックのいくつかの制限が克服されます。
この拡張機能は、標準のMarkdownライブラリに含まれています。

構文

Fenced Code Blocksは、PHP Markdown Extraで最初に確立され、GitHub Flavored Markdownによって普及した構文を使用して定義されます。
Fenced code blocksは、1行に3つ以上のバッククォート (```) またはチルダ (~) で始まり、1行に一致するバッククォートまたはチルダのセットで終わります。
ブロックの終わりには、ブロックの開始と同じ数とタイプの文字が含まれている必要があります。
コードブロックの前後に空白行を配置することをお勧めします。

A paragraph before the code block.

```
a one-line code block
```

A paragraph after the code block.

バッククォートはユーザーの間でより人気があるようですが、チルダも使用できます。

~~~
a one-line code block
~~~

コードブロック内に一連のバッククォート(またはチルダ)を含めるには、デリミネーターに異なる数のバッククォートを使用します。

````
```
````

愚鈍人の独り言

デリミネーター(deliminator)って何?
ネットで検索しても出てこない。
多分、スペルが似ているdelimiter(デリミタ)みたいなものかな?

コードブロックの前後に挟む(```などの)文字列の事を言ってるみたいな。

Fenced Code Blocksには、コードブロックの最初または最後の行として空白行を含めることができ、それらの行は保持されます。

```

a three-line code block

```

インデントされたコードブロックとは異なり、Fenced Code Blocksは、リストの一部になることなく、リストアイテムの直後に続くことができます。

* A list item.

```
not part of the list
```

警告

Fenced Code Blocksは、ドキュメントルートレベルでのみサポートされます。
したがって、リストまたはブロッククォート(<blockquote>)要素内にネストすることはできません。
Fenced Code Blocksをネストする必要がある場合は、代わりにサードパーティの拡張機能SuperFencesを試してみてください。

属性

さまざまな属性は、開始デリミネータの直後に定義することにより、コードブロックごとに定義できます。
属性は中括弧{}で囲み、デリミネーターと同じ行に配置する必要があります。
一般に、属性リストとデリミネーターはスペースで区切るのが最適です。 リスト内の属性はスペースで区切る必要があります。

``` { attributes go here }
a code block with attributes
```

これらの属性が出力にどのように影響するかは、以下に説明するようにさまざまな要因によって異なります。

言語

コードブロック内のコードの言語は、構文ハイライターなどで使われるように指定できます。
言語の前にはドットを付け、空白を含めないでください。(.language-name)

``` { .html }
<p>HTML Document</p>
```

指定されたオプションが言語のみである限り、中括弧やドットは除外できます。

``` html
<p>HTML Document</p>
```

上記の例のいずれかも、次のHTMLが出力されます。

<pre><code class="language-html">&lt;p&gt;HTML Document&lt;/p&gt;
</code></pre>

言語名の前にlanguage-が付けられ、<code>タグのclass属性に割り当てられていることに注意してください。
これは、HTML 5仕様で提案されている形式です(仕様の2番目の「例」を参照)。
languageがデフォルトのプレフィックスですが、プレフィックスはlang_prefix構成オプションを使用してオーバーライドできます。

クラス

言語に加えて、言語と同じように、追加のクラスをドットの前に付けることで定義できます。

``` { .html .foo .bar }
<p>HTML Document</p>
```

複数のクラスを定義する場合、最初のクラスのみがコードブロックの「言語」として使用されます。
他のすべては、変更されずに<pre>タグに割り当てられます。
さらに、複数のクラスが定義されている場合は、言語クラスを含め、すべてのクラスに中括弧とドットが必要です。

上記の例では、次のHTMLが出力されます。

<pre class="foo bar"><code class="language-html">&lt;p&gt;HTML Document&lt;/p&gt;
</code></pre>

ID

コードブロックにIDを定義できます。これにより、リンクはURLハッシュを使用してコードブロックを直接指すことができます。
IDには、接頭辞としてハッシュ文字(#)を付ける必要があり、HTMLのid属性で許可されている文字のみを含める必要があります。

``` { #example }
A linkable code block
```

id属性は、出力の<pre>タグに割り当てられます。 上記の例では、次のHTMLが出力されます。

```html
<pre id="example"><code>A linkable code block
</code></pre>
```

同じドキュメント内の他の場所から、[link](#example)を使用してコードブロックにリンクできます。
IDは、言語、他のクラス、または他のサポートされている属性とともに定義できます。
アイテムの順序は関係ありません。

``` { #example .lang .foo .bar }
A linkable code block
```

Key/Value Pairs

Fenced_code拡張機能とattr_list拡張機能の両方が有効になっている場合は、キーと値のペアを属性リストで定義できます。
コードの強調表示が有効になっていない限り(以下を参照)、キーと値のペアは、出力の<code>タグの属性として割り当てられます。
キーと値のペアは、attr_list拡張機能について文書化されている構文を使用して定義する必要があります(たとえば、空白を含む値は引用符で囲む必要があります)。

``` { .lang #example style="color: #333; background: #f8f8f8;" }
A code block with inline styles. Fancy!
```

上記の例では、次のHTMLが出力されます。

<pre id="example"><code class="language-lang"  style="color: #333; background: #f8f8f8;">A code block with inline styles. Fancy!
</code></pre>

attr_list拡張機能が有効になっていない場合、キーと値のペアは無視されます。

Syntax Highlighting(構文の強調表示)

Fenced_code拡張機能とsyntax highlightingの両方が有効になっている場合、codehilite拡張機能は、コードブロックの内容を強調表示する構文に使用されます。
属性リストで定義された言語は、正しい言語が使用されていることを確認するためにcodehiliteに渡されます。
言語が指定されておらず、codehilite拡張機能の言語推測が無効になっていない場合、言語が推測されます。

codehilite拡張機能は、Pygmentsエンジンを使用して構文の強調表示を行います。
有効なPygmentsオプションは、属性リストでキーと値のペアとして定義でき、Pygmentsに渡されます。

``` { .lang linenos=true linenostart=42 hl_lines="43-44 50" title="An Example Code Block" }`
A truncated code block...
```

関連するレクサー(各言語には独自のレクサーがあります)によって受け入れられるオプションと同様に、有効なオプションには、完全なオプションを除き、PygmentsのHTMLFormatterで受け入れられるすべてのオプションが含まれます
ほとんどのレクサー(字句解析)には、このコンテキストでそれほど役立つオプションはありませんが、いくつかの重要な例外があります。
たとえば、PHPレクサーのstartinlineオプションを使用すると、各コードフラグメントを<?phpで開始する必要がなくなります。

Note

Fenced_code拡張機能は、Pygmentsによって提供される出力を変更しません。
したがって、Pygmentsが提供するオプションのみを利用できます。
Pygmentsは現在IDを定義する方法を提供していないため、構文の強調表示が有効になっている場合、属性リストで定義されたIDはすべて無視されます。
さらに、attr_list拡張機能が有効になっているかどうかに関係なく、Pygmentsオプションではないキー/値のペアは無視されます。

構文の強調表示を有効にする

構文の強調表示を有効にするには、codehilite拡張機能を有効にし、codehilite拡張機能のuse_pygmentsオプションをTrue(デフォルト)に設定する必要があります。
または、codehilite拡張機能が有効になっている限り、属性リストにuse_pygments = trueを含めることで、個々のコードブロックのグローバルuse_pygments = Falseオプションをオーバーライドできます。
use_pygmentsキー/値のペアは出力に含まれませんが、他のすべての属性は、そのコードブロックに対してのみ構文の強調表示が有効になっている場合と同じように動作します。

逆に、個々のコードブロックで構文の強調表示を無効にするには、属性リストにuse_pygments = falseを含めます。
use_pygmentsキー/値のペアは出力に含まれませんが、他のすべての属性は、グローバル設定に関係なく、そのコードブロックの構文の強調表示が無効になっている場合と同じように動作します。

関連項目

構文の強調表示を機能させるには、Pygmentsを適切にインストールしてセットアップする必要があります。
詳細については、codehilite拡張機能のドキュメントを参照してください。

使い方

一般的な拡張機能の使用法については、拡張機能を参照してください。 拡張機能の名前としてfenced_codeを使用します。
拡張機能の構成については、ライブラリリファレンスを参照してください。

出力を構成するために、次のオプションが提供されています。

  • lang_prefix: HTMLの<code>タグに割り当てられたlanguage classの前に付けられたプレフィックス。
    デフォルトではlanguage-。

ささいな例:

markdown.markdown(some_text, extensions=['fenced_code'])
ページのトップへ戻る