テーマテンプレートDawmは<code>タグに関するcssがありません。
highlight.jsを利用してシンタックスハイライトをVisual Studio風にしてみます。
【公式】highlight.js
必要なファイルは以下の2つ。これをassetsフォルダに入れます。
- highlight.min.js 58.7 KB
- vs2015.min.css 1.06 KB
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>