本サイトの記事でソースコードを書くことがありますが、つい先日までは色も何もつけていない無加工で味気ないソースコードでした。
そこで他サイトのように記事内でシンタックスハイライトしてみようと模索した結果、良さげなWordPress用プラグインを見つけましたので記事として残しておきます。
目 次
1. シンタックスハイライトとは？
大体のエディターに標準搭載されていますが、ソースコードを編集する際、テキストの一部を命令の属性や構文上の規則に応じて色分けして表示する機能です。
Javascriptライブラリだと下記の３つが主要のようです。
そのうち、2と3の2つを試しに使用してみたのですが、導入の手間が掛かったしイメージがイマイチでした。
2. Highlighting Code Blockとは？
prism.js を使用したシンタックスハイライト機能付きのコードブロックを追加するWordPress用のプラグインでブロックエディター・旧エディターの両方に対応しています。
3. インストール〜有効化
インストールからプラグインの有効化の手順は下記のサイトが分かりやすかったです。
シンタックスハイライトをブロックエディターに追加「Highlighting Code Block」の使い方
4. 基本的な機能
基本的な機能は、Prism.jsに依存していると思われますが下記のような機能があります。
- コードブロックに言語名を表示する
- ソースコードをボタン一つでコピー
- LightかDarkのカラーリング
- コードの行数を表示する
- ラインハイライト
下記のソースコードは、Swift・Darkカラー・コード行数を表示・１行目をハイライトしたもので右上にデフォルトでコピーボタンが付きます。
import SwiftUI
import SafariServicesプラグインを導入して、コードブロックを追加するだけでシンタックスハイライトでコピーや色も付けることができる【Highlighting Code Block】はオススメですね。
