広告

Prism.jsの設定方法と使い方・スグに使える裏ワザも

2022年3月20日

WordPressにPrism.jsを使ってソースコードを表示するまでの設定方法・使い方を解説します。

AFFINGERデフォの場合

 <p>AFFINGER(ACTION)で表示</p>

Prism.jsで表示した場合

 <p>Prism.jsで表示</p>
OYAKUN
OYAKUN
Prism.jsはファイルも軽量で読み込みが早く、レイアウトもきれいなので重宝してます

Prism.jsへアクセス

まずはPrism.jsへアクセスします。

prism.js-image
Prism.jsのTOPイメージ

Prism.js：https://prismjs.com/download.html

なんとも見た目が怪しいページだけど、このページ大丈夫なの？

Prism.jsの公式サイトだから。大丈夫だから。

Prism.jsのバージョンとテーマを選択

Prism.jsのバージョンを以下から選択。

  • Development version（開発版）
  • Minified version（軽量版）

OYAKUN
OYAKUN
自分は軽量版を使ってます。
次にソースを表示するテーマを選択。

テーマ名ファイル容量表示例
Default1.75KBprism.js-defalt
Dark1.5KB
Funky1.94KB
Okaidia ocodia1.35KB
Twilight remybach2.38KB
Coy tshedor2.99KB
Solarized Light hectormatos 20111.55KB
Tomorrow Night Rosey1.28KB
各テーマのスタイル
OYAKUN
OYAKUN
テーマの選定は表示の好みで良いかと。自分は比較的ファイルが軽いDarkを選びました。

使う言語を選択

プログラム言語を選択します。

対象言語はなんと278種類。メインで使う言語のみを選択して使います。（＋をクリックして一覧を確認できます）

OYAKUN
OYAKUN
そんなに使わないかも...と思っている言語も一応入れておくと良いかもです。ただ、すべて選択すると処理が重くなるのでおすすめしません。

拡張プラグインを選択

ソースを表示するときに必要なプラグインを選択します。

例えばソースのハイライトとか、行数を表示したりする拡張機能をプラグインを選択して追加します。一覧は以下の通り↓

ちなみに自分は以下4つのプラグインを使ってます。

  • Line Highlight
  • Line Numbers
  • Toolbar
  • Copy to Clipboard Button
OYAKUN
OYAKUN
プラグインも沢山ありますが、必要なものを厳選して使うと良いです。

Prism.jsCSS・Javascriptファイルをダンロード

テーマとソースを選択したら、Prism.jsの

  • Javascriptファイル
  • CSSファイル

上記2つともダウンロードします。

ダウンロード方法は、Prism.jsサイトのページ下にある以下ボタンをそれぞれクリックすればOK↓

Prism.js各ファイルダウンロードボタン

ダウンロードした各ファイルは、デスクトップに置いておくと良いわ

WordPressの子テーマにアップロード

Prism.jsを使うためにWordPressの子テーマ（なければ親テーマ）に、

  • Javascriptファイル
  • CSSファイル

上記ファイルをアップロードします。

アップロードは、FTPサーバーを使うと楽勝です。

むしろFTPサーバー以外使わないでほしいわ

OYAKUN
OYAKUN
補足しておくとドメインの契約サーバーの、コントロールパネル側からアップロード可能です。

子テーマのアップロード場所

自分はAFFINGERの子テーマ（affinger-jet-child）に

  • prism.js

といったフォルダーを作成し、

wp-content > themes > affinger-jet-child > prism.js

子テーマ内のPrism.jsフォルダー

その中にJavascript・CSSファイルをアップロードしました。

prism.js-folder-file
フォルダー内のファイル

子テーマのfunction.phpの一番下に以下コードを貼り付け

各ファイルをアップロードしたら、子テーマ側のfunction.phpの一番下に以下コードを貼り付けます。

function my_prism() {
wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/prism.js/prism.css',array() ,'' ,'all' );
wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/prism.js/prism.js',array() ,'' ,true);
}
add_action('wp_enqueue_scripts', 'my_prism');

ファイルをアップロードした場所によって、prism.cssとprism.jsのパスが変わるので注意が必要です。

貼り付けが完了したら保存します。

file-upload-function.php
ファイルアプロードして保存

ファイルをアップロードしたのに、なんでfunction.phpに追記すんの？

Prism.jsとWordPressを紐付けて、呼び出す呪文を書かないとPrism.jsが動かないからよ。

Prism.js設定後の使い方と注意点2つ

Prism.jsはエディターで呼び出せない

まずPrism.jsを設定した際の注意点1つめ。

function.phpに上記コードを貼付けても、ブロックエディター側で自動で呼び出しできるようになるわけではありません。

Prism.jsを使ったソースコードの表示は以下のように

  • ブロックをカスタムHTMLで開く
  • 掲載するソースコードをエスケープ処理する
  • エスケープ処理したソースを <pre><code> タグで囲む

といった記述を行ってソースコードの表示をします。

原則エスケープ処理したソースを貼付ける

Prism.jsは <pre><code><p>ソース</p></code></pre> といった記述で表示させることが可能ですが、例えば以下のようなソースを

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>

そのままPrism.jsの表示にすると、以下のように崩れて表示されます↓





Document

Prism.js使えね～

今、全国のPrism.js利用者がううこの敵になったよ

どうすれば正しく表示されるのかというと、貼り付けるソースにエスケープ処理を施します。

エスケープ処理とは、文字や記号を別の文字列に置き換えること。

Web上で意図しない動きをさせないためにも、ソースをそのままPrism.jsへ貼り付ける前に、必ずエスケープ処理を行わなければなりません。

エスケープ処理できるオススメツール

エスケープ処理できるオススメツールは以下のとおり↓

上記ブラウザツールをお気に入りに入れておけば、エスケープ処理も怖くありません。

OYAKUN
OYAKUN
特に「Web制作小物ツール」は、エスケープ処理しながらpreとcodeタグを付与してくれるので重宝してます。

Prism.jsでソースを表示させるのに手間がかかる

ただ、ここまで説明したとおり、Prism.jsの実装～ソースの表示まではかなりの手間がかかります。

特に手間がかかる作業なのは、

  • カスタムHTMLで開いて
  • <pre><code>タグを記入して
  • ソースをエスケープ処理して貼付け

といった作業でしょう。

いちいち面倒くさくてやってられないのよね。

難しくはないんだけど、この一連の作業が手間なんだよね～

なので、もうちょっと使いやすくする設定を紹介します。

Prism.jsを使いこなす裏ワザ

Prism.jsを使いこなすための裏ワザはズバリ、WordPressの既存機能「再利用ブロック」に登録するだけです。

通常作業で設定する場合

  • カスタムHTMLで開いて
  • <pre><code>タグを記入して
  • ソースをエスケープ処理して貼付け

再利用ブロックの場合

  • 再利用ブロックを呼び出し
  • エスケープ処理したソースを貼付け

再利用ブロックでPrism.jsの貼付けテンプレを作っておけば良いわけね。

再利用ブロックに登録する手順としては、

  • HTMLカスタムブロックを開く
  • <pre><code></code></pre> を記述する

これだけ。

ちなみにAFFINGERならマイブロックに追加しておくとスムーズです。

まとめ

詳しく紹介できてないのですが、

  • 言語を指定するにはcodeタグにclass="language-言語"を付与する
  • ファイル名を表示する場合はpreタグにdata-labelを付与する

といった操作が必要です。

Prism.jsの設定～運用までがちょっと手間なのですが、一度設定すればあとはカンタンに使えるのでぜひ利用してみてください。

OYAKUN
OYAKUN
導入の敷居が若干高いですが、使えると便利ですよ