Hugo Syntax Highlight · /dev/random

コードブロックを記述するのに白黒なのは今風じゃないのではないかと思いhighlight.jsを適用してみた。

$ hugo version
Hugo Static Site Generator v0.26 darwin/amd64 BuildDate: 2017-09-03T20:25:23+09:00

ここを参考にして設定しましたがhugoのバージョンが違うためローカルではokなのにビルドアップロードする際にエラーで止まってしまった。

HugoでSyntax Highlight機能を利用ために


1.	config.tomlにSyntax Highlightの設定を追加する。
2.	ローカル環境で確認のためPygmentsをインストールする。
3.	Pygments-style-solarizedをインストールする。
4.	solarizedlight用のcssファイルを用意する。
5.	記事にFenced Code Blockでソースコードを書く。

config.toml

pygmentsstyle = "solarizedlight"
PygmentsOptions = "linenos=table,nobackground=true"
pygmentsCodeFencesGuessSyntax = false

pygmentscodefences = trueを設定したらビルドエラーが出て先に進まない。

何も言わずPygmentsをインストールする。

$ pip install Pygments
$ pip install pygments-style-solarized

solarizedlight用のcssファイルを用意する

$ curl https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css > solarized-light.min.css

footer.html

<!-- Syntax Highlighting -->
    <link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

参考にしたけどcssがちゃんと反映されなかったし、head.htmlに記述しても反映されなかったのでSafariのDebugモード使って大変だったんだよ。

記事にFenced Code Blockでソースコードを書く

　ソースコードの上下をコードフェンスで囲み上部側の```の後にファイルのフォーマット(bash,html,python)など書くとSyntax Highlightingが有効になる。
　いつも使っているsublimetextとTerminalは黒地に白だけど記事にして見てみるとsolarizedlightの配色がきれいでいいなぁ。

Menu