【ワードプレス】プリズムを手動で導入して、ソースコードをハイライト表示させる

ワードプレス
この記事は約8分で読めます。

これまで WordPress(ワードプレス)の投稿の中で表示する、ソースコードのシンタックスハイライト表示は、highlight.js(ハイライト ジェイエス)を使ってきました。

なぜなら WordPress に導入しているテーマ「Cocoon(コクーン)」に、組み込まれていたからです。
ただ highlight.js は、自動言語検出機能があって動作が軽いのですが、機能性が乏しい。

虹

ということで、同じくハイライト表示する Prism.js(プリズム ジェイエス)に変えてみました。
ちなみに Prism.js は、プラグインを使って導入せずに、手動で導入しています。

Prism.js を手動で導入するには、FTPクライアントソフト(FFFTP など)が必要です。
Prism.js は、自動言語検出機能がないので、言語名をクラスで指定する必要があります。

Gutenberg(ブロックエディター)の場合は、クラシックブロックに指定します。

スポンサーリンク

自分だけのPrism.jsのダウンロード

Prism.js は、必要な言語、必要な機能だけを選んで構成できるので、動作が軽くて済みます。
まずは Prismのホームページを表示します。

ダウンロードページへ移動

Prism.jsのホームページ

作業手順:

  1. 右上の「DOWNLOAD」ボタンをクリックして、ダウンロードページへ移動。

Prism.jsのカスタマイズ

Prism.jsのダウンロードページ

必要な項目にチェックを入れて、自分だけの Prism.js を作ります。

圧縮レベル

Prism.jsの圧縮レベル

作業手順:

  1. 圧縮レベルが「Minified version」になっていることを確認。

コアとテーマ

Prism.jsのコアとテーマ

作業手順:

  1. テーマの中から好みのデザインのラジオボタンをクリック(テーマによって多少サイズが異なる)。
Core は Prism.js の動作に必須なので、チェックははずせません。

言語

Prism.jsの言語

作業手順:

  1. 表示したい言語のチェックボックスをクリックして、チェックを付ける。
言語の間に依存関係があるので、勝手にチェックされることがあります。

プラグイン

Prism.jsのプラグイン

作業手順:

  1. 使いたいプラグインのチェックボックスをクリックして、チェックを付ける。
  2. ファイルサイズが大きくなりすぎていないか確認。
プラグインの間に依存関係があるので、勝手にチェックされることがあります。

次のプラグインを追加しました。

  • Line Highlight  ……………… 指定した行をハイライトさせる(説明するときに便利)。
  • Line Number ………………… preタグにクラスを追加したときに、行番号が表示される。
  • Show Language  …………… 言語名を表示する。
  • Copy to Clipboard Button … 「クリップボードにコピー」ボタンを付ける。

ダウンロード

Prism.jsのダウンロードボタン

作業手順:

  1. 「DOWNLOAD JS」ボタンをクリックして、prism.js をダウンロード。
  2. 「DOWNLOAD CSS」ボタンをクリックして、prism.css をダウンロード。
prism.js も prism.css も選んだ「言語」や「プラグイン」に合わせて生成されます。
「言語」や「プラグイン」の組み合わせを変えたときは、どちらも入れ替える必要があります。
スポンサーリンク

使用中のテーマにアップロード

(WordPressフォルダ)/wp-content/themes/(使用中のテーマ)/prism/

作業手順:

  1. FTPクライアントソフトを起動して、WordPress を導入したサーバーに接続。
  2. 使用しているテーマのフォルダの中に、「prism」フォルダを作成。
  3. 作成した「prism」フォルダの中に、prism.jsprism.css をアップロード。
子テーマを使用している場合は、子テーマのフォルダが対象になります。
prism.js と prism.css を配置するのは、使用しているテーマのフォルダのどこでも構いません。
ただし、テーマのための関数(function.php)のパスを合わせる必要があります。

テーマのための関数にコードを追加

WordPressのテーマの編集 function.php

作業手順:

  1. WordPress のサイドメニュー > 外観 > テーマエディター で、テーマのための関数(function.php)を開く。
  2. 次の記述を追加してファイルを更新

WordPress4.7以降 かつ PHP5.4以降の場合:

// Prism.js
function load_prism() {
  wp_enqueue_style( 'prism-style', get_theme_file_uri( '/prism/prism.css' ) );
  wp_enqueue_script( 'prism-script', get_theme_file_uri( '/prism/prism.js' ), [], false, true );
}
add_action( 'wp_enqueue_scripts', 'load_prism' );

WordPress または PHP のバージョンが古い場合:

// Prism.js 古いバージョンでの書き方
function load_prism() {
  wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/prism/prism.css' );
  wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/prism/prism.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'load_prism' );

テーマ「Cocoon」の注意点

WordPress のテーマ「Cocoon」の場合、あらかじめテーマの中に Highlight.js が組み込まれています。

Cocoon設定のソースコード設定

もし「ソースコードをハイライト表示」にチェックがついている場合は、チェックをはずす必要があります。

Prism.jsの利用方法

Prism.js の主だった使い方を説明します。
なお詳しくは、Prism.js のホームページをご覧ください。

言語名の指定

<pre><code class="language-(言語名)">(言語の記述)</code></pre>

Prism.js は、自動言語検出機能がないので、言語名をクラスで指定する必要があります。
たとえば HTML や CSS の場合は、次のようになります。

<pre><code class="language-html">(HTMLの記述)</code></pre>
<pre><code class="language-css">(CSSの記述)</code></pre>

なお HTML をそのままコード表示すると、実際の HTMLコードと区別がつかないので、表示が崩れます。

HTMLエスケープツールなどを使って、あらかじめ「&」「”」「’」「<」「>」をエスケープ文字(参照文字)に変換する必要があります。

指定行ハイライト(要 Line Highlight)

preタグの中で data-line に行を指定することで、その行がハイライト表示されます。

<pre data-line="3,8-12"><code class="language-(言語名)">(言語の記述)</code></pre>

上の例では、3行目と8行目から12行目までが、ハイライト表示されます。

/* サンプルCSS */
.example1 {
  margin-bottom: 1em;
  padding: 1em 2em;
  border: solid 1px #ccc;
}

.example2 {
  background-color: #fff;
  color: #333;
  line-height: 1.2;
}

行番号表示(要 Line Numbers)

preタグの中に line-numbersクラスを追加することで、左端に行番号が表示されます。

<pre class="line-numbers"><code class="language-(言語名)">(言語の記述)</code></pre>
/* サンプルCSS */
.example1 {
  margin-bottom: 1em;
  padding: 1em 2em;
  border: solid 1px #ccc;
}

.example2 {
  background-color: #fff;
  color: #333;
  line-height: 1.2;
}

あとがき

今までたまにブログの中で、ソースコードを表示することがありました。
ただ、長くなった CSS などはコピーするのが面倒そうなので、解決方法はないかと考えていました。

文字の書かれたクリップボード

Prism.js には「Copy to Clipboard Button」という機能があります。
ボタンを押すだけで、ソースコードをクリップボードにコピーできます。

問題が解決しただけでなく、ハイライト表示も何だかきれいになりました。
Prism.js を導入して本当に良かったです。

コメント

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