VSCodeでMarkdownとMermaidを使うとプレビューで表示が乱れる問題の解消法

Markdown

はじめに

VSCodeでMarkdownファイルの中でMermaidを利用する際、「Markdown Preview Enhanced」を使ってプレビュー表示をみてみると、以下のようにloopタグが黒く塗りつぶされたり、色が灰色で正しく表示されません。これを解消する方法を紹介します。

正常な表示

動作環境
  • Windows 10
  • VSCode
VSCode拡張プラグイン

Mermaidのテーマを設定する

VSCodeの拡張機能>「Markdown Preview Enhanced」の右下の歯車をクリックし、「Configure Extension Settings」を開いてください。

 

Settingsの下の方にある「Markdown-preview-enhanced: Mermaid Theme」のタブを適当なタブに変更してください。一度変更すると「default」も正しく表示されるようになります。

 

適当なmdファイルを作成し、右上の一番左にあるアイコンをクリックし、プレビューを開いてください。

 

loopのタグが正常に表示され、色も付くようになります。

default

dark

forest

参考

 

トップページへ戻る

タイトルとURLをコピーしました