はじめに
Zendeskカスタマイズ案件でコードブロックにシンタックスハイライトを当てたいお客さんがいたので、prismやら試しましたがhighlight.jsが一番気軽に導入できました。
初期状態
デフォルトのコードブロックだとこんな感じで、他の要素と比べて少し背景がクリーム色になるくらいで特にハイライトは適用されてません。
hightlight.jsダウンロード
hightlight.jsの公式サイトでハイライトを当てたい言語を選択し、ダウンロードボタンを押下するとzip形式でファイルが取得できるかと思います。
いろいろとhighlight.jsを活用しているサイトを回りましたが、どれもhighlight.pack.jsを使用するとしていました。現行のバージョン(11.7.0)ではそのファイルはなかったので、highlight.min.jsを使用します。他のサイトをみても慌てないでください。大丈夫です。
テーマ選択
hightlight.jsではどのようなテーマでハイライトを実現したいか選択することができます。このデモページのサイドバーでお気に入りのテーマを決めてください。今回はspacemacsを使用します。Emacsに近いハイライトを実現できます。
先ほどダウンロードしたファイルのstylesフォルダを見てみると、各テーマのハイライトを実現するファイルがあります。さっき決めたテーマのファイルがあることを確認しましょう。
Zendesk設置
hightlight.jsを使用してZendeskのコードブロックにハイライトを当てるために必要なファイルはhighlight.min.jsとspacemacs.min.cssの2つです。ハイライトを実現したいZendeskテーマのカスタマイズに行きます。
ここでファイルの横にある「追加ボタン」に「アセット」とあるので、ここに先程の2ファイルをアップロードします。
ファイル埋め込み
埋め込んだファイルをクリックすると以下内容が確認できるかと思うので、Templateの内容をコピーしておきます。
そしたらdocument_head.hbsに以下のコードを設置します。
<link rel="stylesheet" href="{{asset 'spacemacs.min.css'}}">
<script src="{{asset 'highlight.min.js'}}"></script>
<script>hljs.initHighlightingOnLoad();</script>
「保存」と「公開」をして記事画面を確認してみると、選択したテーマでハイライトが実現できました！
最後に
今回は綺麗にハイライトを構築できましたが、もしdocument_head.hbsに設置しても反映されない場合はキャッシュを削除してみてください。それでも上手くいかない場合はfooter.hbsにも先程の3行コードを設置して再度確認してみてください。