WordPressのシンタックスハイライトをSyntax-highlighting Code Block (with Server-side Rendering) に乗り換えた

ぬにょす(挨拶)。

WordPressのシンタックスハイライト用プラグインとして、長らくCodeColorerを使っていたのですが、ふと2年ぐらい更新されていないことに気が付きました。

そんな訳で、もう少し頻繁にメンテされてるものは無いかと探しまして、Syntax-highlighting Code Block (with Server-side Rendering) を見つけました。

プラグイン名に Server-side Rendering と入っている通り、サーバーサイドでハイライト処理を行ってくれるようです。

設定画面がないので、スタイルを変更するにはフィルターフックをかます必要があります。

GitHub - westonruter/syntax-highlighting-code-block: Extending the WordPress Code block with syntax highlighting rendered on the server, thus having faster frontend performance and being AMP-compatible.

Extending the WordPress Code block with syntax highlighting rendered on the server, thus having faster frontend performance and being AMP-compatible. - GitHub -...

github.com

具体的には、管理画面から外観→テーマエディターを選択。

テーマのための関数(function.php)を選択。

フィルターフックを追加します。

add_filter(
	'syntax_highlighting_code_block_style',
	function(){
		return '適用したいスタイル';
	}
);
Code language: JavaScript (javascript)

指定できるスタイルの一覧はこちらにあります。

Build software better, together

GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 330 million projects.

github.com

各スタイルの見た目は highlight.js のデモサイトで確認できます。

highlight.js demo

highlightjs.org

ポチポチっと気軽にスタイルの切り替えはできませんが、そう頻繁に変えるものでもないですしね。当面はこのプラグインにお世話になろうかと思います。