WordPressでのブログ構築ノウハウ

【WordPress】Prism.jsでソースコードをシンタックスハイライト（色付け表示）させる

アイキャッチ：シンタックスハイライト前後比較

この記事の読了目安時間：5分⇒手順など丁寧に書いたため、お急ぎの方は目次の見出しからお好きなところにジャンプしてください。

先日の記事、「【HTML＆CSS】ナビゲーションメニューのヘッダーエリア右側固定表示、画面幅に合わせて折り返させる設定及びトラブル例」を作成した際、HTMLとCSSのコードをシンタックスハイライト（色付け表示）させようといろんな方法を試して、最終的にPrism.jsライブラリを使ってうまくできたので、今日はその導入方法をご紹介します。

この記事で分かること

  • コードをシンタックスハイライトさせた前後の比較
  • Prism.jsライブラリの導入方法と手順
  • HTML特殊文字変換ツールでコードを変換する方法
  • Google Code-Prettifyなどの導入失敗例

 

この記事の信頼性

ゆーさん
この記事を書いている僕（@Arc_to_Future）は、WEBサイト管理者養成コース（3ヶ月間フルータイム）でコーティング及びWordPressでのサイト構築ノウハウなどを学んだ後、見本となるサイトをいろいろ研究したり、日々研鑽中！

なお、当ブログは7記事でGoogle AdSense申請・翌日審査通過し、Amazonアフィリエイトの審査にも1発合格しており、共に収益を上げることができています。

 

コードをシンタックスハイライトさせた前後の比較

まず、以下の図でJavaScript（jQuery）のコードをシンタックスハイライトさせた前後を比較してみてください。

もしこのように自分のブログでソースコードを色付け・インデックスさせてみようと思ったら、是非この記事をご参考にしていただき、導入してみましょう。

Before

$(window).scroll(function () {
if ($(window).scrollTop() > 100 && $("header").hasClass('small') == false) {
$("nav").css({
display: 'none'
});
$("header").addClass("small");
$("nav").addClass("small");
setTimeout(function () {
$("nav").stop().slideToggle(200);
}, 400);

} else if ($(window).scrollTop() < 100 && $("header").hasClass('small') == true) {
$("header").removeClass("small");
$("nav").removeClass("small");
}
});

After

$(window).scroll(function () {
　if ($(window).scrollTop() > 100 && $("header").hasClass('small') == false) {
　　$("nav").css({
　　　display: 'none'
　　});
　　$("header").addClass("small");
　　$("nav").addClass("small");
　　setTimeout(function () {
　　$("nav").stop().slideToggle(200);
　　}, 400);

　} else if ($(window).scrollTop() < 100 && $("header").hasClass('small') == true) {
　　$("header").removeClass("small");
　　$("nav").removeClass("small");
　}
});

 

 

Prism.jsライブラリの導入準備：jsファイルとCSSファイルをダウンロード

では、早速導入準備に入ります。

Prism.jsライブラリはJavaScriptのjsファイルとCSSファイルから構成され、以下のPrism のダウンロードページから必要なものをダウンロードします。

Prism のダウンロードページ

ダウンロードするファイルのCompression level（圧縮レベル）を選ぶ

まず、開いたダウンロードページの左上に、これからダウンロードするファイルの「Compression level（圧縮レベル）」を選びます。

これからダウンロードするjsファイルとCSSファイルに対して、細かい編集などをする予定があれば、「Development version」を選択します。

細かい編集などせずそのまま使う場合、「Minified version」（インデントや改行がつめられて見づらいが、ファイルが軽い）を選びましょう（僕はこれにしました）。

ダウンロードするファイルの圧縮レベルを選ぶ：「Minified version」

ダウンロードするファイルの圧縮レベルを選ぶ：「Minified version」

 

THEME（テーマ）を選ぶ

THEME（テーマ：見た目・スタイル）はデフォルトを含めて、8種類選べます。

8種類のTHEME（テーマ）が選べる

8種類のTHEME（テーマ）が選べる

 

ただ、テーマを選んだら、かなりスクロールダウンしないとプレビューが見れず、あまりユーザービリティ的に良くないサイトの作りとなっているため、下ではそれぞれのテーマとプレビューのスクショをのせておきます。

ちなみに、僕はデフォルトを選びました。




Themes：DefaultとDark

Themes：DefaultとDark

Themes：FunkyとOkaidia

Themes：FunkyとOkaidia





Themes：TwilightとCoy

Themes：TwilightとCoy

Themes：Solarized LightとTomorrow Night

Themes：Solarized LightとTomorrow Night


 

使用するコードLanguages（言語）を選ぶ

Themes（テーマ）が決まったら、これからブログに載せる予定のコードのLanguages（言語）を選びます（複数選択可）。

使用するコード言語を選ぶ

使用するコード言語を選ぶ

 

Plugin（プラグイン）を選ぶ

ダウンロード準備の最後のステップとして、Plugin（プラグイン）を選択します。

僕は下図の4つを選びました。

Line Highlight：ライン（行）のハイライト

Line Numbers：行番号の表示

Show Language：コードの上にホバーする際に該当する言語を表示（自動的に「Toolbar」が☑されます）

Plugin（プラグイン）を選ぶ

Plugin（プラグイン）を選ぶ

該当するPlugin（プラグイン）名をクリックすると、該当するPluginの解説ページに飛びます。

jsファイルとCSSファイルのダウンロード

ここでようやくjsファイル（「prism.js」）とCSSファイル（「prism.css」）を別々にダウンロードすることができます。

後からやはり違うテーマがいいと思ったら、CSSファイルだけをダウンロードして差し替えれば大丈夫です（実際僕はそうしました）。

プラグインを追加するのであれば、同じくjsファイルだけダウンロードして差し替えます。

 

 

prism.jsライブラリのWordPressへの導入

サーバーにprism.cssとprism.jsファイルをアップロード

上でダウンロードしたprism.cssとprism.jsファイルをテーマディレクトリ直下にアップロードします（僕はAFFINGER5の子テーマの直下にアップロードしました）。

サーバーにprism.cssとprism.jsファイルをアップロード

サーバーにprism.cssとprism.jsファイルをアップロード

 

HTMLファイルにprism.cssとprism.jsファイルを読み込コードを追加

公式サイトより、以下のように、HTMLファイルにprism.cssとprism.jsファイルを読み込コードを追加します（公式サイトより）。

<link href="themes/prism.css" rel="stylesheet" />

を<head></head>タグの中、

<scriptsrc="prism.js"></script>

を</body>のタグの直前に追加します。

HTMLファイルにprism.cssとprism.jsファイルを読み込コードを追加（公式サイトより）

HTMLファイルにprism.cssとprism.jsファイルを読み込コードを追加（公式サイトより）

 

ただし、僕の場合、このやり方ではうまくいかなかったので、function.phpに書き込む方法を試したところ、うまくいきました。

上の方法でだめだった場合、以下のコードをfunction.php（僕はaffinger-child内のfunction.php）内の任意の場所に追加してみてください。

function my_prism() {
    wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/prism.css' );
    wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/prism.js', array('jquery'), '1.9.0', true );
   }
add_action('wp_enqueue_scripts', 'my_prism');

 

HTML特殊文字変換ツールでコードを変換

いよいよ使う準備ができましたが、素直に表示してくれませんでした。

<>タグ使うと、正規のコードとして認識されてしまうからです。 しかも、僕の場合、<pre>タグと<code>タグで囲ったとしても、うまく表示されませんでした。

いろいろ試したところ、<>タグをそれぞれ「&lt;」と「&gt;」と表記すれば問題なく表示されますが、長いコードの場合は書き直す手間がかかりますので、下図の「HTML特殊文字変換ツール」で一括変換をしています。

「HTML特殊文字変換ツール」で一括変換

「HTML特殊文字変換ツール」で一括変換

HTML特殊文字変換ツール

 

実際にPrism.jsを使っていろんな言語のソースコードを表示

基本的な使い方

以上のすべてのステップが完了したら、下図のように <pre>タグの中に <code>タグを入れて、さらに<code>タグ＞「class属性」の中に「HTML」「CSS」、「JavaScript」などを「language-xxxx」という形で「言語」を指定します。

<pre><code class="language-markup">HTML</code></pre>

<pre><code class="language-css">CSS</code></pre>

<pre><code class="language-js">JavaScript</code></pre>

うまくいかない場合は上のステップのHTML特殊文字変換ツールを使ってみてください。

もちろん、HTMLだけでなく、CSSやJavaScriptなども変換してくれます。

ソースコードの行番号（Line Numbers）とコード言語（Show Language）を表示

冒頭で示した以下のコードで、行番号を表示させていますが、

<pre class="line-numbers"><code class="language-JavaScript">

というように「class="line-numbers"」 を入れてあります。

$(window).scroll(function () {
　if ($(window).scrollTop() > 100 && $("header").hasClass('small') == false) {
　　$("nav").css({
　　　display: 'none'
　　});
　　$("header").addClass("small");
　　$("nav").addClass("small");
　　setTimeout(function () {
　　$("nav").stop().slideToggle(200);
　　}, 400);

　} else if ($(window).scrollTop() < 100 && $("header").hasClass('small') == true) {
　　$("header").removeClass("small");
　　$("nav").removeClass("small");
　}
});

 

また、上のコードの上にマウスをホバーしたら、右上に「JavaScript」というように、コード言語が自動的に表示されます。

 

行のハイライトをする（Line highlight）

上のコードをさらに、「class="line-numbers"」の中に、さらに「data-line="4,6-7"」（指定の仕方はOfficeなどの印刷するページを指定するのと同様）を追加してみると、第4行と第6〜7行がハイライト表示されるようになります。

何か説明する際に便利ですね。

<pre class="line-numbers" data-line="4,6-7">

$(window).scroll(function () {
　if ($(window).scrollTop() > 100 && $("header").hasClass('small') == false) {
　　$("nav").css({
　　　display: 'none'
　　});
　　$("header").addClass("small");
　　$("nav").addClass("small");
　　setTimeout(function () {
　　$("nav").stop().slideToggle(200);
　　}, 400);

　} else if ($(window).scrollTop() < 100 && $("header").hasClass('small') == true) {
　　$("header").removeClass("small");
　　$("nav").removeClass("small");
　}
});

 

その他プラグインに関して、興味があれば試してみたください。

もちろん、見た目を変えたい場合、「Prism.css」ファイルの中身を編集すれば自分好みの表示になります。

 

おまけ：Google Code-Prettifyなどの導入失敗例

実は、Prism.jsライブラリの前に、Google Code-Prettifyやその他のプラグインも試しましたが、僕の環境ではコードのインデックスだけは効くものの、色付けはされなかった不具合があったので、最後にPrism.jsライブラリにたどり着きました。

似たような悩みをお持ちの方は是非Prism.jsを試してみてください。

 

まとめ

以上、WordPressの記事の中にソースコードのシンタックスハイライト（インデックスや色付け表示）をさせるための、Prism.jsライブラリの導入手順及び使用方法をご紹介しました。

興味のある方は是非試してみてください。

 

    • この記事を書いた人
    • 最新記事

    -WordPressでのブログ構築ノウハウ

    © 2024 崖っぷちからの這い上がり