Embedding JavaScript (e.g. Mermaid)

You can include scripts in your document using <script> tags. This can be useful for things like Mermaid diagrams:

<script src="https://unpkg.com/mermaid@10/dist/mermaid.min.js"></script>

As of recent versions, Marked no longer performs a full page refresh when updating content, but rather injects the new content into the DOM without requiring a page load. This means that scripts that were included that trigger on page load won’t be re-triggered when content is updated. Marked provides a “hooks” feature to accomodate this. To register a hook, you need to include a second script block calling the Marked.hooks.register() function, which accepts a trigger, in this case ‘update’, and a function to execute.

<script src="https://unpkg.com/mermaid@10/dist/mermaid.min.js"></script>
<script>
	mermaid.initialize({ startOnLoad: true });
	Marked.hooks.register('update', function() { mermaid.run(); });
</script>

Now, whenever an update is performed, the passed function will be executed. As long as the script you’re running has an init or render function of some kind, you can call it with a hook and have it render every time your document saves and an update is triggered.

Next up: Preferences: General ▶

---

Search | Support Site | Knowledgebase | Legal | Privacy | Twitter