How to enable mermaid or html directive with marp in VS code

Hello

If you are using marp in vscode, and you have issue to render with mermaid js, or if you want to use html directive in your slide, then this tips might be helpful for you.

Tweak settings.json file

Go to settings.json file in your vscode and add the following line:

	"markdown.marp.enableHtml" : true

Test

Now in your slide, you can use any html tags. For example:

<h1>This is the heading 1</h1>

Or use mermaid class in the div.

Btw, if you use ```mermaid it won’t work here.

<div class="mermaid">
graph LR
	A --> B
	B --> C
</div>

Hope this tricks will help you.

Thanks 😊