← Marked 2 Home

Marked Help

• Full Index
• Changelog

# 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@8.8.4/dist/mermaid.min.js"></script>


As of later 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>
Marked.hooks.register('update', function() { mermaid.init(undefined, \$('.mermaid')); });
</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 update live with your document saves.