Browser-native single-page markdown viewer with no local package dependencies.
This viewer boots from a nearly empty index.html, loads its rendering libraries from a CDN, fetches all configured markdown pages up front, and presents them as a fast static-host-friendly SPA.
- bare HTML bootstrap: empty favicon, one inline module script, nothing else in the page
- no local package/runtime dependencies; third-party libraries are loaded from a CDN at runtime
- top-level
awaitbootstrap that fetches every configured markdown page in parallel before the interface settles - pre-rendered page swaps so moving between configured pages is immediate after startup
- hash routing in
#page/sectionform with section deep links and active-section syncing while you scroll - page labels sourced from the first
# H1in each markdown file - pinned page navigation plus an independently scrolling table of contents generated from headings
- safe markdown defaults: raw HTML disabled, external links opened safely, and images lazy-loaded with safer fetch/render hints
- syntax highlighting, code block headers, whole-block copy, CLI per-command copy, and multiline CLI command copy grouping
- styled tables, blockquotes, lists, and code surfaces so the viewer feels like a docs reader rather than a raw markdown dump
index.html is the minimal local sample:
<!doctype html>
<html>
<head>
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E">
<script type="module">
import config from "./src/viewer.js";
await config({
overview: "./docs/overview.md",
cli: "./docs/cli.md"
});
</script>
</head>
<body></body>
</html>Each key becomes the route segment in #page/section, and each value is the markdown URL to fetch.
Cross-origin markdown URLs work too, as long as the browser can fetch them successfully.
sample.html is a second example that points at cross-origin markdown sources.
- each markdown page must start with
# H1 - headings generate the per-page table of contents automatically
- duplicate heading slugs are uniquified automatically
- links to configured markdown pages are routed in-app when they match a configured source URL
- CLI fences should use
bash,sh,shell,zsh,powershell,ps1, orcmd
- regular code blocks: one subtle copy action for the entire block
- CLI blocks: one subtle copy action per command line
- multiline CLI commands copy as a full command when a continuation marker is used:
\for shell/bash/zsh`for PowerShell^for cmd
Serve the repository from any static web server so the browser can fetch the markdown files.
python -m http.server 4173Then open http://localhost:4173/.
This repository includes a GitHub Actions workflow that publishes the repository root directly to GitHub Pages.
Once deployed:
index.htmlserves the local sample docs viewersample.htmlserves the cross-origin sample configuration