[WordPress]JetpackのmarkdownにおけるCode blockの書き方

カテゴリ: 未分類 | タグ: ,

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>
こちらもおススメ

コメントを残す

メールアドレスが公開されることはありません。