📖

Markdown で技術同人誌を書く

2023/10/17に公開

ソフトウェアに関する記事やコラムを書くなら、Markdown 記法はとても良い選択です。見た目の統一感があり、覚えやすく、軽量です。

物理書籍や電子書籍を執筆する手段にはいくつかの選択肢があるようですが、この Markdown での書きやすさ を活かしたものはあまり存在していませんでした。
ということで Visual Studio Code(以下 VS Code)向けに制作したエクステンションを紹介します。

https://marketplace.visualstudio.com/items?itemName=abechanta.vscode-ext-paged-media

Markdown Paged Media[1] エクステンションは、Markdown で書いた原稿から入稿用データ(印刷用 PDF)を生成することができます。
プロジェクト Wiki にあるクイックスタートを一部抜粋して、使い方を簡単に説明しましょう。

印刷レイアウトでプレビューする

原稿例である example1.md の先頭には、style タグがあります。
このように Markdown には HTML タグを含められます。

example1.md のスタイル指定

ここではページサイズを A4 版に指定しています。
example1.md にカーソルがある状態で、コマンドパレットから Markdown: Open Preview を選択するか、あるいは Ctrl + Shift + V とタイプしてみましょう。

初回はアクセス許可が必要ですが、Markdown Preview を開き直すと、今度は原稿がページに割り付けられた状態で表示されるはずです。

Markdown Preview を開いたところ

水色の線はページの輪郭と余白を示しています。 これはプレビューのときにだけ表示され、入稿用データには反映されません。

入稿用データをエクスポートする

example1.md にカーソルがある状態で、コマンドパレットから Paged Media: Export in PDF Format を選択するか、あるいはコンテキストタイトルメニューから Export in PDF Format をクリックしてみましょう。
トーストが表示されてエクスポートが始まります。

初回はブラウザーのダウンロードが発生しますが、エクスポートが成功していれば example1.md があるのと同じフォルダーに PDF が出力されます。
エクスポートされた PDF ファイルの確認には、ブラウザーの PDF ファイル閲覧機能などを利用してください。

Chrome で PDF ファイルを確認しているところ

Markdown Paged Media エクステンションの基本的な機能はこれだけです。

体裁の調整

書籍としての体裁や装飾を調整するには、CSS スタイルを追加指定する必要があります。
製本時によく使われる標準的なものは、プリセットスタイルとしてエクステンションに組み込まれているので、VS Code の設定エディターで使いたい機能を選択していくだけです。

設定エディター

いくつか適当にスタイルを指定すると、↓こんな体裁になります。

スタイルをいくつか指定したところ①

ページ割り、ページ番号(隠しノンブル付き)、見出しの装飾、裁ち切りとトンボ、目次の生成などが反映されています。

スタイルをいくつか指定したところ②

ページ上端の章題(柱)、見出しの番号付け、コードブロックのキャプションと図表番号などが反映されています。

このように Markdown Paged Media エクステンションは、印刷所への入稿に必要な条件の多くをサポートしてくれます。
ぜひ試してみてください[2]

脚注
  1. 以前は "W3C Paged Media Viewer" という名称でした。 ↩︎

  2. エクステンションはプレビュー版ですので ご利用の際はご了承ください。入稿実績はあります。 ↩︎

Discussion