Zenn
Open7

Hugo

Hugo
Takanori IshikawaTakanori Ishikawa

下書き状態で記事を書く

テンプレートによるのかもしれないが、まずは記事の Front matter で draft フィールドを true にしておく。

draft: false
date: "2021-01-16T08:57:09+00:00"
title: "Testing Expo apps with Jest in TypeScript"
...

このままだとローカルのサーバで確認するときも表示されなくなるので、下書き状態の記事もレンダリングするように設定してサーバを起動する。

$ hugo server --watch --buildDrafts
Takanori IshikawaTakanori Ishikawa

ローカルかどうかの判定

ローカルで表示しているときは Google Analytics とか一部機能をオフにしたい。

まず、BaseURL に "localhost" が含まれるかどうかで判定する方法がある。[1] これが一番手軽そうなので採用。

{{ if not (in (.Site.BaseURL | string) "localhost") }}
  ...
{{ end }}

あとは、config.toml を分けるという手も紹介されていたが、こちらは共通部分の config を読み込む機能とかないと管理が面倒くさそう（試していない）[2]

脚注

  1. Hugo website on localhost or not? · Kodify ↩︎

  2. https://discourse.gohugo.io/t/how-to-check-if-the-site-is-on-localhost/1490/14 ↩︎

Takanori IshikawaTakanori Ishikawa

Hugo の Syntax Highlight をオフにする

どのバージョンからなのかは分からないが、Code Fence の中身を Syntax Highlight してくれるようになっていた。[1] ありがたいのだが、もともと highlight.js を使っていて、特に不満はないのでオフにする。

[markup]
  [markup.highlight]
    codeFences = false
脚注

  1. Syntax Highlighting | Hugo ↩︎

Takanori IshikawaTakanori Ishikawa

数式を表示するようにしたいのだが、markdown の処理は goldmark を使っており、拡張がある。

しかし、これを Hugo に組み込むためには fork するしかない？

Content Formats | Hugo によると、

  • Frontmatter または拡張子から処理系を選ぶ
  • しかし、呼び出せる処理系の選択肢は決まっている
    • asciidoc, RST, pandoc

Pandoc を使えばいけそうな気がする（オプションで --mathjax が渡されている）ので、まずは Pandoc - Installing pandoc の手順に従ってインストール。

$ pandoc --version                                              
pandoc 2.14.1
Compiled with pandoc-types 1.22, texmath 0.12.3, skylighting 0.11,
citeproc 0.4.1, ipynb 0.1.0.1
User data directory: /Users/ishikawasonkyou/.local/share/pandoc
Copyright (C) 2006-2021 John MacFarlane. Web:  https://pandoc.org
This is free software; see the source for copying conditions. There is no
warranty, not even for merchantability or fitness for a particular purpose.

次に、適当な Markdown ファイルの FrontMatter で markup: pandoc にしたところ、以下の出力を得た。

<span class="math display">\[
平均絶対偏差 = \frac{\sum_{i=0}^{n}|x_{i} - \bar{x}|}{n}
\]</span>

あとは MathJax をインストールすれば良さそう。

MathJax | Beautiful math in all browsers. を参考に、以下の html をテンプレートに追加する。

<!-- MathJax -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script
  id="MathJax-script"
  async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
></script>

これで、以下のような Markdown ファイルを書けば、

title: "Mathjax sample"
date: 2021-08-01T20:29:10+09:00
markup: pandoc
---
...
$$
分散 = s^2 = \frac{\sum_{i = 0}^{n}(x_{i} - \bar{x})^2}{n-1}\\
標準偏差 = s = \sqrt{分散}
$$

数式がレンダリングされるようになる（改行が効いてないけど...）

もちろん、pandoc の出力は Hugo 標準の goldmark とは異なっており、ソースコードの出力などは期待しているものと異なるので、別途対応が必要になる。

Takanori IshikawaTakanori Ishikawa

Mathjax が $$...$$ を処理してくれるので、このへん に気をつければ、Hugo のデフォルトの Markdown でも数式を表示できなくはない。