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

Markdown

2019.10.08

はじめに

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

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

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

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

# Markdown Preview Enhanced


```mermaid
sequenceDiagram
    A->>B: Hello A, how are you?
    loop hoge
        B-->>A: Yes!
    end
```

# Markdown Preview Enhanced

```mermaid

sequenceDiagram

A->>B: Hello A, how are you?

loop hoge

B-->>A: Yes!

end

```

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