モジュール Prism Js syntax highlighter を削除して Prism をインストールする

2024年8月2日に Drupal 11 が正式リリースされたから、自鯖の対応状況を調べてみた。
仮想マシン（サーバー）の PHP を 8.3 にしなければいけないのはいいとして、使用中のモジュールがアップデートされるまで暫く静観する必要がある。

ただ、syntax highlighter のモジュールは Prism が Drupal 11 ready なので変更してみた。Drupal の統計によると、利用者は「Prism ＞ Prism Js syntax highlighter」みたい。

Prism

モジュールはこちら。CKEditor 5 で記事を編集するときに、標準の「コードブロックの挿入」を適用することでコードがハイライト表示される。

Prism Js syntax highlighter

モジュールはこちら。CKEditor 5 に専用のアイコンが追加され、クリックするとコードを入力するダイアログが表示される。
ブロックの前後に段落を挿入することができる。

Prism Js syntax highlighter アンインストール

いきなりモジュールを削除すると記事内のコードブロックが綺麗サッパリ削除される。
なので標準のコードブロックに変更する必要があるけれど、このサイトは記事が少ないから一つ一つ手入力で変更（記事を更新）した。大規模なサイトなら SQL で database を直接何とかするんだろうなぁ。

記事の編集が終わったら、管理画面の「環境設定＞コンテンツ作成＞テキストフォーマットとエディター」とクリックして、CKEditor 5 を使用しているフル HTML の「設定」をクリックする。
それから、使用中の「Prism.js」のアイコンを未使用アイコンの行に移動させて、有効なフィルターのチェックも外しておく。
これでモジュール削除の準備は完了。管理画面の「機能拡張＞モジュールをアンインストール」とクリックして、Prism Js syntax highlighter をアンインストールする。

さらに、このままだとサーバーにゴミが残るから、次のコマンドで関係ファイルも削除する。

composer remove 'drupal/prismjs'

Prism のインストール

まずは次のコマンドで Prism をインストールする。

composer require 'drupal/prism:^2.2'

それから /var/www/jisaba.life/web/libraries/prism/ に prism.js と prism.css を設置する。たぶん、最初は /libraries/prism/ は無いから mkdir -p で作っておくこと。
2つのファイルは prismls.com の画面上にある「DOWNLOAD」ボタンをクリックして表示されるページから、テーマや言語、プラグインを選択して、ページ最下段のボタン「DOWNLOAD JS」「DOWNLOAD CSS」をクリックしてダウンロードする。
サーバーへのアップロードは scp が楽。

これで準備はできたから、管理画面からモジュール Prism を有効化（インストール）する。
それから「管理画面＞環境設定＞コンテンツ作成＞テキストフォーマットとエディター」の「設定」から「有効なフィルター」の「Highlight code using prism.js」にチェックを入れる。

記事の編集画面で「コードブロックの挿入」をクリックしたときに選択できる言語は、上画像ページにある「Code Block」から追加削除が可能。

おおまかな手順はこんな感じ。ああ、キャッシュの削除も忘れずに。

ときどき Upgrade Status をチェックしつつ、そのうち Drupal 11 にアップグレードしよう。