Getting Started

This page installs NanoMD and puts a first synchronized editor and viewer on a page.

Prerequisites

Installation

CDN

<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@latest/dist/NanoMD.js"></script>

NanoMD.js inserts NanoMD.css into <head> by itself, so no extra <link> is required. Three classes are attached to window: MDEditor, MDViewer and MDParser.

npm

npm i @pardnchiu/nanomd

ESM

import { MDEditor, MDViewer, MDParser } from "@pardnchiu/nanomd";

dist/NanoMD.esm.js is the same bundle with export statements appended; it exports the classes already placed on window, plus lowercase aliases editor (= MDEditor) and viewer (= MDViewer).

Build from Source

git clone https://github.com/pardnchiu/NanoMD.git
cd NanoMD
npm install
npm run build:once

build:once produces dist/NanoMD.debug.js, dist/NanoMD.js (terser-minified) and dist/NanoMD.esm.js; npm run build watches src/ with chokidar and rebuilds on change; npm run sass watches and compiles the SCSS.

First Editor and Viewer

<section id="editor"></section>
<section id="viewer"></section>

<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@latest/dist/NanoMD.js"></script>
<script>
const editor = new MDEditor({
    id: "editor",
    defaultContent: "# Hello\n\nStart editing..."
});

const viewer = new MDViewer({
    id: "viewer",
    sync: { editor: editor, scroll: true }
});
</script>

• When id matches an existing element, NanoMD uses it as the container and adds the pd-md-editor / pd-md-viewer class; when it does not, a detached <section> is created and you insert it yourself (editor.body / viewer.body)
• The viewer binds to the editor through sync.editor; every input then re-renders after sync.delay (300 ms by default)

Converting a String Only

When no UI is needed, use MDParser directly:

const html = new MDParser({ standard: false }).parse("# Title\n\n**bold**");

standard defaults to true, which skips the extended syntax (including fenced code blocks); see Standard Mode.

Next Steps

• Architecture: how the three components relate
• Editor Options, Viewer Options
• Inline Syntax: supported Markdown syntax