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

必要になるたび悩んでる気がするので、自分用にメモ。
結論を先に言っておくと、結局手堅く[markdown-it](https://github.com/markdown-it/markdown-it)を使った。

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

## 前提条件
- Windows 10
- VSCode
- Node.js v8.10.0

## エディタ(VSCode)の設定
VSCodeはデフォルトでプレビュはできるけど、数式の表示はできないので[Markdown+Math](https://marketplace.visualstudio.com/items?itemName=goessner.mdmath)をインストールする。他にも便利そうな拡張がいろいろあるけど、最低限必要なのはこれだけ。
そのものズバリ[MarkdownからPDFを作る拡張](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)もあるが、残念ながら数式に対応してないので今回は見送り。

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

``` javascript: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ではフォントや文字の大きさとかを設定している。手元で印刷できればいいので、互換性とかは全く考えていない。

```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](https://marketplace.visualstudio.com/items?itemName=vscodevim.vim)バインディングを使っている関係なのだけど、インサートモードからノーマルモードに戻ってきたら自動でIMEがオフになって欲しい。
Google日本語入力でESCをIMEオフにバインディングしても、一回の押下ではIMEがオフになるだけで、ノーマルモードへの移行にはもう一回押す必要があるのでうまくない。
[AutoHotkey](https://autohotkey.com/)を使ってなんとかしている人が多いみたいだけど、黒魔術感がすごくてあんまり気が進まない。
いっそMarkdownの編集中はVimモードをオフにしたほうがいいかもしれない。

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

### HTML -> PDF
いちいちブラウザで表示して印刷するのはかっこ悪いので、コマンド一発で変換できるようにしたい。
[PhantomJS](http://phantomjs.org/)は開発終了したらしいので、今だったらHeadless Chromeとか使うんだろうか。

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