Embedding JavaScript
There are several ways to embed additional JavaScripts in Marked.
Contents
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 Additional Scripts window in . 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 in every document
You can include your own JavaScript from local files, CDNs, or by pasting raw code. To access this, open and click the Additional Scripts button.
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.
A note About Marked Conductor
The easiest way to implement custom JavaScript that varies between document types and locations is with the Marked Conductor. It allows you to use a YAML configuration to append scripts using “filters.” Check out the Conductor page for details, and see the sample config for examples.
Note that jQuery is already included in the preview window.
Including 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 top of the Additional Scripts window, you can include Mermaid for Markdown-like diagramming. Checking this box includes the specified version of the script, as well as the functions needed to initalize 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.
Adding Local JavaScript Files
Use the + button to select local files to add to the list, and - to delete.
Files will be loaded in the order they appear in the table, so if you need one script to load before another, use the ▲ and ▼ buttons to arrange them.
Adding JavaScripts from CDNs
You can add JavaScript CDN urls in the “Additional scripts” window. Enter CDN (or any web-accessible) urls, one per line. Don’t include any <script> tags, just the URL:
https://cdn.jsdelivr.net/gh/user/repo@version/file
https://cdn.jsdelivr.net/npm/micromark-extension-gfm-strikethrough@2.1.0/lib/html.min.js
Embedding Raw JavaScript
In the lower text field of the Additional Scripts window, you can insert raw JavaScript. This will be included within a <script></script> pair, so you don’t need to include that in the input. This field can contain any JavaScript command you need to initialize an included library, perform DOM alterations, or anything you want to do within a WebKit view. jQuery is already included for DOM manipulation convenience.
These scripts will only run when the window is first loaded. When the Preview updates, it’s done in place by replacing parts of the DOM, so scripts that need to act on the updated content should do so using Hooks.
Include in the raw JavaScript field a call like this:
Marked.hooks.register('update', function() { myCustomFunction(); });
All of Marked’s API functionality can be used in this field. (You can also use the API in any loaded scripts.)
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>
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: Preferences: General ▶
Search | Support Site | Knowledgebase | Legal | Privacy | Twitter