feat: Make the examples interactive in the documentation site

[sidharthv96]

:bookmark_tabs: Summary

Ctrl/Cmd + Enter and a run button is added.

:straight_ruler: Design Decisions

The feature was first implemented in https://github.com/mermaid-js/mermaid/pull/5330 by @nalgeon.

This is a simplified version without introducing additional dependencies.

:clipboard: Tasks

Make sure you

• [x] :book: have read the contribution guidelines
• [ ] :computer: have added necessary unit/e2e tests.
• [ ] :notebook: have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• [x] :bookmark: targeted master branch

[netlify[bot]]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	08a7f662ea305c19efb950b893933f6b0f0350f9
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/65eeec1c3ace890008320d43
😎 Deploy Preview	https://deploy-preview-5376--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 77.29%. Comparing base (3df3f2a) to head (08a7f66). Report is 18 commits behind head on master.

Additional details and impacted files

[](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5376?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) ```diff @@ Coverage Diff @@ ## master #5376 +/- ## =========================================== + Coverage 44.67% 77.29% +32.62% =========================================== Files 25 175 +150 Lines 5341 14531 +9190 Branches 27 868 +841 =========================================== + Hits 2386 11232 +8846 - Misses 2954 3091 +137 - Partials 1 208 +207 ``` | [Flag](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5376/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | Coverage Δ | | |---|---|---| | [e2e](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5376/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | `82.40% <ø> (?)` | | | [unit](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5376/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js) | `43.37% <ø> (-1.31%)` | :arrow_down: | Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js#carryforward-flags-in-the-pull-request-comment) to find out more. [see 173 files with indirect coverage changes](https://app.codecov.io/gh/mermaid-js/mermaid/pull/5376/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=mermaid-js)