プラグインを使わずにソースコードを綺麗に表示！Prism.jsを使ってみた！

2019年12月22日ブログ

今までHTMLやCSSのソースコードを綺麗に見やすく表示(ハイライト)するために『 Crayon Syntax Highlighter』というプラグインを使用していました。

その「Crayon Syntax Highlighter」がWordPressの最新バージョンに対応していないため、エラーが発生し一部の記事が表示されなくなりました。(プラグインの更新が数年ないらしい(^^;)

そこで代わりのプラグインを探しました。ですが、ソースコードを綺麗に見やすく(ハイライト)するプラグインはたくさんあります。その中からいくつか使ってみましたが…これというものが見つかりませんでした。

ショートコードでソースコードを囲み表示するのもいいのですが、プラグインの更新が停止してしまったり、削除してしたりした場合ちゃんと表示されなくなってしまいます。

そんなわけでCrayon Syntax Highlighterの代替プラグインを探しているときに見つけた「プラグインを使わずにハイライト表示できるPrism.js」を導入することにしました！

ハイライト表示って？

ハイライト表示とは、文書などの文字列の背景色を反転させたり、文字の色を変えたりして強調させたりすることをいいます。「ハイライト」ともいいます。

ソースコードをハイライト表示させるために『Syntax Highlighter(シンタックス ハイライト)』というJavaScriptを使用します。
Syntax HighlighterはHTMLやCSSなどのソースコードを見えやすくしてくれるJavaScriptです。プログラム言語によってハイライト表示したり行番号をつけたりすることができます。

Prism.jsとは

Prism.jp (公式)

Prism.jsは、Syntax Highlighter(シンタックス ハイライト)表示するためのJavaScriptライブラリです。

使いたい言語や機能が選択でき、プラグインを使うより軽量なのが特徴です。

Prism.jsの導入方法

Prism.js の導入方法を説明します。

ダウンロード

まずはPrism.jpサイトを開いてください。

右上にあるDownloadをクリックしてください。

上が「圧縮しない」、下が「圧縮する」となりますので下の Minified version にチェックを入れてください。

テーマを選択します。テーマ名をクリックするとテーマを確認できます。

使用する言語の選択をします。

デフォルトでは以下の4つが選択されていますので他に使う言語があればチェックを入れてください。

• Markup + HTML + XML + SVG + MathML
• CSS
• C-like
• JavaScript

プラグイン(機能)を選択します。プラグイン名をクリックすると確認できます。

私が選んだものは↓これです。

• Line Highlight (指定した行の)色を変える
• Line Numbers (行番号を付ける)
• Previewer: Color（Previewer: Base） (カラーをポップアップ表示)
• Toolbar (ツールバー)
• Copy to Clipboard Button (コピーボタン)

下にJavaScriptとCSSのコードが表示されます。表示の下にある「Download JS」と「Download CSS」をクリックしてJavaScriptとCSSファイルをダウンロードしてください。

サーバーにアップロード

ダウンロードした「prism.js」と「prism.css」をFTPツールでサーバーにアップロードしてください。

私の場合は「wp-content」内にフォルダを作りそこに「prism.js」と「prism.css」をアップロードしました。

読み込むための記述をする

アップロードしたファイルを読み込むためのコードをhead内に記述します。

<link rel="stylesheet" type="text/css" href="https://✕✕✕/wp-content/フォルダ名/prism.css" media="all" />
<script type="text/javascript" src="https://✕✕✕/wp-content/フォルダ名/prism.js">

※ファイルまでのURLは書き直してください。

使ってみよう！

実際に使ってみます。

<pre>
  <code class="language-markup">
    ここにコード
  </code>
</pre>

選択した言語によりクラス名が変わります。CSSなら「language-css」、JavaScriptなら「language-javascript」となります。

行番号をつける

上のコードでは行番号はつきません。行番号をつける場合は以下のように記述してください。

<pre class="line-numbers">
  <code class="language-markup">
    ここにコード
  </code>
</pre>

最後に

今回はプラグインを使わずにソースコードを見やすく表示できるPrism.jsをご紹介しました。Prism.js

Prism.js以外にもハイライト表示できるJavaScriptライブラリはあります。プラグインも便利ですが、プラグインより軽量なのでこちらのほうがいいのではないでしょうか。