1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Notion / Markdown で書いたレポートのpdf出力を改善する

Last updated at Posted at 2025-09-25

TL;DR

・Markdownでエクスポート -> VSCode 拡張機能「Markdown PDF」
・お好きなcssを用意して拡張機能の設定でパスを指定する
・Markdownファイルを開いている状態で右クリックメニューからpdf出力

筆者のケース(word風)

style.css
:root {
    --font-serif: 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', 'ヒラギノ明朝 ProN W3', 'MS PMincho', 'MS 明朝', serif;
    --font-sans: 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', sans-serif;
    --font-title: 'Times New Roman', 'Times', serif;
}

body {
    font-family: var(--font-serif);
    font-size: 10.5pt;
    line-height: 1.6;
    counter-reset: h2;
}

p {
    margin-top: 0em;
    margin-bottom: 0.2em;
    text-indent: 1em;
}

/* 最初のh1をタイトルとして扱う*/
body > h1:first-of-type {
    font-family: var(--font-title), var(--font-serif);
    font-size: 20pt;
    text-align: center;
    margin-top: 0em;
    margin-bottom: 0.5em;
}

/* 章見出し(h1)*/
h1 {
    font-family: var(--font-sans);
    font-size: 12pt;
    font-weight: bold;
    margin-top: 1.5em;
    margin-bottom: 1em;
    border-bottom: none;
    padding-bottom: 0;
}

/* 節見出し(h2)- 自動ナンバリング付き */
h2 {
    font-family: var(--font-sans);
    font-size: 11pt;
    font-weight: bold;
    margin-top: 0.5em;
    margin-bottom: 0em;
    counter-increment: h2;
    counter-reset: h3;
    position: relative;
}
h2::before {
    content: counter(h2) ". ";
    margin-right: 0.5em;
}

/* 小見出し(h3)- 自動ナンバリング付き */
h3 {
    font-family: var(--font-sans);
    font-size: 11pt;
    font-weight: bold;
    margin-top: 0.5em;
    margin-bottom: 0em;
    counter-increment: h3;
    position: relative;
}
h3::before {
    content: counter(h2) "." counter(h3) " ";
    margin-right: 0.5em;
}

/* その他の見出し */
h4, h5, h6 {
    font-family: var(--font-sans);
    font-size: 10.5pt;
    font-weight: bold;
    margin-top: 0.5em;
    margin-bottom: 0em;
}

/* リスト */
ul, ol {
    margin-top: 0em;
    margin-bottom: 0em;
    margin-left: 0;
    padding-left: 1em;
}
settings.json
    "markdown-pdf.styles": [
        "path/to/your.css" 
    ],
    "markdown-pdf.headerTemplate": " ",
    "markdown-pdf.footerTemplate": "<div style='font-size: 9px; margin: 0 auto; color: #888;'> <span class='pageNumber'></span> / <span class='totalPages'></span></div>",
    "markdown-pdf.margin": {
        "top": "2.5cm",
        "bottom": "2.5cm",
        "left": "2cm",
        "right": "2cm"
    },

問題意識

notionがシェアを広げているようで,大学生,大学院性の間でもかなり使われているような印象を受けます.
notionは雑に書くにも丁寧に書くにも使えて管理も楽,と筆者も気に入って利用しているのですが,一点明確な弱点があります.

PDF出力です.

記法はmarkdownベースで,webまたはアプリ上で見やすい形式に特化しているため,印刷や提出のためにpdfで書き出そうとすると,フォントやフォントサイズ,行間などの調整が細かくはできなかったり,notionデータベースのプロパティもまとめて表示されたり,不満が多いです.ここでは,markdownで出力してから外部ツールでpdfレンダリングを行う方法で,notionを普段使いしながら出力だけを外部ツールに任せる感じのワークフローを考えていきます.

notionでmd書き出し

notionのエクスポートメニューには,PDF,HTML,Markdownの3種があり,PDFは前述の通り使い物になりません.
HTMLでも良いのですが,notionの記法がMDベースなのと,MDの方が言語モデルに修正させたりも楽なので,MDを使います.

Markdown PDFでpdf化

今回はVSCode拡張機能の "Markdown PDF" でpdfにします.

一度HTMLに変換してからcssを参照してpdf出力してるっぽいですね.
cssで書式が調整できるので,一度用意すればそれなりの品質で統一できます.

雑に使ってもこのくらいの出来にはなるのでLLMにcssを細かく調整させれば普段使いもできそう.
test.png

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?