本記事は、めんどい太郎の Advent Calendar 2023 19日目の記事です。
はじめに
この記事は初心者が書いています。
今回はVSCodeでMarkdownファイルをPDFに変換する方法をご紹介いたします。
拡張機能をインストール
まずはVSCodeに拡張機能をインストールします。
こちらのMarkdown PDFという拡張機能です。
リンクを開いてインストールするか、Ctrl+Pでext install yzane.markdown-pdfでもインストールできます。
CSSファイルのダウンロードと加工
GitHubのMarkdownのCSSファイルをダウンロードします。
こちらのレポジトリから
github-markdown-dark.cssかgithub-markdown-light.cssをダウンロードします。
ダークモードかの違いです。お好きな方を。
そうしたら、ダウンロードしたCSSファイルを開きます。
こちらの記事1を参考にCSSファイルを加工します。
- すべての.markdown-を削除(空文字で置換すると楽)する
- code blockの折返しを設定する。
とのことです。
code blockの折り返しを設定するというのは
body pre>code {
padding: 0;
margin: 0;
font-size: 100%;
word-break: normal;
- white-space: pre;
+ white-space: pre-wrap;
background: transparent;
border: 0;
}
ということのようです。
加工したらOKです。
ここで注意
このCSSファイルはワークプレイス内においておく必要があります。
おすすめはワークプレイスの一番上においておくのをおすすめします。
こんな感じ
.
├── Hoge
| └── HogeHoge.md
├── hoge.md
└── github-markdown-dark.css
拡張機能の設定
VSCodeの設定を開きます。
Ctrl+,で開けます。
そうしたら右上の「設定(JSON)を開く」でJSONを開きます。
以下を追記します。
"markdown-pdf.includeDefaultStyles": false,
"markdown-pdf.styles": ["./github-markdown.css"],
./github-markdown.cssは-darkもしくは-ligthのどちらかを指定しておきましょう。
これでOKです。
変換する
あとはMarkdownファイルを開いて右クリックすると、Markdown PDF: Export (html)やMarkdown PDF: Export (pdf)でHTMLファイルやPDFファイルに変換できます。
便利！
終わりに
GitHubのMarkdownのCSSを適応すると見た目が良くなります。
Qiitaの物があればよかったのですがしょうがない。