Typstでブログを書く

1. はじめに

Typst、とてもいいですよね。 Markdownのような書き心地でfigureやfootnoteや参考文献への参照等が書けるためとても気に入っています。 そのTypstですがバージョン0.13でHTMLエクスポート機能が実験的に実装され、バージョン0.14では（依然として発展途上の機能ではあるものの）その機能が大幅に強化され、変換対象の関数も増えた上に、html.elemを使うことで直接HTMLタグを記述できるようになりました。

そこで今ならTypstでブログ作れるんじゃねぇかと考えたのです。 作ったのがこのブログです。

TypstでHTMLを生成しCSSで色付けるだけなので技術的に難しいことはないのですがいくつか落とし穴があるのと、HTMLエクスポートを実際に使用してみた内容の日本語の記事がみあたらなかったので記事を残すことにしました。

2. 実装

2.1. Typstのテンプレートを作成する

文書を単純にHTMLエクスポートするなら普通にtypst compile --features html --format html input.typすればよいのですが、この方法でコンパイルするとTypstの内容はすべてbody内に記述されます。 そのため、headなどにいろいろ記述する場合はhtml.htmlを使用してエクスポートするHTMLの構造を一から記述する必要があります。 このモードはカスタムHTMLモードと言うそうです。

また、0.14時点ではalign等のレイアウト系命令がエクスポート時に無視されるため、そのあたりはCSSを使用して実装する必要があります。

2.2. Zoteroのエクスポート形式にHayagrivaを追加、キーをWebサイトメインに修正

まずTypstのbibliographyはBibLaTeXとHayagrivaの二つの形式をロード可能です。 HayagrivaというのはTypstが開発している文献管理用の形式でYAMLを使用しています。

ZoteroのエクスポートはHayagriva（Typstが開発しているbibliographyの管理用形式）に対応していない。

作成しましょう。Web用にカスタマイズしてあります。

2.3. GitHub Actionsを作成しGitHub Pagesで公開する

typst compile --features html --format html --root . (ディレクトリ)/index.typ public/(ディレクトリ)/index.html

でおｋ！

3. 詰まった点・落とし穴

3.1. 数式のエクスポートが未実装

現時点では数式のエクスポートが未実装です。 しかし、数式をSVG画像に変換してHTMLに埋め込むことができます。 [1]

show math.equation.where(block: false): it => {
  html.elem("span", attrs: (role: "math"), html.frame(it))
}
show math.equation.where(block: true): it => {
  html.elem("figure", attrs: (role: "math"), html.frame(it))
}

3.2. htmlを一から構築する場合footnoteが使用できない

html.htmlでファイルを生成する場合、footnoteを使用するとエラーが出ます。 幸いcounterは使えるので自分で実装することで対処できます。

let note-counter = counter("my-footnote")
show footnote: it => {
  note-counter.step()
  let num = note-counter.get().first()
  html.span(class: "footnote-wrapper", {
    html.span(class: "footnote-marker", "[" + str(num) + "]")
    html.span(class: "footnote-content", it.body)
  })
}

参考文献

• [1] 「HTML Export · Issue #721 · typst/typst」. [Online]. 入手先: https://github.com/typst/typst/issues/721#issuecomment-2817289426