Prism.jsの使い方を徹底解説！WordPressでのコード表示はPrism.jsで決まりです！

仙台のWEB担当者の方、こんにちは！
今日はWordpressでコードを表示する時に便利な「Prism.js」の使い方をご徹底解説します！

ちなみに設置方法はこちらをご覧ください。

基本的な使い方

<pre><code>…</code></pre>の中にソースコードを書きます。そして<code>タグのclassにclass="language-xxx"という形でソースコードの言語を指定します。

<pre><code class="language-xxx">
<!--ここにソースコードを書く-->
</code></pre>

language-xxxの「xxx」の部分にソースコードの言語を指定します。

例）HTMLの場合

language-htmlと指定します。ちなみにこの部分はlang-htmlと省略することもできます。

<pre><code class="language-html">
<h1>Hello Sendai!</h1>
</code></pre>

実際はこんな感じで表示されます。

<h1>Hello Sendai!</h1>

文字の色やスタイル、サポートする言語などは設置の際に指定しなくてはなりません。具体的な方法はこちらをご覧ください。

例）PHPの場合

同じようにlanguage-phpと指定します。略してlang-phpでも大丈夫です。

<pre><code class="language-php">
$color = ['赤', '黄', '青'];
// for文
for ($i = 0, $size = count($color); $i < $size; ++$i) {
  echo $color[$i];
}
</code></pre>

このように表示されます。

$color = ['赤', '黄', '青'];
// for文
for ($i = 0, $size = count($color); $i < $size; ++$i) {
  echo $color[$i];
}

例）JavaScriptの場合

language-javascriptと指定します。略してlang-jsでもOKです。

<pre><code class="language-javascript">
$(function (){
   $('span').css('color','#ff0000');
});   

このように表示されます。

$(function (){
   $('span').css('color','#ff0000');
});   

具体的な例を3つの言語で挙げましたが、実際サポートする言語は「257種類」もあります。サポートする言語と言語の指定用文字列は下記の公式ページで確認してください。

【公式ページ】サポートする言語と言語の指定用文字列

それから、ダウンロードする際は全てを指定すると表示が重くなってしまったりするので、必要な言語だけを指定してダウンロードするようにしましょう！

行番号を表示する

preにclass="line-numbersを加えることで、ソースコードの左側に「行番号」を表示することがでます。

<pre class="line-numbers"><code class="language-php">
$color = ['赤', '黄', '青'];
// for文
for ($i = 0, $size = count($color); $i < $size; ++$i) {
  echo $color[$i];
}
</code></pre>

このように表示されます。

$color = ['赤', '黄', '青'];
// for文
for ($i = 0, $size = count($color); $i < $size; ++$i) {
  echo $color[$i];
}

この機能を使うには設置段階の「JavaScript」と「CSS」をダウンロードする際にPluginsの「Line Numbers」にチェックを入れておく必要があります。

1行目から始めたくない

例えば、16行目から始めたい場合などは、preにdata-start=”16″という形でdata-startを加えます。

<pre class="line-numbers" data-start="16"><code class="language-php">
$color = ['赤', '黄', '青'];
// for文
for ($i = 0, $size = count($color); $i < $size; ++$i) {
  echo $color[$i];
}
</code></pre>

16行目から始まっていますね。「このファイルの何行目に…」といった形で解説などする場合は、このように指定行から始まる形にした方がわかりやすいですね。

$color = ['赤', '黄', '青'];
// for文
for ($i = 0, $size = count($color); $i < $size; ++$i) {
  echo $color[$i];
}

指定行をハイライト表示にする

preにdata-line="3"と記述します。

<pre data-line="3"><code class="language-php">
$color = ['赤', '黄', '青'];
// for文
for ($i = 0, $size = count($color); $i < $size; ++$i) {
  echo $color[$i];
}
</code></pre>

3行目が薄っすらハイライト表示になりました。

$color = ['赤', '黄', '青'];
// for文
for ($i = 0, $size = count($color); $i < $size; ++$i) {
  echo $color[$i];
}

複数行をハイライト表示させる

<pre data-line="1,3"><code class="language-php">
$color = ['赤', '黄', '青'];
// for文
for ($i = 0, $size = count($color); $i < $size; ++$i) {
  echo $color[$i];
}
</code></pre>

1行目と3行目がハイライト表示されています。

$color = ['赤', '黄', '青'];
// for文
for ($i = 0, $size = count($color); $i < $size; ++$i) {
  echo $color[$i];
}

line-numbersと併せて使う

<pre class="line-numbers" data-line="1,3"><code class="language-php">
$color = ['赤', '黄', '青'];
// for文
for ($i = 0, $size = count($color); $i < $size; ++$i) {
  echo $color[$i];
}
</code></pre>

class="line-numbers"を併せると以下のように表示されます。

$color = ['赤', '黄', '青'];
// for文
for ($i = 0, $size = count($color); $i < $size; ++$i) {
  echo $color[$i];
}

もちろんdata-startも併せて使用できます。<pre class="line-numbers" data-line="500,503" data-start="500">と指定すると、500行目から始まって、500行目と503行目がハイライト表示されるようになります。

$color = ['赤', '黄', '青'];
// for文
for ($i = 0, $size = count($color); $i < $size; ++$i) {
  echo $color[$i];
}

さいごに

今回は長くなってしまいました。丁寧に書いたつもりですが、きちんと伝わっているでしょうか？

それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならダテナまで！