# 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.