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"
  }
}

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

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

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

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

  • WordPressのコアが提供するコードブロックを拡張する
  • サーバサイトでレンダリングされるため、パフォーマンスの向上およびAMP対応を実現
  • ソースコードの内容から自動的に言語を選択
  • 任意に選択も可能
  • 1​​85の言語をサポート
サイドのパネルから言語と列番号の有無を選べる
  • 89種類の色合いに変更可能
テーマカスタマイザーから色合いを選択

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

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

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

add_filter( 'syntax_highlighting_code_block_style', 'setting_default_syntax_style' );

カラー名はこちらから選びます。https://highlightjs.org/static/demo/

設定も簡単ですし、見栄えもいい感じになって言うことなしです。ぜひ使ってみてくださいませ。日本語訳がまだのようなので、折を見て翻訳できるといいなと思っています。よかったら一緒にやりましょう。

ではまた！

次回予告

  • HTMLから画像を作成するAPIを試してみる
  • 関連記事を実装する
  • AMPでのアクセス解析
    • クリックイベントの取得
  • AMPとカスタムメニューの組み合わせ
  • AMPでアドセンス自動広告
  • Backlog World 2020で話す、”リモートワークでプロジェクトマネジメントを上手く行うための技術” について
  • 2月に行われる自分主催のイベント”めがねさんと。“について
  • WordCamp ASIA 2020について
  • 日記的なYoutubeを再開したい。
  • 毎日続けられるかどうか。
  • ロゴをかっこよくする
  • メニューをサンドイッチぽくする