WordPressにPrismを導入［ オプション編 ］

Line Numbers

ソースコードの左側に行番号がつきます。

指定の方法は、
classに「line-numbers」を指定します。

Line Highlight

注目してほしい行をハイライトできるようになります。

指定の方法は…

ちなみに、ハイライトのCSSはこんな感じで指定されてるので、
調整したい場合は後からのCSSで上書きすればOKですよ♪

Normalize Whitespace

余分なインデントやスペースを削除してくれます。
デフォルトでONになってる4つの機能はコレ。

• remove-trailing（行末尾の空白を削除）
• remove-indent（余分なインデントを削除）
• left-trim（先頭からホワイトスペースを削除）
• right-trim（下部から空白を削除）

んで、上記の4つの機能の他に、
デフォルトではOFFになっている追加機能があります。

• break-lines（長い行を一定の長さで改行）
• indent（各行にタブを追加）
• remove-initial-line-feed（先頭から改行を1つ削除）
• tabs-to-spaces（タブを特定の数のスペースに変換）
• spaces-to-tabs（指定数のスペースをタブに変換）

この初期ではOFFになってる機能を利用したい場合、
毎回 <pre> タグに追記するのも面倒なので、
javascriptで一括指定してあげれば楽になりますよ。

prism.js より後に読み込ませればOK♪

Unescaped markup

htmlタグのエスケープ処理をしてくれます。
この機能の利用方法は2通りあって、
まず1つ目は <script type=”text/plain”> で囲む。

やっぱり html なんだから <pre> タグで囲みたいってときは、
htmlのコメントタグ「<!–」で表示コードを囲んであげるのが2つ目。

コメントタグで囲む2つ目の方法をすでに利用しているので、
上記の <!– は全角だけれど実際は半角です。。。

2つ目のコメントタグで囲む場合の注意点は、
ソースコード内でのコメントタグ（<!–）使用はNGとなります。
それと <code> と <!– はピッタリくっつけないと反応しません。
スペースとかダメですよ〜。

Toolbar（Show Language + Copy to Clipboard Button）

ボタンの「Show Language」や「Copy to Clipboard Button」を選択すると、
連動してこの「Toolbar」もチェックされる親要素的なものです。

もしかしたら選んだテーマで変わるかもしれないけれど、
Toolbarが生成するhtmlはこんな感じでしたよ。
見栄えでCSSを適用するときの参考に。

使っているバージョンは「Prism 1.29.0」で
テーマは「Tomorrow Night」のときのhtmlです。