経緯
WordPressの話です。
以下のようにHighlighting Code Blockを使ってDartを書くと、なぜかシンタックスハイライトが効きませんでした。
Highlighting Code Block以外にもCode Syntax Blockというプラグインを試してみたのですが、こちらもハイライトされませんでした。
はじめはWordPressのバージョンを上げてしまったのが原因なのかなと思ってました。
（直近にWordPress5から6のメジャーアップデートがあった。）
キャッシュを削除したり、競合するプラグインをオフにしてみたり、テーマ自体を疑って変更してプレビューしてみても上手く行きませんでした。
けど実際はバージョンは関係なくて、そもそもHighlighting Code BlockがデフォルトではDart言語が対応してなくて、対応する場合はprism.jsをテーマに反映する必要がありました。
解決法
大体は以下のサイトでまとめられています。
そのため、prism.jsに対応する言語を追加しダウンロードする手順は省略します。
私の場合、サーバーはConoha wingを使っているので、
独自prism.jsをアップロード以降について説明します。
手順
- Conoha wingにログインする。
- サーバーから「ファイルマネージャー」をクリックする。
- atcoy_cxxxxxx@localhost>public_html>2play.dev(自分のサイト名)>wp-content>themes>jin-child(自分のWordPressのテーマ)で新規フォルダをクリックする。
- 名前は「my-highlight」を作成する。（名前はなんでも大丈夫です。）
- 作成したディレクトリの中にダウンロードしてきた「prism.js」をアップロードする。
- サイドバーの設定>[HCB]設定をクリックする。
- 独自prism.jsに先ほど設定したprism.jsのパスを設定する。
- 変更を保存する。
3. atcoy_cxxxxxx@localhost>public_html>2play.dev(自分のサイト名)>wp-content>themes>jin-child(自分のテーマ)**で新規フォルダをクリックする。
7. 独自prism.jsに設定する
私の場合だと、「https://2play.dev/wp-content/themes/jin-child/my-highlight/prism.js」になります。
これでシンタックスハイライトが無事に表示されるようになりました。
おわりに
Conoha Wingのファイルマネージャーを使うとFTPソフトなどを使わなくても、「wp-content>themes」にアクセス・アップロードできるのが発見でした。
あと今回はDartの場合でしたが、他にもJavaやReact TSX、Kotlinなど結構非対応の言語が多いので、もしWordPressで書きたい場合は追加する必要があります。