Introduction

comark-codemirror turns CodeMirror 6 into a code editor for Comark — CommonMark and GFM plus components, attributes, slots, frontmatter and bindings. You always see and edit the source; the editor's job is to make writing that source fast and correct.

---
title: Chained autocomplete
layout: docs
site:
  name: My Blog
---

# {{ frontmatter.title }}

Type `/` on an empty line, `::` for a component, `{{` for a binding.

::card{title="Hello" variant="soft"}
Written for {{ frontmatter.site.name }}.

#footer
:badge[new]{color="green"}
::

Autocomplete everything

Every place in a Comark document where the next token comes from a known set gets a menu:

• components after :: and :, with the right number of nesting colons
• props inside {} — required first, the ones already set hidden, bound variants after : and two-way ones after ::
• values — enums, booleans, defaults and values you used elsewhere
• slots after #, and YAML props in a --- block under the opener
• bindings — {{ frontmatter.site.name }} segment by segment, from the document's own frontmatter
• plugin syntax — alerts, emoji, footnotes, heading anchors, fence languages and meta, math commands, HTML tags

Menus chain: picking a component opens its props, a prop opens its values, a value goes back to the next prop. It feels like walking a nested menu, and the result is always plain text.

Why CodeMirror

CodeMirror already has the document model, history, multiple cursors, virtualization, IME, accessibility, and EditContext input in Chromium. Its autocomplete has everything chaining needs: activateOnCompletion, section headers, extra columns and a docs panel. So this package adds only Comark: a Lezer grammar, one context-aware completion source, lint, hover, commands and a headless API.

What it is not

• Not a WYSIWYG editor. There is no live preview inside the editor; render a preview next to it with @comark/* (the playground does).
• Not a general code editor. Fenced code is highlighted with the languages you pass.