HTML Preview

Source Open in StackBlitz

A live markdown editor that renders Comark content to HTML and displays it in a sandboxed iframe preview, with syntax highlighting support.

src/main.ts

import { createRender } from '@comark/html'
import highlight from 'comark/plugins/highlight'

const render = createRender({
  parse: { plugins: [highlight()] },
})

const PREVIEW_STYLES = `
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #1a1a2e;
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 24px;
  }
  /* ... */
`

async function updatePreview(markdown: string) {
  const html = await render(markdown)
  const frame = document.getElementById('preview') as HTMLIFrameElement
  frame.srcdoc = `<!doctype html><html><head><style>${PREVIEW_STYLES}</style></head><body>${html}</body></html>`
}

const input = document.getElementById('input') as HTMLTextAreaElement
input.value = SAMPLE
updatePreview(SAMPLE)

let debounceTimer: ReturnType<typeof setTimeout>
input.addEventListener('input', () => {
  clearTimeout(debounceTimer)
  debounceTimer = setTimeout(() => updatePreview(input.value), 150)
})

This example shows a split-pane live preview: write Comark markdown on the left and see it rendered as styled HTML in a sandboxed <iframe> on the right. The highlight plugin enables syntax highlighting for code blocks. Custom styles are injected into the iframe via srcdoc for proper CSS isolation.

React

A minimal example showing how to use Comark with React and Vite.