VSCodeとマークダウンでEPUB、pdf出力を活用する（２）－標準のマークダウンにない表現をどうするか

前回は、マークダウンの原稿をEPUBやpdfへ出力し、Kindle本の出版まで用途を広げられることをお伝えしました。
そして、VSCode、markdown-preview-enhanced（MPE）、Pandocを組み合わせる方法があることを紹介しました。

今回は以下の表現力の問題について解説したいと思います。

本文以外はノンブル（ページ番号）程度しか表示できない（柱、つめなどを使わない）
標準のマークダウンでは市販の書籍の体裁に対して表現力が不足している

標準的な書籍の表現とマークダウン

メモ書きのようなマークダウンによるテキスト文書と、数百ページに及ぶ書籍では以下のような点で体裁に違いがあります。

行頭のインデントと段落の構成
ノンブル（ページ番号）、柱（書名・章題）、つめ（インデックス）など
ルビ
見出し、図表式へのナンバリング
目次の表現

書籍では段落の頭を全角でインデントしますが、マークダウンでは手入力になります。
見出しや図表式へのナンバリングも基本的には手入力になります。
手入力が煩雑なので、スクリプトで問題を解消します。

ノンブルや柱など本文以外の要素はCSSのマージンブロックと名前付きページセレクタを使用するとある程度は表現できます。
スクリプトで補助すると扱いやすくなりますが、それでもできない細かい制御があります。
とくに、縦書きで右から左へページが進む場合、Google Chromeがマージンブロックを適切にレンダリングできません。
そうした事を考慮すると、ノンブルだけ表示する使い方がよいでしょう。

ルビは標準的なマークダウンの記法がありません。
独自の実装が必要になりますが、でんでんコンバーターのような独自の記法や青空文庫の扱いをスクリプトにしてもよいでしょう。

目次は見出しにリーダー線とページ番号のある体裁が一般的です。
こうした体裁を実現するマークダウンの記法はないため、スクリプトで問題を解消します。

MPEにはparser.jsというファイルにJavaScriptを記述すると、動作をカスタマイズできます。
マークダウンやHTMLのパーサーを埋め込んで対処すれば、上記の問題をある程度、緩和できます。

VSCodeの設定

標準のマークダウンではできない表現が必要になるため、VSCodeのMPEの設定は次のようにPandocパーサーを使用する設定で利用します。

markdown-preview-enhanced.usePandocParser: チェックON

CSSの構造

上記のような問題に対応したり、レイアウトを制御するためのCSSは、ワークスペース以下、.crossnote/style.lessに記述します。

ただし、プレビュー画面、pdf出力（ペーパーバック）、EPUB出力（リフロー型電子書籍）でCSSを共通化するため、以下のようなスコープの扱いとします。

スコープ	役割
グローバルのスコープ	EPUB出力にも適用される共通のCSS
.markdown-preview以下	プレビュー画面とペーパーバックにだけ適用されるCSS
@media print以下	pdf出力にだけ適用されるCSS

サンプル

冒頭に挙げた問題に対応するJavaScriptをサンプルとして用意しました。
各フォルダの.crossnote/parser.jsにそのスクリプトがあります。

github - MPESamples

ルビは青空文庫の形式に対応するJavaScriptを記述しています。
ルビが付与された結果は、各フォルダのassets以下のpdfをみていただくとよいでしょう。

参考文献