このブログのコードのシンタックスハイライトにPrismを利用することにした

このブログはcasper(vjeantet/hugo-theme-casper)というテーマを使っています。

デフォルトではコードを貼り付けたときにシンタックスハイライトが効かないことに気づいたので、CSSやJS周りを調整しました。

✎Prismを使ってみる

Prism(PrismJS/prism)というやつが目に止まりましたのでこれを使ってみます。

MITライセンスです。

まずhttp://prismjs.comに訪問する。こんな↓サイトです。

「DOWNLOAD」ボタンを押すとこんな画面です。↓

ここで利用する言語に応じてCSSをカスタマイズすることができます。

チェックした言語がCSSに反映されるようです。

さらに「DOWNLOAD JS」及び「DOWNLOAD CSS」ボタンを押すと、prism.jsとprism.cssが降ってきます。

✎casperに反映させる

どうやらcasperのコードを読むと、cssはheaderに、jsはfooterに貼れば良いっぽいので、 近いところに貼っていきます。

それぞれ差分はこんな感じ。

layouts/partials/footer.html

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 7a19ad6..4c5f0d1 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -7,6 +7,7 @@
     </div>
     <script type="text/javascript" src="{{.Site.BaseURL}}js/jquery.js"></script>
     <script type="text/javascript" src="{{.Site.BaseURL}}js/jquery.fitvids.js"></script>
+    <script type="text/javascript" src="{{.Site.BaseURL}}js/prism.js"></script>
     <script type="text/javascript" src="{{.Site.BaseURL}}js/index.js"></script>
     {{ if .Site.Params.customFooterPartial }}
         {{ partial .Site.Params.customFooterPartial . }}

layouts/partials/header.html

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index d17b5df..6709e1c 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -37,6 +37,7 @@
 
     <link rel="stylesheet" type="text/css" href="{{.Site.BaseURL}}css/screen.css" />
     <link rel="stylesheet" type="text/css" href="{{.Site.BaseURL}}css/nav.css" />
+    <link rel="stylesheet" type="text/css" href="{{.Site.BaseURL}}css/prism.css" />
     <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400|Inconsolata" />
 
 

コミットはこちらです。

http://prismjs.com/download.html で取得した jsとcssをセットした · hoshinotsuyoshi/hugo-theme-casper@e73abaa

Coy tshedor 3.93KB Markup 0.82KB CSS 0.99KB C-like 0.68KB JavaScript 1.3KB Go arnehormann 0.67KB Bash zeitgeist 872.76KB C zeitgeist 870.94KB Ruby samflores 2KB YAML hason 1.14KB Ruby samflore…

✎シンタックスハイライトが効いた!

before↓

after↓

✎まとめ

シンタックスハイライトを手に入れることができました! 🎉

追記

2018/07/22

themeを変えたのでprismの色も微修正した。

---