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

PDFエクスポート周りの情報が少なかったのと、ピンポイントな需要がありそうだったので、備忘録を兼ねてまとめておきます。

目次

結論(大まかな手順)

  1. VS Codeに拡張機能「Markdown PDF」を入れる
  2. 縦書き用CSSを作成
  3. Markdown PDFの設定項目で2で作成したCSSを指定
  4. 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で印刷設定をします。

初期設定のフォントサイズで印刷を行うと、文字が小さくて読めない状態になりました。

そのため、印刷用のフォントサイズと余白を調整しています。

@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をコピーしました!
目次