Embedding JavaScript
There are several ways to embed additional JavaScripts in Marked.
Including JavaScript Per-Document
You can include scripts in a single document using <script> tags in the content itself. This can be useful for things like Mermaid diagrams that you don’t need in every document:
<script src="https://unpkg.com/mermaid@10/dist/mermaid.min.js"></script>
Note that Mermaid can be automatically included and initialized in every document from the . See Including Mermaid and Other Scripts.
If you’re using MultiMarkdown as your Processor, you can include scripts in the metadata and they’ll be inserted in the document. Because Marked outputs “snippet” only, the key XHTML Header is not ideal. Instead, use CSS Header and the scripts will be inserted at the bottom of the document.
CSS Header: <script src="file.js"></script>
To make included scripts refresh when the content changes, see Hooks.
Including JavaScript
You can include your own JavaScript from local files, CDNs, or by pasting raw code. To access this, open and click the Custom Rules button.
Set up a new Custom Rule or add scripts to an existing one. To have scripts added to every file, set the predicate to “filename contains *”.
The Actions editor for a Custom Rule has three options for including scripts:
- Insert JavaScript File
- Lets you select a local file to insert at the end of the document
- Insert JavaScript from URL
- Lets you include a CDN or other remote URL, which will create a
<script>tag at the end of the document with the URL linked - Insert JavaScript
- Opens a code editor where you can write/paste your own JavaScript code
These scripts will be inserted at the end of the preview, before the document tag. If you need to call an init function or update every time the preview updates, see Including Raw JavaScript, and familiarize yourself with Marked’s hooks.
Mermaid and Other Scripts
jQuery is included by default, and you can use it in any scripts you add to Marked using any of the below methods.
At the bottom of the {% prefspand Style %}, you can include Mermaid for Markdown-like diagramming. Checking this box includes the script from a CDN, as well as the functions needed to initialize it and update on every save.
I’ll add more default options if there are enough requests for a particular library. If there’s something you’d like to see included, please let me know on the BrettTerpstra.com forum or via the support site.
Hooks
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>
All of Marked’s API functionality can be used in this field. (You can also use the API in any loaded scripts.)
Now, whenever an update is performed (whenever the watched source file is saved), 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: Settings: General ▶
Search | Support Site | Knowledgebase | Legal | Privacy | Twitter