Shopifyにシンタックスハイライト

テーマテンプレートDawmは<code>タグに関するcssがありません。

highlight.jsを利用してシンタックスハイライトをVisual Studio風にしてみます。
【公式】highlight.js

必要なファイルは以下の2つ。これをassetsフォルダに入れます。

• highlight.min.js 58.7 KB
• vs2015.min.css 1.06 KB

layoutのtheme.liquidファイルを編集して
1. base.cssの直後にvs2015.min.cssを追加します。

    {{ 'base.css' | asset_url | stylesheet_tag }}
    {{ 'vs2015.min.css' | asset_url | stylesheet_tag }}
 

2. </body>タグの直前にhighlight.jsの2行を追加します。

    <script src="{{ 'highlight.min.js' | asset_url }}"></script>
    <script>hljs.highlightAll();</script>
  </body>
 

これで<pre><code>でシンタックスハイライトが表示できるようになりました。

<pre>
  <code>
    （表示するコード）
 </code>
</pre>