Der Compiler trennt Dateisystem-Operationen von der Kernlogik. Die Kern-Engine kann daher vollständig im Browser laufen und Live-Editoren sowie CMS-Vorschauen ohne Node.js-Backend antreiben.

<img width=“720” class=“with-border” src=“/assets/previews/live-editor-preview.webp”>

Der Live-Editor

Der eingebaute Live-Editor bietet eine performante Split-Pane-Oberfläche. Verfassen Sie Ihr Markdown im linken Bereich. Beobachten Sie, wie die gerenderte Ausgabe in Echtzeit im rechten Bereich aktualisiert und synchronisiert wird.

Lokale Ausführung

Starten Sie den Live-Editor lokal in Ihrem Projekt:

npx @docmd/core live

Statische Distribution

Erzeugen Sie eine eigenständige, statische Version des Editors. Hosten Sie sie auf Plattformen wie Vercel oder GitHub Pages:

npx @docmd/core live --build-only

Dies erzeugt ein dist/-Verzeichnis. Es enthält den index.html-Einstiegspunkt und die gebündelte docmd-live.js-Engine.

@docmd/core einbetten

Fügen Sie das browserkompatible Bundle zu einer Drittanbieter-App hinzu, um Markdown auf dem Client zu rendern.

1. Ressourcenintegration

Binden Sie die CSS- und JavaScript-Bundles aus Ihren Assets oder einem CDN ein:

<link rel="stylesheet" href="/assets/css/docmd-main.css">
<script src="/docmd-live.js"></script>

2. Isomorphe API

Das globale docmd-Objekt stellt eine compile-Methode für sofortiges Rendern bereit.

const html = await docmd.compile(markdown, {
  "title": "Dynamic Preview",
  "theme": { "appearance": "dark" }
});


document.getElementById("preview-frame").srcdoc = html;