prism.js【syntaxhig hlighter】設定メモ

Prism.js

a-blog cmsは2系からsyntax highlighterとして標準でgoogle-code-prettifyが入っているのですが、なんとなく気に入らなかったので別のものを入れてみました。

今回導入したものはMITライセンスのPrism.jsを選択。 シンプルで見やすかったので。

Prism.jsの導入

まずは導入です。公式サイトからダウンロードを押してテーマや欲しいプラグインなどを 選択してCSSとJSをダウンロードします。

ダウンロードしたら読み込みます。

<link href="/css/prism.css" rel="stylesheet" />
<script type="text/javascript" src="/js/prism.min.js"></script>

これで、prism.jsが使えるようになりました。 試しに以下のように書いてもらうとsyntax highlighterが有効になると思います。

<pre><code class=" language-css">
p { color: red; }
</code></pre>

表示結果

p { color: red; }

ユニットで使う

使えるようになりましたが、このままだとユニットで使いづらいです。 ユニットをカスタマイズして簡単に使えるようにしてみます。

まずは、コンフィグ > 編集設定 > テキストタグセレクト で ユニット追加ボタンをカスタマイズします。

prism.jsでは表示したいソースの種類によってclassをふります。なので よく使うソースを登録しておきましょう。要素に続けて「.」でclass、「#」でidを指定できます。

テンプレートのカスタマイズ

次に実際の表示をする為のテンプレートをカスタマイズします。 ユニットのテンプレートは/themes/system/include/unit.htmlになるので、 自分のテーマに持ってきて継承しましょう。

自分のテーマにコピーしたら以下のようにカスタマイズします。

<!-- カスタマイズ前 -->
<!-- BEGIN pre -->
<div class="entry-container"><pre{class}>{text}</pre></div><!-- END pre -->

<!-- カスタマイズ後 -->
<!-- BEGIN pre -->
<div class="entry-container"><pre class="line-numbers"><code{class}>{text}</code></pre></div><!-- END pre -->

これでユニットでsyntax highlighterが簡単に使えるようになりました。 このようにユニットは簡単なカスタマイズで使いやすくなります。

是非いろいろと試して使いやすい編集画面を作成してみて下さい。 ではでは。