comark-mark
Mark
Write ==this== to highlight it and x^2^ for a superscript, with no component and no styles.
The deploy waits while more than 12 pigeons sit on the roof.
Pineapple pizza needs two thirds of the Friday vote.
The deploy waits while ==more than 12 pigeons== sit on the roof.
Pineapple pizza needs ==two thirds of the **Friday** vote==.The office roof holds about 103 pigeons, and the 1st count of the day is at 9:00.
The office roof holds about 10^3^ pigeons, and the 1^st^ count of the day is at 9:00.==text== renders as <mark> and ^text^ as <sup>, both native HTML that your page's styles already cover. Markdown works inside a highlight, and {attributes} work after one.
Highlight
Section titled "Highlight"Two equals signs on each side highlight text. Markdown works inside, and {attributes} work after the closing pair:
The ==deploy freeze== starts at noon.
==Pineapple needs **two thirds**==.
==Do not deploy=={.warning}A single =, as in a = b, stays text, and so does a == with nothing to close it.
Superscript
Section titled "Superscript"Carets on each side make a superscript, with no spaces inside. Escape a space with a backslash:
10^3^ pigeons, the 1^st^ count, and E = mc^2^.
A ^spaced\ superscript^.^ right after [, as in a footnote reference [^1], never starts a superscript, so the plugin works beside any footnotes plugin.
No subscript
Section titled "No subscript"~sub~ is left out on purpose. Comark's autoClose escapes a lone ~ before any plugin sees the Markdown (comarkdown/comark#462), and GitHub reads ~text~ as strikethrough, so the same file would mean two things. Write <sub>2</sub> for a subscript, as in H2O.
Examples
Section titled "Examples"Styling
Section titled "Styling"The plugin adds no classes and no styles. Browsers draw <mark> with a yellow background. To match your theme:
mark {
background: color-mix(in oklab, gold 40%, transparent);
color: inherit;
border-radius: 2px;
padding: 0 2px;
}A class after a highlight styles that one alone: ==Do not deploy=={.warning} renders <mark class="warning">.
In review documents
Section titled "In review documents"A highlight marks the words a reviewer should read first, such as the number that changed or the condition a fix adds. Keep it to a few words per paragraph; a highlighted paragraph is a paragraph nobody skims.
How it parses
Section titled "How it parses"The parser is markdown-it-mark and markdown-it-sup, ported to TypeScript, since neither ships types. Comark drops inline tokens it doesn't know and keeps their text, so the plugin renames mark_open and mark_close to the inline span Comark builds with any tag. Comark already builds sup.
The plugin takes no options. In comarkUi(), mark: false turns it off.
Package
Section titled "Package"comark-ui brings comark-mark and registers it. To use it alone, install it and register the plugin:
pnpm add comark @comark/html comark-markimport { parseMarkdown } from "comark";
import mark from "comark-mark";
const document = await parseMarkdown(markdown, {
plugins: [mark()],
});It has no components and no styles, because <mark> and <sup> are native HTML. It works with registerDefaultPlugins: false and in streaming parses. Every renderer draws the nodes as they are: mark and sup.