Markdown Preview Enhanced で 図 の プレビュー がうまくいかない 時の 対処法

目的

• VisualStudioCodeにてmermaidをコーディングしてMarkdown Preview Enhancedでプレビューすると図の色がうまく出ず、出力しても色がうまく出ないときの解決方法をまとめる。

本記事はtykeさんのMPE(MarkdownPreviewEnhanced)でmermaidのグラフが真っ黒になる問題の情報をもとに作成しています。

tykeさん記事にしていただき本当にありがとうございます。お礼申し上げます。

この記事のターゲット

• mermaidで図を作ったが、Markdown Preview Enhancedでのプレビューで色がおかしく(下記画像)なってしまった方
  

解決方法

• Markdown Preview Enhancedはインストールしてそのままだと一部の図の色合いがおかしくなる。
• プラグインの設定を修正してあげると正常に表示できる。

1. プラグインバーを開く(赤矢印部分をクリック)
   

2. Markdown Preview Enhancedの欄を探し、歯車マークをクリック
   

3. 「拡張機能の設定を構成します。」をクリック
   

4. Markdown Preview Enhancedの設定が表示されたらスクロールして「Markdown-preview-enhanced:Mermaid Theme」の設定を見つける
   

5. プルダウンメニューからdefault以外をお好みで選択する。
   
   

6. mermaidのコードを再度プレビューして正常に表示されていることを確認する。
   

まとめ

• Markdown Preview Enhancedでmermaidを正常に表示させることができた。