AMP対応でもソースコードを見やすく、表示したい。AMP対応Syntax-highlightプラグインのご紹介

ブログにソースコードを表示することありますね。そうなった場合に、言語ごとに最適に色分けした状態で表示したいです。そして可能なら普段自分が使っているエディターの色合いもしくは、サイトの雰囲気にあった色合いで表示したいものです。

{
  "name": "mgn-custom-blocks-cgb-guten-block",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "cgb-scripts start",
    "build": "cgb-scripts build",
    "eject": "cgb-scripts eject"
  },
  "dependencies": {
    "cgb-scripts": "1.22.0"
  }
}

Code language: JSON / JSON with Comments (json)

Syntax-highlight系のプラグインの中には、ソースコードを表示した後Javascriptでタグやclassを追加し、CSSで色分けするというものあります。しかしAMP対応の場合はJavascriptが利用できないので、この方法は取れません。というわけで、しらべたらちゃんと、AMPに対応したSyntax-highlightのプラグインがありました！！さすがWordPress。やったぜ！というわけで、こちらです。

Syntax-highlighting Code Block (with Server-side Rendering)

必要な機能をしっかり提供

こちらの機能としてオススメな箇所は以下の通り

WordPressのコアが提供するコードブロックを拡張する
サーバサイトでレンダリングされるため、パフォーマンスの向上およびAMP対応を実現
ソースコードの内容から自動的に言語を選択
任意に選択も可能
185の言語をサポート

89種類の色合いに変更可能

テーマなどからデフォルトのカラーを設定する場合

functions.phpなどに以下の内容を書き加えます。solarized-darkカラーにする場合には以下のようにします。

function setting_default_syntax_style() {
	return 'solarized-dark';
}

add_filter( 'syntax_highlighting_code_block_style', 'setting_default_syntax_style' );

Code language: PHP (php)