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

1 month ago


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


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

Hope this tricks will help you.

Thanks 😊

Thouhedu Islam Suchi

Thouhedul Islam

Laravel Developer

Hi, I am a Laravel Developer with a passion for web development. I specialize in PHP, particularly Laravel, as well as Javascript, MySql, and other cutting-edge web technologies.

During the day, I work for GLEIF, where I apply my skills and experience to develop innovative web applications. At night, I enjoy contributing to the community and solving problems. You can often find me on Laracasts, where I love to stay active and keep up-to-date with the latest trends in web development.

I am excited about the potential of technology and its power to transform people's lives.