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

PostmanでShopify Admin APIのクエリを実行・管理する
Tsun Inc. CTOの小笠原です!今回はShopify APIをPostmanで簡単に実行するノウハウをまとめました。 Shopify APIに限...
Tsun Inc.でCTOをしている小笠原です!
最近はShopifyのアプリやテーマの開発を行っています。
このブログではShopify開発に役立つ情報を共有していきます。
Shopifyエンジニアの方の参考になれば嬉しいです!
テック系のブログ記事を書くときにコードを載せることが多くなりますが、Shopifyのブログ記事そのままだとコードが読みづらいため。
Dawnをベースにブログ記事にコードのシンタックスハイライト機能を付けました。
シンタックスハイライト機能を実現するライブラリはPrism、highlight.jsなどがありますが、今回はPrismを採用しました。
以下で、DawnテーマにPrismを使ったシンタックスハイライト機能の付け方を説明します!
作成物を直接見たい方はTsun Inc.のリポジトリを参照してみてください。
※ 今回の実装方法ではShopifyのテーマのコードを直接編集する方法をとるため、必ず事前にバックアップをしておいてください。
今回の実装では
の2つの工程を行います。
単にシンタックスハイライト機能を試してみたい方はこの工程はスキップしても問題ありません。
サンプルとして用意したTsun Inc.のGitHubリポジトリから
をダウンロードしてください。
ご自分でPrismのファイルを用意したい方は下記を実行してください。
https://prismjs.com/download.html に行き、必要な言語とプラグインにチェックを入れる
Prismは必要な機能のみを含んだJS、CSSファイルを生成することで軽量化を実現しています。
僕は今後記事を書く際に必要になりそうな言語とLine Highlight、Line Numbers、Unescaped Markup、Toolbar、Copy to Clipboard Button、Diff Highlightプラグインにチェックを付けました。
下部のDOWNLOAD JSボタン、DOWNLOAD CSSボタンを押して、prism.jsとprism.cssをダウンロードする
手元にprism.jsとprism.cssが用意できたと思いますので、Shopifyテーマに組み込みます。
ここまでできたら、ブログ記事内でコード用のタグを書けばPrismが自動でシンタックスハイライトを付けてくれます!
タグの書き方はhttps://prismjs.com/index.html#basic-usageを参考にしてください。
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のブログ機能について解説していますので参考にしてみてください。
Tsun Inc. CTOの小笠原です!今回はShopify APIをPostmanで簡単に実行するノウハウをまとめました。 Shopify APIに限...
RuffRuff 目次作成の機能や料金プランを知りたい方は下記のページをご参考にしてください。 Shopifyに目次を自動生成するアプリ「RuffRuff...
EコマースやShopifyの初学者にとって、できるだけ “やさしく” “わかりやすく” “正確に” 難しいコマース用語やマーケティング用語、ストア構築から販売までの仕組み・ノウハウを伝えることを心がけて、記事コンテンツを作成しています。
掲載している各種情報は、株式会社Tsunが調査した情報をもとにしています。できるだけ“最新“かつ“正確“な情報の掲載に努めておりますが、内容を完全に保証するものではありません。当サイトによって生じた損害について、株式会社Tsunではその賠償の責任を一切負わないものとします。掲載情報に誤りがある場合には、お手数ですが株式会社Tsunまでご連絡をいただけますようお願いいたします。
{"one"=>"比較する2つまたは3つのアイテムを選択します", "other"=>"選択された3つのアイテムの{{ count }}"}