Runtime Dependencies
This page lists the external resources NanoMD pulls in on load, the names it defines in global scope, and what to watch for offline or under a strict CSP.
Auto-inserted Resources
As soon as the bundle runs, src/data.js appends these elements to <head>; they are neither optional nor configurable:
| Resource | Source | Used for |
|---|---|---|
| Material Symbols Outlined | fonts.googleapis.com (plus a fonts.gstatic.com preconnect) |
Toolbar, alert and export dialog icons |
| Mermaid 11.4.1 | cdn.jsdelivr.net/npm/mermaid@11.4.1 |
Mermaid diagrams |
| code-prettify | cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js |
Code highlighting (global PR) |
NanoMD.css 1.11.6 |
cdn.jsdelivr.net/npm/@pardnchiu/nanomd@1.11.6 |
Component styles |
Each resource comes with a preload or preconnect <link>. When document fires load, mermaid.initialize({ startOnLoad: false, ... }) is called and a copyright notice is printed to the console.
Effect on Rendering
| Situation | Result |
|---|---|
| CDN unreachable (offline, intranet, blocked by CSP) | PR is never declared, so the viewer's 50 ms check throws a ReferenceError every tick and the timer never stops; HTML still renders, but the scroll position is not restored, code is not colored and Mermaid is not converted |
| Mermaid not loaded | With PR present but no mermaid, a ReferenceError is thrown once at the end of each render; the document load handler throws as well |
| Icon font not loaded | The toolbar shows icon names as text (e.g. format_bold) |
For offline use, place window.PR (a self-hosted code-prettify) and window.mermaid on the page first; NanoMD does not check where they come from, only that the globals exist.
CSP Allow-list
| Directive | Must allow |
|---|---|
script-src |
https://cdn.jsdelivr.net |
style-src |
https://cdn.jsdelivr.net, https://fonts.googleapis.com, 'unsafe-inline' (constructors insert <style>) |
font-src |
https://fonts.gstatic.com |
connect-src |
https://vimeo.com (Vimeo thumbnails) |
frame-src |
https://www.youtube.com, https://player.vimeo.com |
img-src |
https://i.ytimg.com, the Vimeo thumbnail host, data: |
Global Names
Loading NanoMD.js as a classic <script> puts every top-level declaration in global scope; importing NanoMD.esm.js as a module keeps them module-scoped, but the public classes and window properties are still written to window:
| Kind | Examples |
|---|---|
| Public classes | MDEditor, MDViewer, MDParser, PDMarkdownEditor, PDMarkdownViewer |
| Internal functions | createElement, transToHTML, UUID, escapeHTML, setLink, ... |
| Internal constants | css, deploy, cloud, isDarkMode, elementUUIDMap, ... |
window properties |
Short names such as _0, $0, _0_, __0, _a generated by an alphabet loop |
With the classic script build, if another classic script on the page declares the same identifier globally with const / let / class (for example createElement or css), whichever loads second throws SyntaxError: Identifier has already been declared. Wrapping your own code in a module or function scope avoids this.