コードハイライトをhighlight.jsからPrism.jsに乗り換える手順

今までコードのハイライトライブラリはhighlight.jsを使っていましたが、使っていくうちに細かいところが気になるようになり、Prism.jsに乗り換えたいなぁと思うようになりました。

ただ普通に乗り換えるとなると<code>タグに入れるクラスなど、過去記事を全部Prism.js向けに直さないといけなくなり非常に面倒です。でもやっぱりPrism.jsに乗り換えたいし、なんとかならないかなぁ…。

ということで、今回はhighlight.jsからPrism.jsに乗り換える方法を解説していきます。過去記事を全部Prism.js向けに修正するのはさすがに面倒なのでjsでうまいことやります。解説記事が皆無だったので自己流ですが悪しからず。

Prism.jsの使い方がわからない人は以下の記事で解説しているので参考にしつつ進めてください。

＞＞Prism.jsの使い方！シンタックスハイライトにおすすめ

highlight.jsとPrism.jsの違いを把握しておく

highlight.jsとPrism.jsではハイライトの仕方が違うので、まずはここを把握しておきましょう。

なお、共通点としてはどちらも<pre><code> ~ </code></pre>の中で動作します。<pre>だけや<code>だけでは発動しません。

つまり、超簡単に言えばhighlight.jsを使っているときに指定していた「言語名」のクラスを「language-言語名」というクラスに置換してやればいいわけです。

それと、僕はhighlight.jsの使い方がよくわからないまま使ってた時期があったので、過去記事によって<code>に言語名の指定があったりなかったりとまちまちです。この辺の違いも吸収してやる必要がありますね。

やることを整理する

乗り換えるにあたってPrism.jsの便利なプラグインも一緒に入れちゃいます。今回は「Line Numbers」と「Line Highlight」の2つを入れます。

他にもいろいろプラグインがあります。この辺は実際見た方が早いと思うので公式サイト見てください。

＞＞https://prismjs.com/#plugins

highlight.jsからPrism.jsへ乗り換えるためにやることをまとめるとこんな感じ。

Line Numbersは毎回指定するのが面倒なのでjsで自動で入れちゃいます。行数を表示したくない時だけ<pre class="no-line-numbers">を自分で指定して行数を非表示にします（Line Numbersは「no-line-numbers」クラスを入れると行数を非表示にできます）

なんだかごちゃごちゃしてますが、要するにパターンとしては

という感じにしたいわけです。

で、乗り換える手順はこんな感じで行きます。

説明ばかりだと飽きちゃうので、早速highlight.jsからPrism.jsへ乗り換えていきましょう。

補足：本番環境をいじるのが怖いなら開発環境を用意しよう

「本番環境をいじって変なことになったら怖い…」という人はローカルに開発環境を作ってそこで試しながらやるのがおすすめです。まあほとんどPHPも触らないので余程のことがない限り大丈夫だとは思いますが…。

WordPressの開発環境はLocalというフリーソフトとAll-in-One WP Migrationというプラグインで超簡単に作れます。

以下の記事で解説しているので不安な人はやってみてください。

＞＞【超簡単】本番のWordPressをローカル環境に移行する最も簡単な方法

highlight.jsからPrism.jsへ乗り換える

1.Prism.jsをダウンロード＋読み込み

公式サイトからPrism.jsをダウンロードしましょう。

必要な言語とプラグインにチェックを入れてダウンロードします。

＞＞https://prismjs.com/download.html

Prism.jsはCDNよりダウンロードして読み込んだ方がいいです。

CDNだと言語ごとに1つずつスクリプトを読み込まないといけないので大変なことになります。ダウンロード版は自分がハイライトしたい言語を選択して1つのファイルにまとめられるので軽いですね。

それと、面倒だからといって言語を全部選択してダウンロードするのはやめましょう。せっかくの軽量ライブラリなのに意味ないです。

ダウンロードしたらFTPソフトなどを使ってサーバーにcssとjsをアップします。

子テーマを使っている人は子テーマ内にアップすればokです。僕はcssとjsディレクトリを作ってそこに入れました。

そうしたらheader.phpで読み込みましょう。これも子テーマ内で読み込めばok。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/prism.css">
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/prism.js"></script>

これでPrism.jsの読み込みはokです。まだ何も起きてないですが、<pre><code class="language-言語名">と指定すればPrism.jsのハイライトが有効になると思います。

2.highlight.jsからPrism.jsへ乗り換えるスクリプトを書く

さっきまとめた「highlight.jsからPrism.jsへ乗り換えるためにやること」を実現するスクリプトを書きます。

これはもうコードを見てもらうのが早いですね。以下のコードをPrism.jsのcssとjsを読み込んだ下に<script>とかで囲って入れます。jQueryが競合してしまう場合は$をjQueryに置き換えてください。

$(function() {
  $('pre').each(function() {
    var $pre = $(this);
    var $code = $pre.find('code');
    var codeClassName = $code.attr('class');

    // codeがクラスなしなら.language-undefined
    if(!$code.attr('class')) {
      $code.addClass('line-numbers language-undefined');
    } else if(codeClassName.indexOf('language-') == 0) {
      // 間違えて自分でlanguage-と指定してしまったらlanguage-はつけない
      //preにno-line-numbers指定で行数を非表示
      if($pre.hasClass('no-line-numbers')) {
        return; 
      } else {
        //通常は自動でline-numbersを追加
        $pre.addClass('line-numbers');
      }
    } else {
      // codeに言語名ありパターン。codeにlanguage-とpreにline-numbersをつける
      // preにno-line-numbers指定で行数を非表示
      if($pre.hasClass('no-line-numbers')) {
        $code.removeClass(codeClassName).addClass('language-' + codeClassName);
      } else {
        //通常は自動でline-numbersを追加
        $code.removeClass(codeClassName).addClass('language-' + codeClassName);
        $pre.addClass('line-numbers');
      }
    }
  });
});

ざっくりとコメントにも書きましたが、順番に解説します。

$('pre').each(function() {
  var $pre = $(this);
  var $code = $pre.find('code');
  var codeClassName = $code.attr('class');

ページ内の<pre>全部に処理をかけます。変数は見たままですね。

$pre = $(this);は各々の<pre>という意味です。

// codeがクラスなしなら.language-undefined
if(!$code.attr('class')) {
  $code.addClass('line-numbers language-undefined');

<code>に言語名がないパターンですね。過去記事対策です。

この場合はとりあえず黒い画面に白い文字で表示させたいので「language-undefined」クラスを入れます。あと行数を表示したいので「line-numbers」クラスも入れます。

言語のハイライトはできないですが、これだけでもそれっぽく見えるのでよし。

} else if(codeClassName.indexOf('language-') == 0) {
  // 間違えて自分でlanguage-と指定してしまったらlanguage-はつけない
  //preにno-line-numbers指定で行数を非表示
  if($pre.hasClass('no-line-numbers')) {
    return; 
  } else {
    //通常は自動でline-numbersを追加
    $pre.addClass('line-numbers');
  }

うっかり「language-」の部分を自分で指定しちゃったパターンです。判定方法はindexOf()を使って「language-」から始まるクラス名があるかどうかで判定します。

さらに分岐で、<pre class="no-line-numbers">が指定されていたらそのまま抜けます（＝行数は表示しない）。それ以外なら<pre class="line-numbers">として自動で行数を表示します。

} else {
  // codeに言語名ありパターン。codeにlanguage-とpreにline-numbersをつける
  // preにno-line-numbers指定で行数を非表示
  if($pre.hasClass('no-line-numbers')) {
    $code.removeClass(codeClassName).addClass('language-' + codeClassName);
  } else {
    //通常は自動でline-numbersを追加
    $code.removeClass(codeClassName).addClass('language-' + codeClassName);
    $pre.addClass('line-numbers');
  }
}

最後に<code class="言語名">のパターンです。

これも<pre class="no-line-numbers">が指定されていたら<code>のクラスを置換するだけにします（＝行数は表示しない）。指定されていないなら<pre class="line-numbers">として自動で行数を表示します。

<code>のクラスを置換する方法としては、元々入っていたクラスを変数に保存した後、一度クラスを削除して「language-言語名」というクラスを再度追加するという感じです。

スクリプトはこんな感じです。これで保存するとPrism.jsが動作してコードがハイライトされるはずです。

本来Prism.jsは<code class="language-言語名">という指定がないとハイライトできませんが、上記のスクリプトはlanguage-の部分を自動で入れてくれるので、自分が記事を書く場合は<code class="言語名">と書けば大丈夫です。

記述が短い分ちょっとラクですね。もちろん<code class="language-言語名">と自分で指定してもok。

3.highlight.jsを削除する

上記のコードをコピペしてPrism.jsのハイライトが動作していれば乗り換えができているのでhighlight.jsは削除して構いません。

highlight.js関連でオリジナルのスタイルを書いている場合はPrism.js向けに書き直しておきましょう。もしくはいらないならこれも削除してしまうとか。

まとめ

コードをハイライトするプラグインとかライブラリってたくさんあるんですが、途中で乗り換えるとなると全記事を修正しないといけなくなるのが本当に面倒なんですよね。

今回自分がhighlight.jsからPrism.jsの乗り換えるにあたって「全記事修正はさすがにめんどくさい…できるならjsでゴリ押ししたい」と思っていたのでやってみました。

個人的にはハイライトライブラリはhighlight.jsよりもPrism.jsかなと思っているので、同じように乗り換えたいと思っている人がいたら参考にしてみてください。

ZennでCSS設計の
本を書きました！

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です！

読んでみる