WordPressのプラグインであるJetpackではMarkdown記法が使えます。Markdownでコードブロックを使うときは、シンタックスハイライトを行うためにidやclassを指定したい場合があります。
そこで、今回はJetpackのMarkdownでコードブロックを使うときにidやclassなどの指定方法を調べてみました。
開始ブロックの直後にテキストを1つ追加
codeタグのclass指定とみなされます。
``` aa
foobar
```
↓ 結果
<pre><code class="aa">foobar
</code></pre>
開始ブロックの直後にテキストを2つ追加
こちらは、残念ながらインラインのコード埋め込みとみなされてしまいます。
``` aa bb
foobar
```
↓ 結果
<p><code>aa bb<br>
foobar</code></p>
文字の頭にピリオドをつける
先頭にピリオドをつけると、classとみなされます(ピリオド無しと同じ振る舞いです)
``` .aa
foobar
```
↓ 結果
<pre><code class="aa">foobar
</code></pre>
括弧でくくって、文字の頭にピリオドをつける
この書き方をすれば、両方classとみなされます。
``` { .aa .bb }
foobar
```
↓ 結果
<pre><code class="aa bb">foobar
</code></pre>
括弧でくくって、文字の頭にシャープをつける
シャープをつけた方はidとみなされます。また,class指定と併用可能です。
``` { .aa .bb #cc }
foobar
```
↓ 結果
<pre><code id="cc" class="aa bb">foobar
</code></pre>
括弧でくくらず、文字の頭にシャープをつける
括弧なしで#aaとした場合は、インラインのコードとみなされてしまいます。
``` #aa
foobar
```
↓ 結果
<p><code>#aa<br>
foobar</code></p>
括弧でくくって、イコールの後に値を指定
"lang=jp"の部分を属性とみなしてくれます。
``` { .aa .bb #cc lang=jp}
ハロー
```
↓ 結果
<pre><code id="cc" class="aa bb" lang="jp">ハロー
</code></pre>
イコールの後にピリオドを入れる
イコールの後ににピリオドを入れると、ピリオドより後はclass指定とみなされます。このため属性のvalueにピリオドを入れることはできないようです。
``` { #code001 data-name=foo.php}
foobar
```
↓ 結果
<pre><code id="code001" class="php" data-name="foo">foobar
</code></pre>
こちらもおススメ