Hugoでシンタックスハイライトを適用する
本サイトはHugoで作成しており、以下のテーマを利用しております。 https://themes.gohugo.io/hugo-blog-jeffprod/
コードブロックの箇所を見やすくするために、シンタックスハイライトを導入しました。
基本的にはHugoの公式サイトHugo Syntax Highlightingの手順通りに行うことで簡単に導入できます。
PygmentsはPythonで書かれたシンタックスハイライトのパッケージです。これをベースにHugoで使えるGo言語 で書かれたものがchromaです。
シンタックスハイライトのスタイルシートを出力
まずは、monokaiのcssファイルを出力します。以下コマンドを実行します。
hugo gen chromastyles --style=monokai > syntax.cssファイルが出力されます。以下が中身です。
/* Background */ .chroma { color: #f8f8f2; background-color: #272822 }
/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
/* Keyword */ .chroma .k { color: #66d9ef }
/* KeywordConstant */ .chroma .kc { color: #66d9ef }
/* KeywordDeclaration */ .chroma .kd { color: #66d9ef }
/* KeywordNamespace */ .chroma .kn { color: #f92672 }
/* KeywordPseudo */ .chroma .kp { color: #66d9ef }
/* KeywordReserved */ .chroma .kr { color: #66d9ef }
/* KeywordType */ .chroma .kt { color: #66d9ef }
/* NameAttribute */ .chroma .na { color: #a6e22e }
/* NameClass */ .chroma .nc { color: #a6e22e }
/* NameConstant */ .chroma .no { color: #66d9ef }
/* NameDecorator */ .chroma .nd { color: #a6e22e }
/* NameException */ .chroma .ne { color: #a6e22e }
/* NameFunction */ .chroma .nf { color: #a6e22e }
/* NameOther */ .chroma .nx { color: #a6e22e }
/* NameTag */ .chroma .nt { color: #f92672 }
/* Literal */ .chroma .l { color: #ae81ff }
/* LiteralDate */ .chroma .ld { color: #e6db74 }
/* LiteralString */ .chroma .s { color: #e6db74 }
/* LiteralStringAffix */ .chroma .sa { color: #e6db74 }
/* LiteralStringBacktick */ .chroma .sb { color: #e6db74 }
/* LiteralStringChar */ .chroma .sc { color: #e6db74 }
/* LiteralStringDelimiter */ .chroma .dl { color: #e6db74 }
/* LiteralStringDoc */ .chroma .sd { color: #e6db74 }
/* LiteralStringDouble */ .chroma .s2 { color: #e6db74 }
/* LiteralStringEscape */ .chroma .se { color: #ae81ff }
/* LiteralStringHeredoc */ .chroma .sh { color: #e6db74 }
/* LiteralStringInterpol */ .chroma .si { color: #e6db74 }
/* LiteralStringOther */ .chroma .sx { color: #e6db74 }
/* LiteralStringRegex */ .chroma .sr { color: #e6db74 }
/* LiteralStringSingle */ .chroma .s1 { color: #e6db74 }
/* LiteralStringSymbol */ .chroma .ss { color: #e6db74 }
/* LiteralNumber */ .chroma .m { color: #ae81ff }
/* LiteralNumberBin */ .chroma .mb { color: #ae81ff }
/* LiteralNumberFloat */ .chroma .mf { color: #ae81ff }
/* LiteralNumberHex */ .chroma .mh { color: #ae81ff }
/* LiteralNumberInteger */ .chroma .mi { color: #ae81ff }
/* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff }
/* LiteralNumberOct */ .chroma .mo { color: #ae81ff }
/* Operator */ .chroma .o { color: #f92672 }
/* OperatorWord */ .chroma .ow { color: #f92672 }
/* Comment */ .chroma .c { color: #75715e }
/* CommentHashbang */ .chroma .ch { color: #75715e }
/* CommentMultiline */ .chroma .cm { color: #75715e }
/* CommentSingle */ .chroma .c1 { color: #75715e }
/* CommentSpecial */ .chroma .cs { color: #75715e }
/* CommentPreproc */ .chroma .cp { color: #75715e }
/* CommentPreprocFile */ .chroma .cpf { color: #75715e }
/* GenericDeleted */ .chroma .gd { color: #f92672 }
/* GenericEmph */ .chroma .ge { font-style: italic }
/* GenericInserted */ .chroma .gi { color: #a6e22e }
/* GenericStrong */ .chroma .gs { font-weight: bold }
/* GenericSubheading */ .chroma .gu { color: #75715e }シンタックスハイライトを有効にする
config.tomlに以下を書き込みます。hugoでファイルを生成するときに、markdownでコードフェンスで囲った箇所に対してsyntax.cssを適用してくれます。
pygmentsUseClasses = trueコードフェンスを有効化するために以下も書いておきます。
pygmentsCodefences = truesyntax.cssをヘッダーでインポートするようにしましょう。これでスタイルが適用されているはずです。
垂直方向スクロールバーとフォントの変更
すべてのコードを表示すると、長くなりすぎてしまう場合がありますね。これを防ぐために、高さ制限を設けて、スクロールバーを表示させるようにします。
上のsyntax.cssの.chromaを以下のように変更しました。
/* Background */
.chroma {
color: #f8f8f2;
background-color: #272822;
max-height: 400px; /* Change to your desired max height */
overflow-y: scroll;
font-family: 'Source Code Pro', monospace;
}ついでに、フォントをSource Code Proに指定しました。フォントは Google Fonts から利用します。
インポートは以下の通りです。
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">コードフェンスで言語指定をした場合、フォントがSource Code Proにならなかったので、codeタグでフォントを指定するようにしたら、変更されました。
code { font-family: 'Source Code Pro', monospace; }