Prism.jsの基本的な使い方

こんにちは、ゆんつです。

ソースコードを綺麗に表示してくれる「Prism.js」。

プラグインでは無いのでワンクリックで導入することはできませんが、プラグインよりも軽いので導入してもサイトが重くなることがありません。

先日は「Prism.js」のCocoonへの導入方法について書きました。

今日はこの「Prism.js」の基本的な使い方について見ていきたいと思います。

Prism.jsの基本的な使い方
1. ソース部分のタグは必ず変換すること！！！
プラグインの使い方

Prism.jsの基本的な使い方

Prism.jsの基本的な使い方は

・preタグとcodeタグでハイライト表示したいコードを囲む

・codeタグのクラス名を「language-使用する言語」にする

という2点です。


    <pre>
  <code class="language-使用する言語名">
    //ソースコード
  </code>
</pre>

僕が良く使うコードと「language-」に続けて書くキーワードを一覧にしました。

ソースコードに使用する言語	「language-」に続けて書くキーワード
HTML	markup
CSS	css
JavaScript（jQuery）	js
PHP	php

見てもらうと解るようにHTMLだけはそのまま言語名の「html」ではなく「markup」となっていることがポイントです。

HTMLの他は言語名をほぼそのまま書くだけなので迷うことはないと思います。

またPrism.jsでHTMLのコードを表示する場合には１つだけ注意事項があります。

ソース部分のタグは必ず変換すること！！！

HTMLで使われるタグをそのままコピーしてPrism.jsの先ほどの<pre>と<code>で囲むテンプレートに貼り付けても、タグ部分は普通にタグとして認識され文字列としては表示してくれません。

たとえば


    <div>test</div>

というHTMLがあったとします。

これをこのまま先ほどのテンプレートのソースコード部分に貼り付けるとdivタグが文字列ではなく普通にタグと解釈されて「test」しか表示されません。

ですので、HTMLの場合ソースコードをそのままコピペするのではなく、ソースコードの中にあるタグを一旦ただの文字列に変換して貼り付ける必要があります。

変換サイトは以下のサイトが軽くて使いやすいです。

文字列 → 数値実体参照変換

変換サイトで

<div>test</div>

というソースコードを変換すると

<div>test</div>

になるので、これをソースコードの部分に貼り付けると、タグの部分は普通の文字列として解釈されて、タグもきちんと表示されるようになります。


    <div>test</div>

このような変換が必要となるのはタグを表示する場合だけなので、

「タグを表示する場合は一旦変換が必要」

と覚えておいてください。


<pre>
  <code class="language-markup">
    //変換後のHTMLのソースコード
  </code>
</pre>

プラグインの使い方

プラグインには2つのタイプがあります。

導入するだけで、その後は特に何もする必要が無いもの（言語名を表示する「Show Language」や余分な空白を消す「Normalize Whitespace」、ワンクリックでコードがコピーできるようになる「Copy to Clipboard Button」など）と、明示的に使用を宣言することが必要なものです。

明示的に使用を宣言することが必要なプラグインの使い方は

ソースコードを囲んでいるpreタグにキーワードを設定する

という方法でプラグインが適用されます。


<pre プラグインを使用するためのキーワード>
  <code class="language-使用する言語">
    //ソースコード
  </code>
</pre>

自分が使っているプラグインで明示的に使用を宣言することが必要なものついて一覧にしてみました。

プラグイン	preタグに設定するキーワード	備考
Line Highlight （指定行を目立たせる）	data-line="目立たせたい行番号"	コンマ区切りで複数の行番号を指定することが出来る。また1-3のようにハイフンで行番号をつなぐことで1行目～4行目まで全ての行を目立たせることが出来る。
Line Numbers （行番号を表示する）	class="line-numbers"	行の開始番号を指定したい場合には「data-start=”開始番号″」も指定する

実際に使ってみます。

Line Number


<ul>
  <li>テスト</li>
  <li>テスト</li>
  <li>テスト</li>
  <li>テスト</li>
</ul>

Line Number（行番号を3から開始する。data-start="3"）


<ul>
  <li>テスト</li>
  <li>テスト</li>
  <li>テスト</li>
  <li>テスト</li>
</ul>

Line Highlight（1行目と3行目を目立たせる。data-line="1,3"）


<ul>
  <li>テスト</li>
  <li>テスト</li>
  <li>テスト</li>
  <li>テスト</li>
</ul>

Line Highlight（2行目から5行目まで目立たせる。data-line="2-5"）


<ul>
  <li>テスト</li>
  <li>テスト</li>
  <li>テスト</li>
  <li>テスト</li>
</ul>

プラグインは併用することもできます。
Line Number + Line Highlight（3行目を目立たせる）


<ul>
  <li>テスト</li>
  <li>テスト</li>
  <li>テスト</li>
  <li>テスト</li>
</ul>

ゆんつ

簡単♪

このような感じでプラグインを使用します。

Prim.jsはこれ以外にもいろいろな機能がありますが、とりあえず上記の機能さえ押さえておけば、ソースコードの表示が出来るようになると思います。

以上がPrim.jsとそのプラグインの基本的な使用方法でした。

それでは、またですー。

Prism.jsの基本的な使い方

ソース部分のタグは必ず変換すること！！！

プラグインの使い方

コメント