Vivliostyleで数式を組み込んでみた

前回、CSS組版の Vivliostyle をインストールしました。

CSS組版のVivliostyleを使ってみたーツールのインストールー

今回は、Vivliostyle で数式を組み込む方法を試してみたいと思います。数式はTexの表記方法で組み込むことができます。Texで表現された数式を '$$' で囲みます。前回作ったプロジェクト"mybook"の中にある「吾輩は猫である」の序文が記載された 'manuscript.md' に数式を組み込んでみましょう。

# {吾輩|わがはい}は猫である。 {吾輩|わがはい}は猫である。名前はまだ無い。 $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ どこで生れたかとんと{見当|けんとう}がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という>人間中で一番{獰悪|どうあく}な種族であったそうだ....

このドキュメントをビルドします。ビルドの最中に大量に ”A network error occurred.” というメッセージが出ますが、ビルドは成功しているようです。

$ cd mybook
$ npm run build

> mybook@0.0.0 build
> vivliostyle build

 manuscript.md {吾輩|わがはい}は猫である。
 manuscript.md {吾輩|わがはい}は猫である。
[×] A network error occurred.
[×] A network error occurred.
[×] A network error occurred.
... 省略 ...
[×] A network error occurred.
[×] A network error occurred.
[×] A network error occurred.
[×] A network error occurred.
? Processing PDF
mybook.pdf has been created.
〓 Built successfully.

実際に出力がどうなっているのか見てみましょう。次のコマンドで出力結果を見ることができます。

$ npm run preview

> mybook@0.0.0 preview
> vivliostyle preview

〓 Up and running ([ctrl+c] to quit)

次のようにきれいに数式を埋め込むことができました！



数式がこうやってきれいに組み込めると、ちょっとテンションあがりますね。少しずつ使い方を学んでいきたいと思います。

---

Web技術で「本」が作れるCSS組版 Vivliostyle入門

• 出版社/メーカー: シーアンドアール研究所
• 発売日: 2023/05/12
• メディア: Kindle版

わかりやすく書ける！技術同人誌初心者のための執筆実例集 技術の泉シリーズ (技術の泉シリーズ（NextPublishing）)

• 作者: 石井 葵
• 出版社/メーカー: インプレス NextPublishing
• 発売日: 2019/07/12
• メディア: Kindle版

プロジェクト思考で行こう！～技術同人誌を作る技術 (技術の泉シリーズ（NextPublishing）)

• 作者: 稲山 文孝
• 出版社/メーカー: インプレスR&D
• 発売日: 2019/09/06
• メディア: Kindle版

---

タグ：技術同人誌 vivliostyle