CKEditor CodeSnippet は、Drupal のコンテンツ編集で CKEditor の CodeSnippet プラグインを使えるようにするモジュール。有効にすると、ツールバーの「コードスニペットを挿入」ボタンで開くモーダルウィンドウから言語とコードを入力することで、ハイライト表示のコード片をコンテンツに挿入できる。
これを使って sites/default/services.yml ファイルの内容を入力しようとして、言語の選択肢に YAML がないことに気づいた。指定できる選択肢は、テキストフォーマットの設定（admin/config/content/formats）で選択するが、そもそもそこに YAML がない。
記述言語に応じてコード内のキーワードをハイライト表示する機能は highlight.js によるが、もしかして使用しているファイルに YAML サポートが含まれていないのだろうか。もしそうなら、https://highlightjs.org/download/ で YAML を含むバージョンを生成＆ダウンロードして差し替える必要がある。でも、本当にそうか。
モジュールの README を確認すると、同梱の highlight.js に含まれている言語のリストがあった：
Out of the box, the included version of highlightjs comes with these
languages (as defined in config/install/codesnippet.settings.yml):
languages:
apache: 'Apache'
bash: 'Bash'
coffeescript: 'CoffeeScript'
css: 'CSS'
dart: 'Dart'
dockerfile: 'Dockerfile'
dust: 'Dust'
gherkin: 'Gherkin'
go: 'Go'
haml: 'HAML'
handlebars: 'Handlebars'
ini: 'Ini'
java: 'Java'
javascript: 'JavaScript'
json: 'JSON'
less: 'Less'
makefile: 'Makefile'
markdown: 'Markdown'
nginx: 'Nginx'
php: 'PHP'
perl: 'Perl'
powershell: 'Powershell'
puppet: 'Puppet'
python: 'Python'
ruby: 'Ruby'
scss: 'SCSS'
sql: 'SQL'
twig: 'Twig'
typescript: 'TypeScript'
yaml: 'Yaml'
xml: 'XML'
あー、やっぱり最後から2行目に YAML がある。ということは、highlight.js ではなく、Drupal モジュール側に原因があるのか。README を読むと、自作モジュールで HOOK_form_FORM_ID_alter フックを実装することで言語の選択肢を追加できるとある。
というわけで、チュートリアルを見ながら簡単なモジュールを作ってみることに。ここでは仮に hoge モジュールとしよう。
modules/custom/hoge ディレクトリを作成して hoge.module ファイルを追加する。このファイルに README のサンプルコードをコピーし、関数名にモジュール名を反映し、実装に YAML 用の配列要素を追加。
modules/custom/hoge/hoge.module：
<?php
use Drupal\Core\Form\FormStateInterface;
function hoge_form_filter_format_edit_form_alter(&$form, FormStateInterface $form_state, $form_id) {
if (isset($form['editor']['settings']['subform']['plugins']['codesnippet'])) {
$form['editor']['settings']['subform']['plugins']['codesnippet']['highlight_languages']['#options']['cpp'] = 'C++';
$form['editor']['settings']['subform']['plugins']['codesnippet']['highlight_languages']['#options']['d'] = 'D';
$form['editor']['settings']['subform']['plugins']['codesnippet']['highlight_languages']['#options']['rust'] = 'Rust';
$form['editor']['settings']['subform']['plugins']['codesnippet']['highlight_languages']['#options']['yaml'] = 'YAML';
asort($form['editor']['settings']['subform']['plugins']['codesnippet']['highlight_languages']['#options']);
}
}
あとは、Drupal にモジュールとして認識させるためのメタ情報として、hoge.info.yml ファイルを作って出来上がり。
modules/custom/hoge/hoge.info.yml：
name: hoge
description: custom code for My module
package: Custom
type: module
core_version_requirement: ^9
Drupal の管理画面で「機能拡張」ページを開き、作成したモジュールが認識されていることを確認。あとは有効化すれば適用されるはず。
モジュールを有効にした後、テキストフォーマットの管理画面で CodeSnippet の設定を見ると、YAML を含む、上の関数で指定した各言語のチェックボックスが追加されていた。よしよし。
追加された YAML のチェックボックスをオンにして保存すると、コンテンツ編集時の「コードスニペット」ウィンドウの言語選択肢に YAML が追加された。よしよしよし。
これで YAML コードもハイライト表示できるようになった。
コードはサンプルのコピペでいけるけど、外枠のモジュールを作るところが初心者にはハードルが高い。もっと簡単な方法があれば、教えていただけるとうれしいです。
参考資料：
