WordPress

【WordPress】Prism.jsでのシンタックスハイライトの手順

WordPressの記事でソースコードを表示させたい場合、ソースコードボックスを使えばOKです。

しかしデフォルトではシンタックスハイライト表示されていないので、読みにくいですよね。

そこで今回は、Prism.jsを使ってシンタックスハイライトする方法をまとめました。

Prism.jsについて

Prism.jsはシンタックスハイライトを行うためのJavaScriptファイルです(CSSも付随しmす)。

WordPressのプラグインにもSyntax Highlighterはありますが、Prism.jsはより軽量で非プラグインである点が魅力的です。

JavaScriptファイルのダウンロード

公式サイトに行き、必要なファイルをダウンロードしましょう。

カラーテーマの選択

Prism.jsには複数のカラーテーマが用意されています。

ページの右側にある円をクリックすると、カラーテーマが切り替わります。自分の好きなものを選択しましょう。

好きな色を選択したら「Download」ボタンを押しましょう。

開発バージョンまたは軽量バージョンを選択

Downloadボタンを押すと画面が切り替わります。

自分でJavaScriptファイルを変更したいなら「Development version」を選びましょう。

私はダウンロードしたものをそのまま使うのでMinified versionにしました。

カラーテーマの選択

先ほど確認しておいたカラーテーマを選びましょう。

プログラミング言語の選択

自分がWordPressの記事で扱うプログラミング言語を選択してください。

.jsファイルを軽量にしたければ、あんまりたくさん選ばないようにしましょう。

プラグインの選択

行数を表示させたりするにはプラグイン(CSS)が必要になります。自分が使いたいものを選択してください。

プラグイン名機能
Line Highlight指定した行を目立たせる。
Line Numbers行番号を入れる。
Show Invisiblesタブや改行などの不可視文字を表示させる。
Autolinkerコード内のURLやメールアドレスをクリック可能なリンクにする。
WebPlatform DocsコードをWebPlattform Docsにリンクさせる。
Custom ClassPrismのクラスを編集して、Prismをカスタムする。
File Highlight外部ファイルを取得し、その内容をハイライトさせる。
Show Languageコードボックスの右上にそのプログラミング言語が表示される。
JSONP HighlightJSONPを使ってコンテンツを取得し、その内容をハイライトさせる。
Highlight Keywordsコード中の特定のキーワードに独自のCSSを設定できる。
Remove initial line feedコードブロック内のはじめに改行があれば削除する。
Inlin colorコード中にカラーコードがあれば、その色を表示させる。
Previewersコードの結果がホバーでプレビューできる。
Autoloader指定したプログラミング言語が自分のprism.jsにないとき、自動的にロードする。
Keep Markupコード中のマークアップ(HTML)が保持される。
Command Lineコマンドラインをプロンプトとともに表示し、オプションでコマンドからの出力を表示する。
Unescaped Markupマークアップ(HTML)をエスケープせずに、コードとして表示させる。
Normalize Whitespaceコードブロック内の不要な空白を削除する。
Data-URI HighlightデータURIを強調表示する。
Toolbarコードブロック上部にボタンを設置する。
Copy to Clipboard Buttonクリップボードにコピーするボタンを追加する。
Download Buttonコードファイルをダウンロードするボタンを追加する。
Match braces一致する括弧を色分けする。
Diff Highlightdiffブロック(GitHub)内のコードを強調表示する。
Filter highlight独自の条件を設定し、独自の表示をさせる。
Treeviewファイルシステムのツリー構造を見やすく表示させる。
プラグイン一覧

構成が決まったらファイルをダウンロードする

必要な選択が終わったら「DOWNLOAD JS」、「DOWNLOAD CSS」をクリックしましょう。

Prism.jsをサイトに適用する

サーバーにデータをアップロードする

ダウンロードした.jsファイルと.cssファイルを自分のWordPressをインストールしたサーバーにアップロードします。

アップロードの方法はFTPでも良いですが、私はXserverを使っているのでXserverのファイル管理機能を使いたいと思います。

Xserverでの設定

まずはXserverにログインしましょう。

その他のレンタルサーバーを使っている方も操作方法は似ていると思います。

サーバーのファイル管理ができる画面に行きましょう。PHPAdminではありませんよ(こちらはWordPressのデータベースを管理するものです)。

Xserverにログインして「ファイル管理」

操作メニューのファイル管理ボタンをクリックしましょう。

こんな画面が開きます。

サイトのフォルダへ移動

私の場合はhistoroid.comのフォルダへ移動します。

ちなみに..のボタンは「上位のフォルダに戻る」の意味です。

次にpublic htmlwp-contentthemesaffinger5-childと移動します。

なおこのフォルダの構成はレンタルサーバー会社によって異なります。さらに私はAFFINGER5というテーマを使っているので、最後がaffinger5-childになっているだけです。

フォルダ名やその階層構造については、ここでは気にしなくて良いです。

ただし使用中のテーマフォルダの中には入れてください。WordPressの設定上、使用中のテーマフォルダがルートフォルダとして認識されるためです。

Prismデータ用のフォルダを作成

次に.jsと.cssファイルを入れるためのフォルダを用意します。

私はprismというフォルダを作成しました。

フォルダ名は何でも良いです

フォルダを作るとこのように表示されます。

ではprismフォルダへ移動してください。

Prismファイルのアップロード

ではここで.jsファイルと.cssファイルをアップロードしましょう。

アップロードが終了したら、ここまでのパスをコピーしておきましょう。

このパスは後で使います

「prismデータはどこにアップロードしてもいい」と書きましたが、このパスさえしっかりと分かっていればOKです。私は現在使用中のテーマの中にprismフォルダを作りましたが、それは単に覚えやすいためです。

これでサーバーサイドの設定は終わりです。

WordPress側での設定

アップロードした.jsファイルと.cssファイルを読み込むようにWordPress側で設定します。

function.phpを編集しますので、注意してください。

.phpファイルの編集画面へ移動する

WordPressの編集画面にある「外観」→「テーマエディタ」と進みます。

すると注意されますので「理解しました」をクリックしてください。

注意

function.phpによくわからない書き込みをすると、WordPressが表示されなくなりますが、サーバー側から修正できるのでとくに心配はいりません。

手元にオリジナルのfunction.phpを持っていなかったり、ダウンロードしてオリジナル版を得ることができないようであれば、しっかりとバックアップを取ってください。

この説明の意味がわからない場合もやめた方が良いと思います。

function.phpファイルの編集

function.phpを選択してください。

初期設定では、上のコードが書いてあるのみです。

下記のコードを追加してください。なおパスは自分がprismファイルを置いた場所に書き直してください。

function my_enqueue_scripts() {
  $theme_uri = get_template_directory_uri();
  wp_enqueue_script( 'prism-js', $theme_uri . '/prism/prism.js', array(), false, true );
  wp_enqueue_style( 'prism-css', $theme_uri . '/prism/prism.css');
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

これで準備が整いました。

Prism.jsを使ってみる

いつもどおり記事編集画面へ進んでください。

ブロックメニューの「カスタムHTML」をクリック。

例えば以下のように入力します。

<pre><code class='language-php'>xxxx</code></pre>のように囲めばOKです。

なおlanguage-phpのところは、lanugage-pythonのように言語によって変えてください。

<pre><code class="language-php">
<?php
  $arr = [ "A", "B", "C" ];
  foreach( $arr as $key=>$value ) {
	echo $key . ":" . $value . PHP_EOL;
  }
</code></pre>

上のように入力すると、結果は以下のようになります。

<?php
  $arr = [ "A", "B", "C" ];
  foreach( $arr as $key=>$value ) {
	echo $key . ":" . $value . PHP_EOL;
  }

以上です。これでソースコードを見やすく表示させることができるようになりました。

-WordPress
-, ,

© 2021 historoidのノート