WordPressでコードを載せるとき、シンタックスハイライターがあると便利ですね。
この記事ではシンタックスハイライトさせたい時に便利なPrism.jsを、WordPressで使用する手順を解説します。
クラシックエディターとブロックエディター両方の使い方も説明します。
目次
Prism.jsの表示例
Prism.jsを使うと、コードを以下のようなデザインで表示させることができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>コードの構造が分かりやすく、見やすくなります。
表示例のデザインは「OKAIDIA」というテーマですが、他にもいくつか種類があります。
- DEFAULT
- DARK
- FUNKY
- OKAIDIA
- TWILIGHT
- COY
- SOLARIZED LIGHT
- TOMORROW NIGHT
おすすめは「OKAIDIA」と「TOMORROW NIGHT」、「COY」です。他のテーマはちょっと見づらいです。
Prism.jsの使い方
お次はPrism.jsの使い方を紹介します。
FTPの使い方が分かれば、難なく利用できるでしょう。
Prism.jsをダウンロード
まずは以下のリンクからPrism.jsをダウンロードします。
ダウンロード
リンク先に進んだら、「DOWNLOAD」をクリックしてください。
「DOWNLOAD」をクリックするとデザインテーマとハイライトできる言語の一覧が出てくるので、選択してください。
選択したら、ページ下にある「DOWNLOAD JS」と「DOWNLOAD CSS」の両方をクリックしてダウンロードしてください。
WordPressの子テーマでファイルを読み込む
両方ダウンロードしたら、WordPressの子テーマで２つのファイルを読み込むように設定します。
子テーマは上のようなファイル配置になることを想定します。
<?php
function child_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', $child_dir . '/style.css', array( 'parent-style' ) );
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );おそらく、子テーマに上記にような記述があると思うので、以下のように2行追加します。
<?php
function child_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );
// 以下の2行を追加
wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/prism.css', array( 'child-style' ) );
wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/prism.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' );あとはFTPでprism.js、prism.css、functions.phpを子テーマにアップロードすれば完了です。
WordPressで使ってみる
では、準備ができたところで実際にWordPressで利用する方法を説明していきます。
ブロックエディタ ーとクラシックエディター（テキストエディター）の2パターンを説明します。
ブロックエディターでPrism.jsを使う
まずはブロックエディターで使う方法です。
コードブロックにコードを入力して、右サイドバーの設定でcssを追加します。
クラス名はlanguage-〇〇の形になります。HTMLのコードをハイライトさせたい場合は、language-htmlという風になります。
クラス名の書き方は以下のリンクを参考にしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>これで先ほどの例のようにハイライトさせることができます。
クラシックエディター（テキストエディター）でPrism.jsを使う
クラシックエディター（テキストエディター）でハイライトさせるには、以下のようにHTMLを記述します。
<pre class="language-html"><code>
// ここにコードを書く
</code></pre>クラス名はlanguage-〇〇の形になります。HTMLのコードをハイライトさせたい場合は、language-htmlという風になります。
クラス名の書き方は以下のリンクを参考にしてください。
毎回HTMLを書くのは面倒なので、プラグインなどを使ってクイックタブに追加しておくと便利でしょう。
Prism.jsを使うなら、簡単にクラス名が追加できるブロックエディタの方が楽ですね。
私がPrism.jsを使う理由
シンタックスハイライターにはプラグインもありますが、私はあえてPrism.jsを使っています。
理由としては必要最小限のファイルしか読み込まないので、軽量だからです。
また、余計な機能がなくシンプルなのも気に入っています。
まとめ
今回は良い感じにシンタックスハイライトができるPrism.jsを紹介しました。
ブログにソースコードを載せたいという人は、ぜひ参考にしてください。
