comark-mark

Highlights and superscripts in Comark: ==text== as <mark> and ^text^ as <sup>. A plugin for HTML, Vue, React, and Svelte.

pnpm add comark comark-mark

import { createHtmlRenderer } from "@comark/html";
import mark, { components } from "comark-mark/html";

const render = createHtmlRenderer({ plugins: [mark()], components });

The deploy waits while ==more than 12 pigeons== sit on the roof.

==Do not deploy=={.warning} before 10^3^ ducks are counted.

Markdown works inside a highlight and {attributes} work after one. A superscript holds no spaces unless they're escaped, and [^1] is never read as one, so footnotes keep working.

~sub~ isn't supported. Write <sub>2</sub> instead.

Renderers

| Renderer | Import | | --- | --- | | @comark/html | comark-mark/html: the styles are inlined | | @comark/vue | comark-mark/vue | | @comark/react | comark-mark/react | | @comark/svelte | comark-mark/svelte |

Each entry exports the parse plugin as default and the renderer's components. The components tint a highlight amber over the page's own text color and keep a superscript from opening a gap in its line. The Vue, React, and Svelte components add the styles when they mount; import comark-mark/style.css with your styles so a server-rendered page doesn't shift. Set --cmk-mark to change the highlight's color; the rules sit in a comark CSS layer, so any plain rule of your own wins. Without the components, the plugin works in any renderer and its nodes stay plain mark and sup.

Credits

Ported from markdown-it-mark and markdown-it-sup by Vitaly Puzrin and Alex Kocharin, MIT.