【Visual Studio Code】Markdown PDF のスタイル(CSS)を変える方法

... のまえに、チョコさん。

パソコンの話はむつかしいので、さきににゃんこ |ω･)و ̑̑༉

f:id:herrscherinnen:20190405214607j:plain

Visual Studio Code は、 Markdown を扱えます。

Markdown

Markdown は見た目キレイに変換できるテキスト形式のフォーマットです。

Markdown の詳細はこちらです。

ja.wikipedia.org

Markdown ははてなブログでも使えます。

_{以降では、 Markdown で書かれたファイルを、 Markdown とします。}

Visual Studio Code には、たくさんの拡張機能があります。
拡張機能をインストールすることで、エディタの機能が増えます。

今回は Markdown を PDF にするので、 Markdown PDF をインストールします。

Markdown PDF

Markdown PDF では、Markdown を pdf、html、png、jpeg に変換できます。

Markdown PDF の詳細はこちらです。

github.com

ここから、本題です。

Markdown PDF でカスタマイズしたCSSを適用した PDF を出力する手順

Visual Studio Code のワークスペースを作る
ワークスペースの設定をする
CSS を作る
PDF を出力する

Visual Studio Code のワークスペースを作る

Visual Studio Code では、ファイルを開くことで、ファイルを扱えます。

また、フォルダを開くことで、複数のファイルを扱うこともできます。

ワークスペースでは、1つ以上のフォルダをまとめて扱うことができます。

ワークスペースは、フォルダを開いたあとメニューの File -> Save Workspace As... から作ることができます。

f:id:herrscherinnen:20190405072936p:plain

ワークスペースの設定をする

ワークスペースを作ると、ワークスペースの設定ができるようになります。

設定は、 Settings (Ctrl+, ) 、または、ワークスペースとして保存した code-workspace ファイルを開くことでできます。

初期設定はこのような内容になっています。

{
    "folders": [
        {
            "path": "vscode_workspace"
        }
    ],
    "settings": {}
}

ワークスペースの設定は、ユーザの設定と同じように、 settings に追記していきます。

{
    "folders": [
        {
            "path": "vscode_workspace"
        }
    ],
    "settings": {
        "markdown.preview.fontFamily": "'MigMix 1M', 'Yu Gothic', 'Meiryo', 'SFUIText-Light', 'HelveticaNeue-Light', sans-serif",
        "markdown.preview.fontSize": 16,
        "markdown.preview.lineHeight": 1.8,
        "markdown-pdf.styles": [
            "./markdown-pdf.css"
        ],
        "markdown-pdf.margin.top": "3cm",
        "markdown-pdf.margin.bottom": "2.2cm",
        "markdown-pdf.printBackground": true,
        "markdown-pdf.displayHeaderFooter": true,
        "markdown-pdf.headerTemplate": "<div style=\"position: relative; margin-top: 0.5cm; margin-bottom: 0.5cm; margin-left: 1cm; margin-right: 1cm; width: 100%;\"><img style=\"height: 48px;\" src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAAB2CAMAAAG2Zd7zAAAAS1BMVEUAAAAtUbYvT7ctUbEvT7MvT7ItUbMuUbMvT7QvUbMuUrQuUbUvULQvULMuUbQvULQuUbMuUbQuUbQvULMvULMuUbQvULQvULMvUbTRrKeAAAAAGHRSTlMAHCA4QFBUWGCAj5+rt7/Hz9vf4+fv8/eJW3VfAAAClElEQVR42u2cfVuDIBTFHVlpFi02F9//k/Zs60UU8HJBFDu/P/as8Ho4goBXXVUtjjYoUYCHEOJeI3HFusXMDlasvHkYW//hbseRnSeaUGwItO5q1f5a1+My9fNdGiUNrfhgNOik2FEJSnHWhvXQhvWKyt2MtqCuzGAbdcyB8gTr7srl9mmv9FmNeTI11SREeurSJAyejlp68WDjSBz+NlAenipAGAzm5zde948IJlSXpYzgxToJq3OUFnwftr9R1i2mw5B1v4qmrPcRfFsYi2F/Er8QlXVg4xUabO86MxMd5reyZtyopfmsMO9qsiDhdkQ24fHJ3AlWGIQhvGFhathRmjS5hOsqkn8hbE4r9YCHpYVdC0bHQkUyp8omWpjXQhAeCQ9HgU9ppZ/+K16YsvzgnnIQXlHYiUi61s6ekwcA3OYM7jlbsDArrIPwdoXHmYg+l3CiTswRZk36EsIQhjCEIZxs8A4XpiH1+Eo9m3B0fg3CEN6FsDt7u7Tw8BGH4R+XAGFFwJs9cuY1FxhGw4VnJwlac0AYwnsXnr8zMF1uyD5eWAw4ObPJE+KFCXmIZBMJhCEM4XTCgZdeOtUKJPTRPsWlAgAAAPYL+x7vag9txxvO+A5xB8MwDMMw7Icwbj7XCdmC4c7Lh37tknHWWzA8V4eEXVrCMAzDMAzDMAzDMAzD8LAOCdfSR+0vf9uA4cc2IWr9FE/eH7STOv5lVhiGYRiGYRgu33DjYq+GOXd5VOGGHSXOt+UCnxd5kQT6dDfdmrUNS8sDhBPeKRuR9rMFw6k2op0aMAzDMAzDMLxTw1lZ37ATFXQrPPuafBHDAQlaGIZhGIZhGIbhIMOhF9mnUMMiH6QEAIMww3nBD/QBAIrnC8vt+gzmA2P4AAAAAElFTkSuQmCC\" /></div>",
        "markdown-pdf.footerTemplate": "<div style=\"font-family: 'MigMix 1M', '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif; position: relative; color: #202020; border-top: 1px solid #202020; margin-top: 0.5cm; margin-bottom: 0.5cm; margin-left: 1cm; margin-right: 1cm; font-size: 9px; width: 100%;\"><div style=\"position: absolute; width: 100%; top: 0.3cm; text-align: center;\"><span class='pageNumber'></span> / <span class='totalPages'></span></div></div>"
    }
}

Header や Footer に画像をいれるときは、Base64 に変換して埋め込むことで表示できます。

CSS を作る

ワークスペースに設定した CSS ファイルを準備します。

img {
    width: 80%;
    margin-left: 10%;
}

h1 {
    padding-bottom: 0.3em;
    line-height: 1.2;
    border-bottom: 2px solid #2f51b4;
    position: relative;
    padding-left: 18px;
}

h1:before {
    background: #2f51b4;
    content: "";
    height: 28px;
    width: 8px;
    left: 0;
    position: absolute;
    top: 3px;
}

h2 {
    padding-bottom: 0.3em;
    line-height: 1.2;
    /* border-bottom: 1px solid #2f51b4; */
    position: relative;
    padding-left: 18px;
    /*margin-left: 16px;*/
}

h2:before {
    background: #2f51b4;
    content: "";
    height: 20px;
    width: 5px;
    left: 0px;
    position: absolute;
    top: 3px;
}

h3 {
    text-decoration: underline;
}