[WordPress] prism.jsの行番号表示を強制する方法

WordPressのシンタックスハイライトにprism.jsを使っていて「行番号が表示されない」と嘆いている方、結構多いんじゃないでしょうか？

この原因としては

  1. マークダウンをそのまま投稿している
  2. htmlにクラスを設定していない

といったことが挙げられます。マークダウン派としては悲しい限りです。

しかしそれをなんとかしたい。ということで今回は、

  • 行番号を表示させる作業が面倒だ！
  • 細かく表示/非表示を指定できなくていいから、とにかくコードブロックに行番号を表示したい！
  • マークダウン！マークダウン！

という方に向けて、prism.jsに「どんな場合でも」行番号を出すように強制する設定を、コード1行の修正で実現したいと思います。

行番号が表示されない原因

まずはなぜ行番号が表示されないのか。その原因を知るところから始めましょう。

結論から言えば、prism.jsではhtmlタグの記述によって行番号を表示するかどうかを制御しているためです。

prism.jsで行番号を表示する方法 (通常の場合)

prism.jsが正しくダウンロード/インストールされている場合、htmlでこのように記述すると行番号を表示することができます。

<pre class="line-numbers"><code class='language-python' lang='python'>
    print("Hello")
</code></pre>

ポイントは<pre class="line-numbers">の部分。この記述によってprism.jsは「このコードブロックには行番号を表示する」という判断を下します。

マークダウンでは無理

しかしながら、マークダウン記法ではこの部分を編集することができません。マークダウンでコードブロックはこのように記述しますが、

​```python
print("Hello")
​```

これをhtmlに変換するとこうなります。

<pre><code class='language-python' lang='python'>
    print("Hello")
</code></pre>

<preの後には何も書かれていません。つまりマークダウン記法そのままでは、行番号を表示させるために必要な<pre>タグの編集ができないということになります。

手っ取り早く解決するには？

問題はこれをどう解決するかです。

  1. コードブロックはhtmlで記述する
  2. 他のシンタックスハイライターを使う
  3. prism.jsのJavaScriptを編集する
  4. 諦めて行番号は表示しない

など、色々と解決策はあると思いますが、今回は3。prism.jsのJavaScriptファイルを編集することで、<pre>のクラス指定があろうが無かろうが行番号を表示させるという少々荒っぽい戦略です。

難しそうに聞こえるかもしれませんが、JavaScriptなんて知らなくても十分可能です。なんせ1行書き換えるだけなので。

それではやっていきましょう！

prism.jsのダウンロード

まずはprism.jsのサイトからダウンロードしていきます。

Prism
prismjs.com

右上のボタンをクリックしてダウンロードページへ。

Development versionを選択

次にコードを圧縮するかどうかを選択します。

編集しない場合は下の方が、空白や改行が無いためサイズが小さくなります。しかし今回は編集することを前提にダウンロードするので上を選択。

テーマを選択

カラーテーマの選択。ここはお好みでどうぞ。

対応言語を選択

次にハイライトする言語を選択。メチャクチャ沢山ありますが、多少手間でもここはきちんと選択しておくことをおすすめします。

ちなみに僕は最初面倒で全部選択していましたが、そのときのJavaScriptのサイズが500KBほど。動作も体感で感じられるほど重くなったので、今では真面目に選択しています。(現在のサイズは100KB程度)

プラグインを選択

prism.jsはプラグインを追加することで行番号を含め、様々な機能を追加することができます。

ここでは最低限「Line Numbers」のチェックはONにしておいてください。チェックが外れていると何をしても行番号は表示されません。

他はお好みでどうぞ。僕はあまりプラグインの機能を使わないのでこの程度にしてます。

  1. Line Numbers (行番号を表示する)
  2. Show Language (コードブロック右上に言語名が表示される)
  3. Inline color (コードブロックでカラー指定する際、そのカラーが表示される)
  4. Toolbar (コードブロックにラベルを表示する。2番や5番の前提)
  5. Copy to Clipboard Button (コードをクリップボードにコピーするボタンを表示する)

ダウンロード

全てOKならダウンロードします。JavaScriptファイルとCSSファイル、2つともダウンロードしてください。


2つのファイルがダウンロードされます。念の為どこかにコピーしてバックアップしておきましょう。

JavaScriptファイルの編集

ダウンロードしたファイルのうちprism.jsを編集します。テキストエディタで開きましょう。Visual Studio CodeやAtomなどがオススメですが、この程度の編集ならメモ帳でも大丈夫なはず。(UTF-8で保存してください)

開いたらCtrl+F(MacならCommand+F)で、ファイル全体を検索します。検索ボックスにはこの文字列を入れてください。

var addLineNumbers = false;

上をコピペして検索。1件見つかるはずです。

このfalseをtrueに変更します。

変更するのはここだけ。ファイルを保存して閉じます。

アップロードと適用 (WordPressの場合)

ここからはWordPressを利用している場合の話なので、他のサービスを利用されている方は参考にならないと思います。ご了承ください。

編集後の.jsファイルと.cssファイルを、FileZillaなどを使ってサーバにアップロードします。ディレクトリはどこでも構いません。僕はwp-content/themes/子テーマのフォルダに入れています。

ファイルをアップロードしたら、テーマのfunctions.phpに追記します。WordPressのメニュー「外観」から「テーマエディター」を開きましょう。

開いたページの右側、「テーマのための関数」をクリック。

開いた画面の青枠部分に追記していきます。

下のコードをコピペでOKです。アップロードしたファイルのディレクトリによって、4行目と5行目の/prism.cssと/prism.jsの部分は書き換えてください。

/* prism.js/cssの読込み */
function load_extra_files() {
  // Prism.jsのcssとjsの呼び出し
  wp_enqueue_style('prism-style', get_stylesheet_directory_uri() . '/prism.css');
  wp_enqueue_script('prism-script', get_stylesheet_directory_uri() . '/prism.js', array(), false, false);
}
add_action('wp_enqueue_scripts', 'load_extra_files');

画面左下の「ファイルを更新」をクリックして更新します。

サイトを表示して確認してみましょう。これでhtmlの記述に関わらず、常にコードブロックには行番号が表示されるようになるはずです。

タイトルとURLをコピーしました