humanonlyweb/writer

Styling

Tokens, hooks, and your site's CSS.

Markdown

Your CSS wins

core.css is in @layer humanonlyweb-writer, so anything you write overrides it. It styles the editor's Markdown source and gives the editor and rendered content one type scale: a heading is the same size in both.

Style rendered content ([data-part="writer-content"]) as your site's prose. The editor's previews use the same wrapper, so they pick it up too.

Tokens

Set them on any ancestor; the editor and content both follow.

TokenDefaultDescription
--writer-h1 … --writer-h6The browser'sHeading sizes.
--writer-heading-weightbold
--writer-code-font, --writer-code-sizeui-monospace, 0.875emInline and block code.
--writer-quote-indent1emQuotes.
--writer-quote-border-width, --writer-quote-border-color3px, text at 25%
--writer-block-inset, --writer-block-background0.75em, text at 4%An open block's padding and background: match your blocks' and the text won't jump.
:root {
  --writer-h2: 1.6rem;
  --writer-code-font: "JetBrains Mono", monospace;
  --writer-block-inset: 1.25rem;
  --writer-block-background: #fbf6e3;
}
Copy code

If your prose CSS sets heading sizes directly, set these to the same values, or the editor won't match.

Hooks

SelectorDescription
[data-part="writer-editor"]Editor root: [data-mode], [data-ready], [data-readonly].
[data-part="writer-fallback"]What shows before CodeMirror loads.
[data-part="writer-host"] .cm-editorCodeMirror.
[data-part="writer-content"]Rendered content, on the page and in the editor's previews.
.cm-md-preview, .cm-md-block-open, .cm-md-block-fenceRendered blocks, and the lines of a block open for editing.
[data-part="writer-image"], .cm-md-image-frame, .cm-md-image-caption, .cm-md-image-altImage cards: [data-selected]; the frame [data-empty], [data-uploading], [data-dropping].
.cm-md-bullet, .cm-md-task, .cm-md-quote-line, .cm-md-hrLive preview's stand-ins for list, task, quote and rule syntax.
.cm-md-h1….cm-md-h6, .cm-md-codeblock, .cm-md-strong, .cm-md-em, .cm-md-strike, .cm-md-code, .cm-md-link, .cm-md-quote, .cm-md-mark, .cm-md-commentMarkdown source.
[data-part="writer-toolbar"], [data-part="writer-toolbar-item"][data-command]Toolbar and buttons: [aria-pressed], [aria-disabled].