必要になるたび悩んでる気がするので、自分用にメモ。
結論を先に言っておくと、結局手堅く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でプラグインを読み込む方法がないので、変換のためのスクリプトを用意する。
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ではフォントや文字の大きさとかを設定している。手元で印刷できればいいので、互換性とかは全く考えていない。
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の変換はブラウザでできるが、もっといい方法を模索中