数式を含む簡単な文章をMarkdownで書く(Windows) #Node.js

必要になるたび悩んでる気がするので、自分用にメモ。
結論を先に言っておくと、結局手堅くmarkdown-itを使った。

動機

数式を含む文章を書いてPDFを作りたいけどLaTeXで書くほどでもない、というときにMarkdownでサクッと書けるようにしたい。
その際、LaTeXはいろいろ大変そうなので、HTML+CSSで手軽にスタイルの設定をしたい。

前提条件

Windows 10
VSCode
Node.js v8.10.0

エディタ(VSCode)の設定

VSCodeはデフォルトでプレビュはできるけど、数式の表示はできないのでMarkdown+Mathをインストールする。他にも便利そうな拡張がいろいろあるけど、最低限必要なのはこれだけ。
そのものズバリMarkdownからPDFを作る拡張もあるが、残念ながら数式に対応してないので今回は見送り。

Markdown -> HTML

定番らしいmarkdown-itを使ってHTMLに変換する。
数式用のプラグインにはmarkdown-it-katexを使う。MathJaxじゃなくてKaTeXなのはMarkdown+Mathと統一するため。
markdown-itにはCLIでプラグインを読み込む方法がないので、変換のためのスクリプトを用意する。

compile.js

const md = require('markdown-it')({
    html: true
});
const mk = require('markdown-it-katex');
md.use(mk);

const fs = require('fs');

fs.readFile('./report.md', (err, src) => {
    if (err) throw err;
    src = src.toString();
    let result = md.render(src);
    console.log(`
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">
    <link rel="stylesheet" href="./report.css"/>
</head>
<body>
    ${result}
</body>
</html>
    `);
});

node ./compile.js > result.htmlとかしてやれば同じディレクトリのreport.mdが読み込まれ、result.htmlに出力される。
入力ファイル名がべた書きだったりHTMLの雛形がハードコーディングされてたりいろいろ汚いけど、動けばいいやの精神で今は目をつぶる。きれいにまとめるのは次の機会に。
katex.cssはKaTeX用のスタイルシートらしい。フォントも用意してくれててよしなにやってくれるようだ。
report.cssではフォントや文字の大きさとかを設定している。手元で印刷できればいいので、互換性とかは全く考えていない。

report.css

body * {
  font-size: 11pt;
}

body {
  padding: 2.5em;
  width: 210mm;
}

h1, h2, h3 {
  font-family: "Georgia";
}

p {
  font-family: "Yu Gothic M";
  line-height: 1.2em;
}

code {
  font-family: Consolas;
  line-height: 1.2em;
}

h1 {
  font-size: 200%;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
h2 {
  font-size: 150%;
}
h3 {
  font-size: 120%;
}

pre {
  border: solid 1px;
  padding: 1em;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  font-size: 80%;
}

p {
  text-indent: 1em;
}

.katex-display {
  margin: 1em;
}

.image {
  text-align: center;
}

HTML -> PDF

Chromeで表示してCtrl+Pで印刷(ダサい)。めでたくPDFが生成される。

納得いってないところ

IME周り

VSCodeの拡張機能としてVimバインディングを使っている関係なのだけど、インサートモードからノーマルモードに戻ってきたら自動でIMEがオフになって欲しい。
Google日本語入力でESCをIMEオフにバインディングしても、一回の押下ではIMEがオフになるだけで、ノーマルモードへの移行にはもう一回押す必要があるのでうまくない。
AutoHotkeyを使ってなんとかしている人が多いみたいだけど、黒魔術感がすごくてあんまり気が進まない。
いっそMarkdownの編集中はVimモードをオフにしたほうがいいかもしれない。

記号の入力

日本語入力をしているとMarkdownに必要な記号(#とか[]とか)が全角になってしまってタイピングのテンポが崩れるのがつらい。
Google日本語入力の設定でなんとかならないかと思っていじったら「入力補助」から変換前の記号の全角半角が設定できたのでたった今解決した。

HTML -> PDF

いちいちブラウザで表示して印刷するのはかっこ悪いので、コマンド一発で変換できるようにしたい。
PhantomJSは開発終了したらしいので、今だったらHeadless Chromeとか使うんだろうか。

まとめ

VSCodeで数式入りのMarkdownを書くときはMarkdown+Mathを入れればプレビューできる
markdown-itとmarkdown-it-katexを使えば、手軽に数式を含むMarkdownをHTMLに変換できる
HTMLからPDFの変換はブラウザでできるが、もっといい方法を模索中