こんにちは、T田です。
前回は、シンタックスハイライトライブラリであるPrism.jsをダウンロードし、実際にWordPressに導入するところまでを行いました。

今回は、Prism.jsを使用してどのようにソースコードの飾り付け（色付け）をすれば良いのか、具体的に説明していきます。
WordPressを使用していなくても使い方は同じですので、ぜひ参考にしてください。

目次

  1. はじめに
  2. 基本的な使い方
  3. オプション（プラグイン）の使用
  4. おわりに

１．はじめに

前提として、Prism.jsの導入は完了しているものとして話を進めます。
導入がまだという場合は、前回のブログに詳しく書いてありますのでそちらを参照してください。

２．基本的な使い方

非常に簡単です。
ハイライト表示させたい部分を<code>タグで囲み、そのタグにclass属性を、その属性値にlanguage-xxxを指定するだけでハイライト表示されます。
「xxx」の部分には、適用させたい言語名を当てはめます。
具体的に何を書けば良いのかはこちらを参照してください。

例として、以下のPHPのソースコードをハイライト表示させてみましょう。

<?php
function echoFunc()
{
	echo "Hello PHP!\n";
}
?>

上記は、HTML上では以下のように書かれています。

<pre>
<code class="language-php">&lt;?php
function echoFunc()
{
&#009;echo "Hello PHP!\n";
}
?&gt;</code>
</pre>

< >などの文字は、そのまま書くと特殊文字として解釈されてしまうので実体参照に変換します。
また、ソースコード全体を整形済みテキスト（空白や改行に意味を持たせる）として表示させたい
ため、<code>タグの外側を<pre>タグで囲んでいます。

３．オプション（プラグイン）の使用

前回の導入作業で、Prism.jsのダウンロード時に以下のプラグインを選択しました。

イ．Line Highlight ： 指定行を強調表示
ロ．Line Numbers ： 行番号を表示
ハ．File Highlight ： ファイルを指定してハイライト表示
ニ．Show Language ： 言語名を表示
ホ．Command Line ： コマンドライン風に表示

それぞれの使い方について、順に説明していきます。

イ．Line Highlight

指定行を強調表示します。

<?php
function echoFunc()
{
	echo "Hello PHP!\n";
}
?>

<pre>タグにdata-line属性を、その属性値に強調表示したい行番号を指定します。
上記は<pre data-line="4">を指定しています。

複数行を強調表示したい場合は、<pre data-line="2-5">のようにハイフンつなぎで指定します。
すると、

<?php
function echoFunc()
{
	echo "Hello PHP!\n";
}
?>

のように表示されます。

<pre data-line="1,3-5">のようにカンマ区切りにすれば、同時に指定することもできます。

<?php
function echoFunc()
{
	echo "Hello PHP!\n";
}
?>

ロ．Line Numbers

行番号を表示します。

<?php
function echoFunc()
{
	echo "Hello PHP!\n";
}
?>

<pre>タグにclass属性を、その属性値にline-numbersを指定します。
<pre class="line-numbers">となります。

ハ．File Highlight

ファイルを指定して、そのファイル全体をハイライト表示させます。
<pre>タグにdata-src属性を、その属性値に強調表示したいファイルのパスを指定します。
<pre data-src="dir/target.php">のようになります。

ニ．Show Language

言語名を表示します。

<?php
function echoFunc()
{
	echo "Hello PHP!\n";
}
?>

ハイライト表示部分の右上を見ると、「ここを自由に設定できます」と表示されています。
このように表示させるには、<pre>タグにdata-language属性を、その属性値に表示させたい文字列を指定します。
上記は<pre data-language="ここを自由に設定できます">を指定しています。
data-language属性を指定しない場合は、<code class="language-xxx">の「xxx」の部分が表示されます。

ホ．Command Line

コマンドライン風に表示させます。
この説明はまた次回に。

４．おわりに

今回は、Prism.jsの基本的な使い方について説明しました。
次回は、Prism.jsのオプション（プラグイン）、「Command Line」についてお伝えしますのでお楽しみに！


<スポンサーリンク>
投稿タグ
, ,