ペンギンスタート

【WordPress】ブロックエディタにPrism.jsをインストールする方法

,
HOME > アーカイブ > WordPress > 【WordPress】ブロックエディタにPrism.jsをインストールする方法

ブログにコードを掲載するときに便利なシンタックスハイライター「Prism.js」を、WordPressにプラグイン無しで導入していきます。

WordPressのコードブロックの難点

WordPressのコードブロック、地味でわかりづらいのが難点です。

<?php
echo "Hello,World!!";
?>

デフォルトでは背景色のないため、後付で設定しています。

ではプラグインのインストールの選択肢は言うと、Highlighting Code Blockというプラグインがありますが、過度な機能は不要で、カスタマイズ性に優れ、軽量感のあるシンタックスハイライターを探していました。

そこで見つけたのが、Prism.jsというシンタックスハイライターです。

次のデモのように、要素を解析に色分けされ見やすくなります。

echo "Hello,World!!";

こちらのPrism.jsを直接WordPressのブロックエディターで利用できるようにインストールしてきます。

Prism.jsをWordPressへインストールする方法

Prism.js公式サイトでDOWNLOADをクリック

Prism.js公式サイトにアクセスして、画面右上のダウンロードをクリック

Prism.js

遷移後のページで、圧縮レベルを選択

圧縮レベル（Compression level）は、デフォルトのMinified versionのままとした。

Prism.js

テーマを選択

Themes（テーマ）は、Tomorrow Nightを選択した。

Prism.js

Languagesを選択

  • Markup – markup, html, xml, svg, mathml, ssml, atom, rss
  • CSS – css
  • C-like – clike
  • JavaScript – javascript, js
  • Apache Configuration – apacheconf
  • Bash – bash, sh, shell
  • JSON – json, webmanifest
  • Markup templating
  • PowerShell – powershell
  • PHP – php
  • SQL – sql
  • XML doc (.net) – xml-doc
  • Sass (SCSS) – scss
  • React JSX – jsx
  • React TSX – tsx

Pluginsを選択

  • 必須
    • Normalize Whitespace
  • 任意
    • Line Numbers
    • Copy to Clipboard Button
    • Keep Markup

Normalize WhitespaceはWordPressでPrism.jsを使用するときには必須のプラグイン。コードブロックのすべての先頭と末尾の空白を削除してくれる機能を提供する。

Keep Markupは、HTML表示崩れ対策のため導入する。

JSファイルとCSSファイルをダウンロード

JSファイルとCSSファイルが両方必要なため、ダウンロードする。

FTPなどで子テーマにアップロード

ダウンロードしたprism.cssとprism.jsをFTPソフトを使用して、サーバーにアップロードする。

WordPress場合、有効化しているテーマフォルダ内にアップロードしないと、Prism.jsが動作しないため子テーマにアップロードする。

Prism.jsを読み込み有効化

子テーマのfunctions.phpにコードを追記して、Prism.jsのファイルを読み込む。挙動が不安点だったため、エディターにJSファイルを読み込まないことにする。

/* ---------------------------------
 * フロントにスタイルを読み込む
 * ---------------------------------- */
function my_enqueue_assets() {
	if (is_single() ) {
		wp_enqueue_style(
			'my-prism-style', 
			get_stylesheet_directory_uri() . '/css/prism.css'
		);
		wp_enqueue_script(
			'my-prism-script', 
			get_stylesheet_directory_uri() . '/js/prism.js', 
			array(), 
			'1.9.0', 
			true
		);
	}
}
add_action('wp_enqueue_scripts', 'my_enqueue_assets');

/* ---------------------------------
 * エディターにJavaScriptを読み込む
 * ---------------------------------- */
function my_enqueue_editor_assets() {
	if ( is_admin() ) {
		wp_enqueue_style( 
			'my-editor-prism-style', 
			get_template_directory_uri() . '/css/prism.css',
		);
	}
}
add_action( 'enqueue_block_assets', 'my_enqueue_editor_assets' );

言語表示プラグインを追加する方法

Prism.jsのプラグインや言語を追加する時は、prism.cssやprism.jsに記載されたURLへ飛ぶと、前回ダウンロード時の設定を反映したダウンロードページヘ飛ぶことができる。

/* PrismJS 1.29.0
/* PrismJS 1.29.0
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+apacheconf+bash+git+json+markup-templating+php+powershell+jsx+tsx+scss+sql+typescript+xml-doc&plugins=line-highlight+line-numbers+show-language+normalize-whitespace+toolbar+copy-to-clipboard */

選択した項目がアドレスに一部となっているため、一から選択し直す手間が省ける。prism.cssとprism.jsに記載されたURLは同一なので、片一方をコピーしてブラウザのアドレス窓に貼り付けて移動する。

必要なPluginや言語を選んで、jsファイルとcssファイルをダウンロードし、既存のファイルと置換して完了。

シンタックスハイライトの使用方法

Prism.jsを使用する時はクラス名を付与する必要がありますが、WordPressのブロックエディターではhtml編集に制約があります。そのため、コードブロックやカスタムHTMLブロックを使用してコードを記述し、Prism.jsのスタイルを反映させることになります。

WordPressのエディターで各ブロックにCSSクラスを付与する方法は、右パネルのブロック＞高度な設定＞追加CSSクラスに記述します。

言語を指定する

次のクラスを追加CSSクラスに入力すると、シンタックスハイライターが有効になります。

language-html // HTMLの場合
language-css  // CSSの場合
language-js   // JavaScriptの場合
language-php  // PHPの場合

言語用CSSだけではなく、行番号のクラスを同時に付与することも可能です。

language-html line-numbers // HTMLの場合
language-css line-numbers  // CSSの場合
language-js line-numbers   // JavaScriptの場合
language-php line-numbers  // PHPの場合

各言語用のコードブロックを作成し、WordPressの機能を使用して、パターン登録しておくと再利用しやすくなり便利です。

language-XXXのXXには各言語ごとに決められた識別子が入ります。公式一覧

高度なカスタマイズ

カスタムHTMLブロックを使用すると、Prism.jsの高度なカスタマイズを利用することができます。その場合、コードは、下記のコードで囲う必要があります。

<!-- HTML -->
<pre><code class="language-html">

</code></pre>

<!-- CSS -->
<pre><code class="language-css">

</code></pre>

<!-- JS -->
<pre><code class="language-js">

</code></pre>

<!-- PHP -->
<pre><code class="language-php">

</code></pre>

行番号を表示

<pre class="line-numbers"><code class="language-css">
p {
     padding: 1em;
     background-color: #eee;
     font-size: 16px;
}
</code></pre>

＞結果


p {
     padding: 1em;
     background-color: #eee;
     font-size: 16px;
}

スタートする行番号を指定

<pre class="line-numbers" data-start="2"><code class="language-css">
p > a{
     padding: 1em;
     background-color: #eee;
     font-size: 16px;
}
</code></pre>

＞結果


p {
     padding: 1em;
     background-color: #eee;
     font-size: 16px;
}

指定行に背景色を設定

Prism.jsの機能の一部には、指定行に背景色を設定するものもあります。コードは次のようになります。

<!-- 単一行 -->
<pre data-line="2"><code class="language-css"></code></pre>
<!-- 複数行 -->
<pre data-line="2,3"><code class="language-css"></code></pre>
<!-- 範囲指定1 -->
<pre data-line="2-5"><code class="language-css"></code></pre>
<!-- 範囲指定2 -->
<pre data-line="2-5,7-8"><code class="language-css"></code></pre>

ただ、横スクロールが発生などの不具合が発生するため、CSSで調整が必要です。

行を右端で折り返す

code[class*='language-'],
pre[class*='language-'] {
  white-space: pre-wrap !important;
}

見やすいコード掲載を

Prism.jsが自動的にコードを色分けしたり、行番号を付与してくれるようになりました。コードにマウスホバーすると言語とコピーリンクも表示されます。

WordPressのブロックエディターでも簡単に実装することができました。

ブログを書くのがより楽しくなりました。

,

リファレンス

WordPress

ブロック開発
テーマ開発
管理画面
エディタ
サイト構成
マルチサイト
セキュリティ

Web開発

htmlcss
サーバー
ツール