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

今までHTMLやCSSのソースコードを綺麗に見やすく表示(ハイライト)するために『 Crayon Syntax Highlighter』というプラグインを使用していました。
その「Crayon Syntax Highlighter」がWordPressの最新バージョンに対応していないため、エラーが発生し一部の記事が表示されなくなりました。(プラグインの更新が数年ないらしい(^^;)
そこで代わりのプラグインを探しました。ですが、ソースコードを綺麗に見やすく(ハイライト)するプラグインはたくさんあります。その中からいくつか使ってみましたが…これというものが見つかりませんでした。
何がダメだったの?
「ショートコード」を使うものが多いんだよね。私はpreタグで出力できるプラグインがいいし~
ショートコードでソースコードを囲み表示するのもいいのですが、プラグインの更新が停止してしまったり、削除してしたりした場合ちゃんと表示されなくなってしまいます。
そんなわけでCrayon Syntax Highlighterの代替プラグインを探しているときに見つけた「プラグインを使わずにハイライト表示できるPrism.js」を導入することにしました!
ハイライト表示って?
ハイライト表示とは、文書などの文字列の背景色を反転させたり、文字の色を変えたりして強調させたりすることをいいます。「ハイライト」ともいいます。
ソースコードをハイライト表示させるために『Syntax Highlighter(シンタックス ハイライト)』というJavaScriptを使用します。
Syntax HighlighterはHTMLやCSSなどのソースコードを見えやすくしてくれるJavaScriptです。プログラム言語によってハイライト表示したり行番号をつけたりすることができます。
それで結耶は「Crayon Syntax Highlighter」を使っていたわけね。それが使えなくなったから代わりを探してたんだね。
そういうこと!でもいい代わりのプラグインが見つからなかったからプラグインを使わずにハイライト表示できるPrism.jsというのを導入してみたよ!
Prism.jsとは

Prism.jsは、Syntax Highlighter(シンタックス ハイライト)表示するためのJavaScriptライブラリです。
使いたい言語や機能が選択でき、プラグインを使うより軽量なのが特徴です。
導入は難しそうだね!
簡単だったよ!導入方法を説明するからきらりもやってみてね!
Luxeritasをお使いの方
Luxeritas バージョン3.6以前をお使いの方はPrism.jsは標準で実装されていて、[定型文登録]➡︎[ショートサンプル登録]で設定できます
スポンサーリンク
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は書き直してください。
これでPrism.jsが使えるようになります。
ファイルをアップロードして読み込むための記述…ボクもできたよ~!
じゃあ次は実際に使ってみよう!
使ってみよう!
実際に使ってみます。
<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ライブラリはあります。プラグインも便利ですが、プラグインより軽量なのでこちらのほうがいいのではないでしょうか。
結耶はこれからこのPrism.jsを使うのね。
そのつもり~♪今プラグインで表示させてた箇所のコードの修正をしてますww
スポンサーリンク
ディスカッション
コメント一覧
まだ、コメントがありません