Nekonote

Nekonote(ねこのて)もかりたい

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

このエントリーをはてなブックマークに追加

Visual Studio CodeMarkdown 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、pngjpeg に変換できます。

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

github.com


ここから、本題です。


Markdown PDF で カスタマイズした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;
}

PDF を出力する

あとは、Markdown PDF で PDF に変換するだけです。

f:id:herrscherinnen:20190405213517p:plain


ありがとうございました。

おすすめ 記事