【WordPress×Prism.js】クラス名一覧

WordPressでPrism.jsを使用する時に、コードブロックに付与するクラス名の一覧。

インストール言語やプラグインにより異なる。

Prism.jsの使用方法はこちら

Prism.jsのクラス名一覧

言語を指定する

HTMLの場合           language-html
CSSの場合          　language-css
JavaScriptの場合     language-js
PHPの場合            language-php
<!-- HTML -->
<pre><code class="language-html">

</code></pre>

<!-- CSS -->
<pre><code class="language-css">

</code></pre>

<!-- JS -->
<pre><code class="language-js">

</code></pre>

<!-- PHP -->
<pre><code class="language-php">

</code></pre>

エスケープ処理

< (大なり) → &lt;
> (小なり) → &gt;

指定したラインに背景色を付ける

<!-- 単一行 -->
<pre data-line="2"><code class="language-css"></code></pre>
<!-- 複数行 -->
<pre data-line="2,3"><code class="language-css"></code></pre>
<!-- 範囲指定1 -->
<pre data-line="2-5"><code class="language-css"></code></pre>
<!-- 範囲指定2 -->
<pre data-line="2-5,7-8"><code class="language-css"></code></pre>

行番号を表示する

<pre class="line-numbers"><code class="language-css">
p.code-1>code {
     padding: 0.2em 0.5em;
     background-color: #eee;
     font-size: 14px;
}
</code></pre>

＞結果


p.code-1>code {
     padding: 0.2em 0.5em;
     background-color: #eee;
     font-size: 14px;
}

スタートする番号を指定したい場合

<pre class="line-numbers" data-start="2"><code class="language-css">
p.code-1>code {
     padding: 0.2em 0.5em;
     background-color: #eee;
     font-size: 14px;
}
</code></pre>

＞結果


p.code-1>code {
     padding: 0.2em 0.5em;
     background-color: #eee;
     font-size: 14px;
}

コード名

プラグインShow Languageにより自動付与

インラインで使用する

<code class="language-html"><span>コード</span></code>

＞結果

こちらの<span>コード</span>が装飾されます。

使用できない機能

ブロックエディターのコードブロックではいくつかの機能が使用不可だった。

カスタマイズしたい場合は、カスタムHTMLブロックを推奨。

Related Tags