コンテンツにスキップ
【厳選】おすすめ Shopifyアプリ
【厳選】おすすめ Shopifyアプリ
Shopifyのブログ記事にコードのシンタックスハイライト機能を付ける Tsun Inc.

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

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

なぜ作ろうと思ったのか

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

作成したもの

Dawnをベースにブログ記事にコードのシンタックスハイライト機能を付けました。
シンタックスハイライト機能を実現するライブラリはPrismhighlight.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リポジトリから

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

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

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

    Prismは必要な機能のみを含んだJS、CSSファイルを生成することで軽量化を実現しています。
    僕は今後記事を書く際に必要になりそうな言語とLine HighlightLine NumbersUnescaped MarkupToolbarCopy to Clipboard ButtonDiff 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のブログ機能をフル活用しよう|機能や拡張アプリを紹介

前の記事 新しくリリースされたShopifyアプリの中からオススメのアプリをご紹介!
次の記事 Shopifyの電話番号から国際番号を取り除いて表示する

Shopify Apps

TECH BLOGS

BLOGS

編集プロセス

EコマースやShopifyの初学者にとって、できるだけ “やさしく” “わかりやすく” “正確に” 難しいコマース用語やマーケティング用語、ストア構築から販売までの仕組み・ノウハウを伝えることを心がけて、記事コンテンツを作成しています。

詳しく見る →

掲載情報に関して

掲載している各種情報は、株式会社Tsunが調査した情報をもとにしています。できるだけ“最新“かつ“正確“な情報の掲載に努めておりますが、内容を完全に保証するものではありません。当サイトによって生じた損害について、株式会社Tsunではその賠償の責任を一切負わないものとします。掲載情報に誤りがある場合には、お手数ですが株式会社Tsunまでご連絡をいただけますようお願いいたします。

アプリの比較

{"one"=>"比較する2つまたは3つのアイテムを選択します", "other"=>"選択された3つのアイテムの{{ count }}"}

比較する最初のアイテムを選択します

比較する2番目の項目を選択します

比較する3番目の項目を選択

比較