【WP】Prism.jsの使い方や機能の紹介、ダウンロードする際のヒント!
目次 -index-
当サイトではコードの表示に「prism.js」を使ってコードを見やすく(シンタックハイライト)しています。
「prism.js」には以下のようなプラグイン(追加機能)があり、Line Hight、Line Numbers、Highlight Keywords しか有効にして使っていなかったので設定を見直して下図のようなプラグインを追加しました。
基本的な使い方
下記URLの上部に「DOWNLOAD」ボタンがありますがそこからダウンロードページへ行けます。
因みにダウンロードベージにも同じボタンがありますがただこのページを開くだけのボタンなのでダウンロードは開始されません。
使用したいテーマ(デザイン)、言語、プラグイン(追加機能)のチェックボックスにチェックを入れると容量が表示されます。因みに圧縮レベルで「Minified version」を選択していてもprism.jsは圧縮されていますがprism.cssは圧縮されないみたいです。
下部にある「DOWNLOAD JS」と「DOWNLOAD CSS」からprism.jsとprism.cssをダウンロードして適当な場所に設置して使います。
設置方法
ダウンロードしたprism.cssとprism.jsのふたつのファイルをページ内に最適な場所に設置して読み込めるようにします。
当サイト(ワードプレス)ではfunctions.phpに以下のように記載して読み込んでいます。
使用方法
実際にコードを記載するには、<pre><code>~</code></pre>の間にコードを記載します。
単一行の場合は<pre>タグを除いて書くこともできるようですが上記の方が推奨されているようです。
codeタグを改行させてからコードを貼り付けると1行目が改行されて空白の行が出来ます。プラグイン「Normalize Whitespace」を入れるとならなくなるみたいです。
言語の指定
適切な言語を記載すると正しい言語を認識して色付けされます。
codeタグに「class=”language-xxx”」を追加して利用します。その際にコード言語を指定することで正しい色付けがなされます。
CSSの使用例です。
CSSなのに「markup(html)」と異なった言語を指定すると正しい色分けができなくなります。
HTMLの場合は、「<(大なり)、>(小なし)」等のカッコを含む場合はエスケープする必要があります。
JavaScriptの使用例です。
PHPの使用例です。
PHPでもHTMLタグを含む場合はエスケープする必要があります。
エスケープ処理
「<(大なり)」、「>(小なり)」の特殊文字(エスケープシーケンス)はHTMLタグカッコと判別できないので変換処理(エスケープ)をする必要があります。
変換処理には下記URLのようなコードを貼り付けると変換してくれるブラウザ上で動作するツールがあります。
またはビジュアルエディタに「テキストとしてペースト」してテキストエディタに切り替える自動的に変換してくれるのでそちらを利用る方法もあります。
クラスの干渉
当環境ではコード内に<!– –>等を入れると「class=”token comment”」というクラスが付加されるようなんですが、その内の「.comment」がコメント欄のクラスとバッティングしてコードの一部がbackground-colorで隠れるという現象が起こました。
親要素のidを付加してセレクターを「#comments .comment」として処理しました。
Line Highlight
Line Highlightは指定したラインに背景色を付けることができます。
preタグに「data-line=””」を付加させて行番号を指定します。
Line Numbers
preタグに「class=”line-numbers”」を記載すると左端に行番号が表示されます。
スタートする番号を指定したい場合はdata-start=”881″と記載するとその行からスタートさせることが可能。
マイナスの符号をつけると負の番号からスタートさせることも可能。
Line Highlightも同時に使用する場合は行番号もスタート番号を軸に設定する必要があります。
Show Language
コード領域にカーソルを乗せると右上にコード名が記載されます。
プラグイン「Show Language」をチェックを入れたファイルを設置すれば何もせずに使えます。
このプラグインを選択すると自動的に「Toolbar」も付いてきます。
Inline color
カラーコード名の前に設定されたカラーボックスが表示され、色がすぐに判別できるようになります。
Previewers
数値にカーソルを合わせると角度(rotate)、色(color)、グラデーション(gradient)、イージング(lenear)、トランジョン(transtion)等の値がポップアップ画面で表示されます。
このプラグインは容量(約15KB)がダントツに大きいのでその辺が気になる場合は入れない方がいいかも知れません。
Toolbar
必要なかったんですが「Copy to Clipboard Button」を選ぶとセット付いてきます。
preタグに「data-label=”よろしく”」とか追加するとコード領域にカーソルを乗せるとメッセージを表示されたり、クリックしたらコードを選択したりもできるようです。
Copy to Clipboard Button
コード領域にカーソルを移動させるとクリップボードにコピーするボタンが表示されます。
実際にクリックすると文字列が実際にコピーされ、メモ帳などにペーストすることができます。
コピーボタンのデザインを変更
コピーボタンのデザインが好みじゃなかったので下図のようにカスタマイズしてみました。
既存のCSSを打ち消し、!importantで強制的に効かせています。
尚、ブラウザ(firefox)の幅かなにかで表示位置が左下になったりしてたので止めてるかも知れません。
再ダウンロードする際のちょっとしたコツ
「Prism.js」って言語やプラグイン機能を追加したい時に一から選択し直しする必要があってめっちゃ効率悪いですし、どれにチェックを入れてたかなんか一々覚えていないので地味に面倒なんですよね。そんなときに便利な方法を紹介します。
実は、prism.jsやprism.cssをメモ帳とかで開くと上部コメント領域にバージョンのほかにダウンロードリンクが記載されています。書かれている内容は同じようです。
アドレスを見れば分かると思いますが選択した項目がアドレスに一部となっているのでこのアドレスをコピペして選択し直すか、ダウンロードする際にブックマークしておくとどの機能にチェックを入れていたかすぐに分かります。
参考までに筆者が選択したリンクを貼っておきます。
ただ、張り付ける際にダウンロードページに張り付けても動作しなかったのでそれ以外のページに張り付けて下さい。