【VSCode】Markdown PDFでstyleが反映されない時の対処法

みなさんこんにちは。

VSCodeでMarkdownファイルを作成して、Markdown PDFを使用してPDF出力する機会があるかと思います。

その際、Markdown内に <style> を記述して見出しの色や枠線などを設定しているにもかかわらず、PDFにstyleが反映されなくなったという現象が発生することがあります。

今回は、Markdown PDFでstyleが反映されない時の対処法についてご紹介したいと思います。

この記事はこんな人におすすめ

この記事はこんな人におすすめです！

• VSCodeでMarkdownファイルを作成している人
• Markdown PDFを使用してPDF出力している人
• 以前まで反映されていたstyleが突然反映されなくなった人
• Markdownから出力するPDFのデザインを調整したい人

といったところでしょうか。

VSCodeに関する過去の記事

VSCodeやMarkdownに関する内容については、過去の記事でもご紹介しておりますのでそちらもどうぞ。

現象の確認

例えば、Markdownファイルに以下のようなstyleを記述しているとします。

<style>
  h2 {
    background-color: #f0f0f0;
    padding: 10px;
    color: #004C97;
    border-left: 5px solid #004C97;
  }
</style>

# タイトル

## 見出し

本来であれば、PDF出力した際に見出し部分へ背景色や文字色などのstyleが反映されます。

ところがMarkdown PDFのアップデート後、同じ記述をしていてもstyleが反映されない場合があります。

Markdownのプレビュー画面ではstyleが反映されていますが、PDF出力すると上記のようにstyleが反映されず、<style>の記述自体がそのまま表示されてしまいます。

原因について

原因は、Markdown PDFのセキュリティ設定が変更されたことによるものです。

Markdown PDFでは、バージョン2.1.0からMarkdown内のHTMLを標準でサニタイズするようになり、デフォルト設定では <style> タグも対象となりました。

そのため、以前まで使用できていたstyleの記述が、そのままではPDFに反映されなくなる場合があります。

詳細については、Markdown PDF公式の変更履歴でも確認できます。

Markdown PDF CHANGELOG

解決手順

それでは設定を変更します。

1. VSCodeを起動します。
2. Ctrl + Shift + P を押してコマンドパレットを表示します。
3. 検索欄に settings json と入力します。
4. 「基本設定: ユーザー設定 (JSON) を開く」を選択します。
5. settings.jsonに以下の設定を追加します。

{
    "markdown-pdf.sanitize": "gfm-allow-style"
}

すでにsettings.jsonに他の設定が記述されている場合は、既存の設定を消さずに "markdown-pdf.sanitize": "gfm-allow-style" を追加してください。

設定は以上です。

Markdownファイルをもう一度PDF出力して、styleが反映されていることを確認してください。

設定内容について

"markdown-pdf.sanitize": "gfm-allow-style"

gfm-allow-style を指定すると、Markdown内に記述した <style> を使用できるようになります。

ただし、セキュリティ対策として追加された設定になりますので、外部から取得したMarkdownファイルなど、内容を信頼できないファイルを扱う場合は注意してください。

自分で作成したMarkdownファイルにstyleを記述してPDF化する場合は、今回の設定を覚えておくと便利かと思います。

最後に

いかがでしたでしょうか。

今回は、VSCodeのMarkdown PDFでstyleが反映されない時の対処法についてご紹介しました。

今まで使用できていた記述が突然使えなくなると原因を探すのに時間がかかりますが、今回の場合はMarkdown PDF側のセキュリティ設定の変更が原因となります。

設定自体はそれほど難しくありませんので、同じ現象が発生した際にお役立ていただければと思います。

開発依頼について

ココナラでWebスクレイピング開発サービスを出品しております。

自分で開発をしようと思ったけど、VBAでのネット記事が少なく困っている方も多いかと思います。

そんな方はいつでもお気軽にご相談ください。

また、本ブログからご依頼いただいた方については割引特典がございますので、

ご不明点と合わせてメッセージをいただけると幸いです。

Webスクレイピング以外にもWebアプリの開発サービスも出品しております。

こちらについても、本ブログからご依頼いただいた方については割引特典がございますので、

お気軽にご相談ください。

ご興味がある方はこちら！！

@KP16Wt9UOB97870