最終更新日:2021.10.26（公開:2021.6.15）

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

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

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

Prism.jsの設置方法

WordPressでコードを表示するなら軽量で快適表示のPrism.js！設置方法を徹底解説！
2021.10.26

基本的な使い方

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

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

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

重要！

貼り付けるソースコードは、そのまま記載してはいけません。HTML内でタグをそのまま書くとタグだと認識してしまうので、<は<、“を"というように変換する必要があります。この変換することを「実体参照変換」と言います。
以下のようなサイトで簡単に変換してくれるので、忘れずに行ってください。

HTML特殊文字変換ツール

例）HTMLの場合

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

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

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

<h1>Hello Sendai!</h1>

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

Prism.jsの設置方法

WordPressでコードを表示するなら軽量で快適表示のPrism.js！設置方法を徹底解説！
2021.10.26

例）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種類」もあります。サポートする言語と言語の指定用文字列は下記の公式ページで確認してください。

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

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

Prism.jsの設置方法

WordPressでコードを表示するなら軽量で快適表示のPrism.js！設置方法を徹底解説！
2021.10.26

行番号を表示する

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」にチェックを入れておく必要があります。

Prism.jsの設置方法

WordPressでコードを表示するなら軽量で快適表示のPrism.js！設置方法を徹底解説！
2021.10.26

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];
}

さいごに

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

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

2021.05.18

WordPressでコードを表示するなら軽量で快適表示の...

2021.10.01

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

基本的な使い方

例）HTMLの場合

例）PHPの場合

例）JavaScriptの場合

行番号を表示する

1行目から始めたくない

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

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

line-numbersと併せて使う

さいごに

WordPressでコードを表示するなら軽量で快適表示の...

WordPressで使用する画像を自動でWebPに変換・表示...

関連記事

WordPressでのリダイレクトは「Redirection」で決まり！基本設定を解説します！

CakePHP3.xでcreatedとmodifiedを2.x同様に自動的に更新する方法

WordPressで使用する画像を自動でWebPに変換・表示切替してくれるプラグイン「WebP Converter for Media」