【VS Code】Markdownファイルを縦書き・A4横設定でPDFエクスポート

2023年10月29日2024年4月30日

PDFエクスポートの情報が少なかったので、備忘録を兼ねてまとめておきます。

結論（大まかな手順）

VS Codeに拡張機能「Markdown PDF」を入れる
縦書き用CSSを作成
Markdown PDFの設定項目で2で作成したCSSを指定
PDFエクスポート

詳しい手順

1:VS Codeに拡張機能「Markdown PDF」を入れる

VS Codeを起動し、拡張機能「Markdown PDF」を導入します。

2:縦書き用CSSを作成

CSSファイルを作成し、下記の項目をペーストしてください。

body {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 24pt;
    line-height: 3rem;
}

@page {
    size: A4 landscape;
    margin: 29.7mm 21mm;
}

bodyで縦書きとフォントサイズの設定、@pageで印刷設定をします。

初期設定のフォントサイズで印刷を行うと、文字が小さくて読めないため、印刷用のフォントサイズと余白を調整しています。（校正用に行間を広くしています。狭めたいときはline-heightの数値を小さくしてください）

@page設定は、landscapeで紙を横に配置し、marginは10%分の余白を取っています。（%設定でもいいかもしれません）

3:Markdown PDFの設定項目で2のCSSを指定

VS Codeの設定（Ctrl+,）を開きます。設定項目の検索窓に「markdown-pdf:styles」と入力し、検索を行います。「設定項目の追加」ボタンをクリックし、2で作成したCSSのパスを入力します。

4:PDFエクスポート

エクスポートしたいMarkdownファイルをVS Codeで開きます。Ctrl+Shift+Pでコマンドパレットを開き「pdf」と入力・検索し、「Markdown PDF:Export(pdf)」という項目が出てきたら実行します。

Markdownファイルと同じディレクトリに出力されるので、PDFファイルを開いて状態を確認しましょう。

参考サイト

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！