Shopifyのブログ記事にコードのシンタックスハイライト機能を付ける

Tsun Inc.でCTOをしている小笠原です！
最近はShopifyのアプリやテーマの開発を行っています。
このブログではShopify開発に役立つ情報を共有していきます。
Shopifyエンジニアの方の参考になれば嬉しいです！

なぜ作ろうと思ったのか

テック系のブログ記事を書くときにコードを載せることが多くなりますが、Shopifyのブログ記事そのままだとコードが読みづらいため。

作成したもの

Dawnをベースにブログ記事にコードのシンタックスハイライト機能を付けました。
シンタックスハイライト機能を実現するライブラリはPrism、highlight.jsなどがありますが、今回はPrismを採用しました。

以下で、DawnテーマにPrismを使ったシンタックスハイライト機能の付け方を説明します！
作成物を直接見たい方はTsun Inc.のリポジトリを参照してみてください。

前提条件

対象読者

• Shopifyのテーマ変更ができる
• HTML、CSS、JavaScript、Liquidに関する簡単な知識がある

準備するもの

• Dawnテーマ (v5.0.0で動作確認しましたが、以前のバージョンでも問題ないはずです)
• ブログ記事

実装

※ 今回の実装方法ではShopifyのテーマのコードを直接編集する方法をとるため、必ず事前にバックアップをしておいてください。

今回の実装では

• PrismのJS、CSSファイルの作成
• ブログ記事用のLiquidファイルでPrismを読み込む

の2つの工程を行います。

PrismのJS、CSSファイルの作成

単にシンタックスハイライト機能を試してみたい方はこの工程はスキップしても問題ありません。

サンプルとして用意したTsun Inc.のGitHubリポジトリから

• https://github.com/tsuninc/shopify-theme-examples/blob/main/dawn-with-prism/assets/prism.css
• https://github.com/tsuninc/shopify-theme-examples/blob/main/dawn-with-prism/assets/prism.js

をダウンロードしてください。

ご自分でPrismのファイルを用意したい方は下記を実行してください。

1. https://prismjs.com/download.html に行き、必要な言語とプラグインにチェックを入れる

   Prismは必要な機能のみを含んだJS、CSSファイルを生成することで軽量化を実現しています。
   僕は今後記事を書く際に必要になりそうな言語とLine Highlight、Line Numbers、Unescaped Markup、Toolbar、Copy to Clipboard Button、Diff Highlightプラグインにチェックを付けました。

2. 下部のDOWNLOAD JSボタン、DOWNLOAD CSSボタンを押して、prism.jsとprism.cssをダウンロードする

ブログ記事用のLiquidファイルでPrismを読み込む

手元にprism.jsとprism.cssが用意できたと思いますので、Shopifyテーマに組み込みます。

1. Shopifyの管理画面から オンラインストア > テーマ を選択
2. アクション > コードを編集 を選択
3. Assets > 新しいassetを追加を選択
4. ファイルをアップロード からprism.jsを選択してアップロード
5. 同様にprism.cssもアップロード
6. Sectionsのmain-article.liquidを開く
7. 下記のようにコードを編集
8. 保存する を選択して保存

ここまでできたら、ブログ記事内でコード用のタグを書けばPrismが自動でシンタックスハイライトを付けてくれます！
タグの書き方はhttps://prismjs.com/index.html#basic-usageを参考にしてください。

Scriptタグを使う場合の注意点

spanタグやscriptタグなどのHTMLのタグを含むコードの場合、ブログ記事を保存する際にShopify側でエスケープされてしまうので、エスケープされないようにする必要があるので注意してください。

<pre><code class="language-css"><!--
<script src="{{ 'table-of-contents.js' | asset_url }}" defer="defer" />
--></code></pre>

のように記述すればOKです。

まとめ

今回はShopifyのブログ記事にコードのシンタックスハイライト機能を付ける方法をご紹介しました。
Prismは軽量でありつつ多機能なので、ご自身にあった表示方法にカスタマイズをいろいろしてみてください！

Tsun Inc.ではShopifyテーマのカスタマイズにも対応してます。
もし、Shopifyテーマのカスタマイズをしたい方は、Tsun Inc.へお問い合わせください。

まだShopifyのブログ機能を利用していない方は、下記の記事でShopifyのブログ機能について解説していますので参考にしてみてください。

Shopifyのブログ機能をフル活用しよう｜機能や拡張アプリを紹介