Cera for VS Code
A distraction-free, reveal-on-focus Markdown editor for Visual Studio Code.
Cera is a port of the Cera desktop editor
(C# / Avalonia) to a VS Code extension. Same philosophy: see fully rendered
Markdown, click a block to edit its raw source, and never fight a toolbar.
The source project is private; migration notes and source-file pointers live in
docs/MARKITDOWN-MIGRATION.md.
Status: Pre-release. The reveal-on-focus block model and all three
formatting layers — slash commands, the selection bubble, and the chord
overlay — are implemented. See the Roadmap for what's next.
Install
Cera isn't on the Marketplace yet. Download the latest pre-release VSIX — built
and attached to a GitHub Release by CI:
⬇ Download cera.vsix
Then install it from the command line:
code --install-extension cera.vsix
…or in VS Code: Extensions view → ⋯ menu → Install from VSIX…. All
builds are on the Releases page.
Philosophy
Zen mode first. No toolbar, no sidebar, no status bar — just your text in a
centered reading column that inherits your VS Code theme.
- Reveal-on-focus editing — rendered Markdown by default; click a block to reveal raw source
- Block granularity — edit one block at a time (paragraph, heading, list, code, table…)
- Keyboard-driven — three invisible formatting layers (slash commands, selection bubble, chord overlay)
- Complete visibility — every byte of the file is shown; nothing is hidden
How it works
Cera registers a custom editor (cera.markdownEditor) for .md files. It is
opt-in (priority: "option"): your default Markdown editing is untouched. Open a
file with Cera via Reopen With… in the editor menu, or run the command
"Cera: Open Current File in Cera Editor".
Under the hood it is a CustomTextEditorProvider over the raw Markdown text, so
VS Code handles document sync, dirty state, undo/redo, and save natively.
Three invisible layers, all sharing one set of transforms:
- Slash commands — at the start of a line in a block's source, type
/ for a
menu: /h1–/h6, /table, /code, /quote, /hr, /list, /checklist
(fuzzy, so /tb finds the table).
- Selection bubble — select text to get a floating toolbar: bold, italic,
link, strikethrough, code · code block · bullet/numbered/checklist. One click
applies and keeps your selection; re-applying toggles off.
- Chord overlay — hold Cmd/Ctrl to reveal a shortcut cheat-sheet; press a
key to apply (e.g. ⌘B bold, ⌘K link). Reserved chords (save, undo,
find, clipboard) always pass through to VS Code.
Settings
| Setting |
Default |
Description |
cera.maxReadingWidth |
740 |
Maximum width (px) of the centered reading column. |
cera.images.remote |
render |
render loads remote (https) images; placeholder shows a click-to-load chip instead. Local and data: images always render. |
Requirements
- Visual Studio Code 1.90 or newer. No other dependencies — Cera is
self-contained and works offline.
Known limitations
- Redo after undoing a block edit (#33) —
after you commit a block edit and undo it, VS Code shows Redo as
available but it does not re-apply the change. This is a platform behavior of
redo for programmatic edits to a document shown only in a custom editor (the
menu Redo is affected too, so it isn't a keybinding issue), not something Cera
can currently work around. Undo works normally; to get the change back,
re-make the edit.
Develop
npm install
npm run compile # or: npm run watch
Tests
| Command |
Covers |
npm test |
Vitest suite: unit, webview UI (jsdom), fidelity corpus, theme guard |
npm run test:integration |
@vscode/test-electron suite in a real Extension Host |
npm run test:all |
build + Vitest suite + integration (the full gate) |
CI runs the same gates on every push and PR — a build job (npm run build
then npm test) and an integration job (the Extension Host suite under
xvfb). See .github/workflows/ci.yml.
There are two ways to run the extension.
Option A — Run from source (F5)
The everyday dev loop. Nothing is installed; the extension loads live from this
folder and is gone when you close the window.
- Open this folder in VS Code.
- Press F5 ("Run Cera Extension"). VS Code runs the
compile task and opens
a second window titled [Extension Development Host] with Cera loaded.
- In that window, open a
.md file (e.g. fixtures/sample.md), then Reopen
With… → Cera Markdown Editor or run "Cera: Open Current File in Cera Editor".
Option B — Package and install a VSIX
Build a real installable package — useful for testing as an installed extension
or sharing it.
npm run package # produces cera.vsix (runs the production build)
code --install-extension cera.vsix
Uninstall again with code --uninstall-extension PavelSpakowski.cera. CI can also
build the VSIX on demand (manual run) or on a v* tag — see
.github/workflows/package.yml, which uploads
the .vsix as a build artifact.
Theming
Cera's webview is theme-native: all styling derives from var(--vscode-*)
tokens, which VS Code supplies for light, dark, and high-contrast themes. This
is enforced in CI — test/theme.test.ts rejects hardcoded colors in media/
and requires every CSS variable to be a --vscode-* token.
Manual visual QA that the automated guard can't cover (run before a release):
- Open
fixtures/sample.md in Light+, Dark+, and a High Contrast
theme and confirm text, code blocks, blockquotes, tables, raw-text-block
source, diagram placeholders, and the remote-image chip all remain legible.
- Live theme rendering will also be exercised by the custom-editor / webview
integration tests (#25, #26).
Documentation
License
MIT
