開発ノート@HarikoApps

2024-06-15

highlight.jsを用いてActionTextにもシンタックスハイライトを導入する #nobuild #10

ActionTextではTrixというエディタが使われているのですが、Trixには標準ではシンタックスハイライトの機能は備わっていません。そこでhighlight.jsを用いてシンタックスハイライトを導入してみました。検証環境は以下のようになり、importmap-railsを用いたNo Buildな環境になります。

Rails(ActionText) 7.1.3.4
importmap-rails 2.0.1
turbo-rails 2.0.5
highlight.js 11.9.0

（highlight.jsのシンタックスハイライトはActionTextに限定されず利用できます）

highlight.jsのJSを追加

まず、highlight.jsを導入します。config/importmap.rb に下記のように追記します。

# highlight.js importing
pin "highlight.js", to: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js"
pin "highlight.js/ruby", to: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/languages/ruby.min.js"
pin "highlight.js/javascript", to: "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/languages/javascript.min.js"

ここでは import ... from ... の形でhighlight.jsを扱えるようにES6モジュール形式のJSバンドルを読み込んでいます。言語はRubyとJavaScriptの対応用ファイルをそれぞれ追加しています（highlight.jsは200近くのフォーマットに対応しています。ここにフォーマット対応用のJSファイルがあるので、ここから導入したいフォーマットを選んで導入してください）。
次に app/javascript/application.js に下記のように追記します。

import hljs from "highlight.js"
import hljsRuby from "highlight.js/ruby"
import hljsJS from "highlight.js/javascript"

// フォーマットの登録
hljs.registerLanguage("ruby", hljsRuby)
hljs.registerLanguage("javascript", hljsJS)

// Turboで遷移時にハイライト処理を行う
document.addEventListener("turbo:load", (_event) => {
  document.querySelectorAll("pre").forEach((block) => {
    hljs.highlightElement(block)
  })
})

ここではimportmap.rbに追記した各モジュールをimportし、 highlight.js の初期化処理を行なっています。

CSSを追加

次にスタイルシートを設定します。highlight.js用のスタイルシートはここにあるので、好きなスタイルをRailsプロジェクトにコピーします（スタイルのプレビューはここで行えます）。

標準的なセットアップでSprocketsを使用している場合は app/assets/stylesheets ディレクトリの下にcssファイルを設置してください（highlight.jsのライセンスにも注意してください。CSSをコピーするときにこのライセンスも一緒にコピー&ペーストしておくと良さそうです）。

cssbundling-railsなど、他のCSS管理手法を利用している場合はそちらの手順に従ってください。

完了！

これで完了です！highlight.jsの自動フォーマット判定のおかげでとても簡単に導入できました。

Updated at June 21, 2024 3:27am