comark-ui 0.8.1 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/dist/client.d.mts +2 -2
- package/dist/client.mjs +2 -2
- package/dist/editor-vue.mjs +1 -4
- package/dist/html.d.mts +2 -2
- package/dist/html.mjs +3 -3
- package/dist/{index-DVGSDzBS.d.mts → index-Cq3zytGw.d.mts} +70 -6
- package/dist/index.d.mts +3 -3
- package/dist/index.mjs +3 -3
- package/dist/nodes-CwDBFXnO.mjs +5 -0
- package/dist/react.d.mts +2 -2
- package/dist/react.mjs +3 -3
- package/dist/skills/comark-ui/SKILL.md +1 -1
- package/dist/skills/comark-ui/references/code.md +2 -2
- package/dist/skills/comark-ui/references/markdown-it-to-comark.md +28 -0
- package/dist/skills/comark-ui/references/marked-to-comark.md +28 -0
- package/dist/skills/comark-ui/references/migrate-to-comark.md +33 -0
- package/dist/skills/comark-ui/references/quiz.md +1 -1
- package/dist/skills/comark-ui/references/remark-to-comark.md +9 -3
- package/dist/skills/comark-ui/references/ui.md +2 -1
- package/dist/skills.mjs +18 -6
- package/dist/src-MvpWiv9v.mjs +293 -0
- package/dist/svelte/index.d.ts +1 -1
- package/dist/svelte/index.js +1 -1
- package/dist/{typeset-css-blSNpFNK.mjs → typeset-css-BOtdXbMg.mjs} +24 -7
- package/dist/{typeset-css-DdOGL7WF.d.mts → typeset-css-DtOLAa1Z.d.mts} +7 -1
- package/dist/typeset.css +1 -0
- package/dist/vue.d.mts +2 -2
- package/dist/vue.mjs +7 -7
- package/package.json +50 -47
- package/dist/src-PkmYCSNu.mjs +0 -120
package/README.md
CHANGED
|
@@ -29,7 +29,9 @@ comarkUi({
|
|
|
29
29
|
});
|
|
30
30
|
```
|
|
31
31
|
|
|
32
|
-
`include` is off because it reads files from disk; turn it on to paste files into a document. `cast`, `table`, and `tests` are on but read no files until you pass `{ root }` or `{ read }`. When you parse in a browser, pass `chips: { download: false }`, since a browser may not download another site's images. comark-critic has no component for its styles, so put the exported `criticCss` in the page. The text around the blocks (headings, paragraphs, lists, tables, code, and quotes) is styled too, from shadcn/typeset on the same tokens and scoped to the document; pass `typeset: false` when your site already styles Markdown. See [Typeset](https://comark-ui.onmax.me/guide/typeset/).
|
|
32
|
+
`include` is off because it reads files from disk; turn it on to paste files into a document. `cast`, `table`, and `tests` are on but read no files until you pass `{ root }` or `{ read }`. When you parse in a browser, pass `chips: { download: false }`, since a browser may not download another site's images. comark-critic has no component for its styles, so put the exported `criticCss` in the page. The text around the blocks (headings, paragraphs, lists, tables, code, and quotes) is styled too, from shadcn/typeset on the same tokens and scoped to the document; pass `typeset: false` when your site already styles Markdown. For content outside a document, such as an editor, import `comark-ui/typeset.css` and add the `comark-typeset` class. See [Typeset](https://comark-ui.onmax.me/guide/typeset/).
|
|
33
|
+
|
|
34
|
+
It also returns `tags` and `blocks`. `tags` is every element a parsed document can hold besides the components; with the components' names, it's the allowlist for Comark's `security` plugin. `blocks` are the blocks the plugins replace while parsing, such as `::code-group`, which a linter needs beside the components' names.
|
|
33
35
|
|
|
34
36
|
## Renderers
|
|
35
37
|
|
package/dist/client.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as typesetCss } from "./typeset-css-
|
|
1
|
+
import { n as typesetStylesheet, t as typesetCss } from "./typeset-css-DtOLAa1Z.mjs";
|
|
2
2
|
//#region src/client.d.ts
|
|
3
3
|
/**
|
|
4
4
|
* comark-pele's diagrams on the shared `--comark-*` tokens, on a card like comark-diagrams'. Pele paints with its
|
|
@@ -19,4 +19,4 @@ export declare function mermaidBar(): string;
|
|
|
19
19
|
*/
|
|
20
20
|
export declare function startMermaid(): () => void;
|
|
21
21
|
//#endregion
|
|
22
|
-
export { typesetCss };
|
|
22
|
+
export { typesetCss, typesetStylesheet };
|
package/dist/client.mjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { t as typesetCss } from "./typeset-css-
|
|
1
|
+
import { n as typesetStylesheet, t as typesetCss } from "./typeset-css-BOtdXbMg.mjs";
|
|
2
2
|
import { i as startMermaid, n as mermaidBar, r as mermaidCss, t as addMermaidStyles } from "./client-kUEiRbtp.mjs";
|
|
3
|
-
export { addMermaidStyles, mermaidBar, mermaidCss, startMermaid, typesetCss };
|
|
3
|
+
export { addMermaidStyles, mermaidBar, mermaidCss, startMermaid, typesetCss, typesetStylesheet };
|
package/dist/editor-vue.mjs
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
|
+
import { n as isElement, t as childrenOf } from "./nodes-CwDBFXnO.mjs";
|
|
1
2
|
import { c as fromMarkdown, l as toMarkdown, m as ComarkKit, s as checkMarkdown } from "./editor-9IcfELjG.mjs";
|
|
2
3
|
import { Editor, EditorContent } from "@tiptap/vue-3";
|
|
3
4
|
import { rowsOf } from "comark-properties";
|
|
4
5
|
import { Properties } from "comark-properties/vue";
|
|
5
6
|
import { defineComponent, h, onScopeDispose, ref, shallowRef, watch } from "vue";
|
|
6
|
-
//#region ../../shared/nodes.ts
|
|
7
|
-
const isElement = (node) => Array.isArray(node) && node[0] !== null;
|
|
8
|
-
const childrenOf = ([, , ...rest]) => rest;
|
|
9
|
-
//#endregion
|
|
10
7
|
//#region src/editor-vue.ts
|
|
11
8
|
/**
|
|
12
9
|
* A Tiptap editor bound to a Markdown string: an edit writes the Markdown back, and a change from outside reloads the
|
package/dist/html.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as
|
|
1
|
+
import { a as commentsCss, n as Preset, o as criticCss, r as PresetOptions } from "./index-Cq3zytGw.mjs";
|
|
2
2
|
import { NodeHandler } from "comark";
|
|
3
3
|
//#region src/html.d.ts
|
|
4
4
|
/**
|
|
@@ -10,4 +10,4 @@ export declare const mermaidScript: string;
|
|
|
10
10
|
/** Every plugin for `@comark/html`, with the `components` to render them. */
|
|
11
11
|
declare const _default: (options?: PresetOptions) => Preset<NodeHandler>;
|
|
12
12
|
//#endregion
|
|
13
|
-
export { type PresetOptions, criticCss, _default as default };
|
|
13
|
+
export { type PresetOptions, commentsCss, criticCss, _default as default };
|
package/dist/html.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { t as
|
|
2
|
-
import {
|
|
1
|
+
import { n as criticCss, r as preset, t as commentsCss } from "./src-MvpWiv9v.mjs";
|
|
2
|
+
import { t as typesetCss } from "./typeset-css-BOtdXbMg.mjs";
|
|
3
3
|
import { a as start, n as mermaidBar, r as mermaidCss } from "./client-kUEiRbtp.mjs";
|
|
4
4
|
import { t as rawText } from "./text-D8j9clg3.mjs";
|
|
5
5
|
import { escapeHtml } from "comark/utils";
|
|
@@ -111,4 +111,4 @@ var html_default = (options) => preset({
|
|
|
111
111
|
zoom
|
|
112
112
|
}, options);
|
|
113
113
|
//#endregion
|
|
114
|
-
export { criticCss, html_default as default, mermaidScript };
|
|
114
|
+
export { commentsCss, criticCss, html_default as default, mermaidScript };
|
|
@@ -1,34 +1,78 @@
|
|
|
1
1
|
import { CriticOptions, css as criticCss } from "comark-critic";
|
|
2
2
|
import { FigureOptions } from "comark-figure";
|
|
3
3
|
import { FootnotesOptions } from "comark-footnotes";
|
|
4
|
+
import { CalloutsOptions, ReferencesOptions } from "comark-github";
|
|
4
5
|
import { IconOptions, Icons } from "comark-icon";
|
|
5
6
|
import { IncludeOptions } from "comark-include";
|
|
6
7
|
import { KeysOptions } from "comark-keys";
|
|
7
8
|
import { ReadingTimeOptions } from "comark-reading-time";
|
|
8
9
|
import { XrefOptions } from "comark-xref";
|
|
9
10
|
import { ComarkPlugin } from "comark";
|
|
11
|
+
import { CommentsOptions, css as commentsCss } from "comark-comments";
|
|
10
12
|
import { PropertiesOptions } from "comark-properties";
|
|
13
|
+
import { PeleConfig } from "comark-pele";
|
|
11
14
|
import { BadgeOptions } from "comark-badge";
|
|
12
15
|
import { AnnotateOptions } from "comark-annotate";
|
|
13
16
|
import { CastOptions } from "comark-cast";
|
|
14
17
|
import { ChartsOptions } from "comark-charts";
|
|
15
18
|
import { ChipsOptions } from "comark-chips";
|
|
16
19
|
import { CodeOptions } from "comark-code";
|
|
17
|
-
import { CommentsOptions } from "comark-comments";
|
|
18
20
|
import { DetailsOptions } from "comark-details";
|
|
19
21
|
import { DiagramsOptions } from "comark-diagrams";
|
|
20
22
|
import { FileTreeOptions } from "comark-file-tree";
|
|
21
|
-
import { CalloutsOptions, ReferencesOptions } from "comark-github";
|
|
22
23
|
import { AnchorsOptions, ExternalOptions } from "comark-links";
|
|
23
24
|
import { MathOptions } from "comark-mathml";
|
|
24
25
|
import { MediaOptions } from "comark-media";
|
|
25
26
|
import { OutlineOptions } from "comark-outline";
|
|
26
|
-
import { PeleConfig } from "comark-pele";
|
|
27
27
|
import { QuizOptions } from "comark-quiz";
|
|
28
28
|
import { TableOptions } from "comark-table";
|
|
29
29
|
import { TabsOptions } from "comark-tabs";
|
|
30
30
|
import { TestsOptions } from "comark-tests";
|
|
31
31
|
import { ZoomOptions } from "comark-zoom";
|
|
32
|
+
//#region src/mermaid-limits.d.ts
|
|
33
|
+
type MermaidOptions = PeleConfig & {
|
|
34
|
+
/** How many diagrams a document draws. The ones after show their source as a code block. */
|
|
35
|
+
maxDiagrams?: number;
|
|
36
|
+
/** How many characters of Mermaid source a document draws, over all its diagrams. A diagram past it shows its source. */
|
|
37
|
+
maxSource?: number;
|
|
38
|
+
};
|
|
39
|
+
//#endregion
|
|
40
|
+
//#region src/shiki.d.ts
|
|
41
|
+
type Token = {
|
|
42
|
+
content: string;
|
|
43
|
+
color?: string;
|
|
44
|
+
htmlStyle?: Record<string, string>;
|
|
45
|
+
};
|
|
46
|
+
/** What the preset needs of a Shiki highlighter: a `HighlighterCore` from `shiki/core` fits it. */
|
|
47
|
+
type ShikiHighlighter = {
|
|
48
|
+
codeToTokens(code: string, options: {
|
|
49
|
+
lang: string;
|
|
50
|
+
themes: {
|
|
51
|
+
light: string;
|
|
52
|
+
dark?: string;
|
|
53
|
+
};
|
|
54
|
+
}): {
|
|
55
|
+
tokens: Token[][];
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
type ShikiOptions = {
|
|
59
|
+
/**
|
|
60
|
+
* Your Shiki, with the fence's language loaded, or `undefined` to leave the block plain. It's called for each fenced
|
|
61
|
+
* block with a language that fits the remaining budget, so load each grammar once. Blocks past the limits skip it
|
|
62
|
+
* and report a limit issue without checking whether the language is supported.
|
|
63
|
+
*/
|
|
64
|
+
highlighter: (language: string) => ShikiHighlighter | undefined | Promise<ShikiHighlighter | undefined>;
|
|
65
|
+
/** Theme names your highlighter has loaded. The dark one goes in `--shiki-dark`, which the typeset styles follow. */
|
|
66
|
+
themes: {
|
|
67
|
+
light: string;
|
|
68
|
+
dark?: string;
|
|
69
|
+
};
|
|
70
|
+
/** How many code blocks a document highlights. The ones after show without colors. */
|
|
71
|
+
maxBlocks?: number;
|
|
72
|
+
/** How many characters of code a document highlights, over all its blocks. A block past it shows without colors. */
|
|
73
|
+
maxSource?: number;
|
|
74
|
+
};
|
|
75
|
+
//#endregion
|
|
32
76
|
//#region src/typeset.d.ts
|
|
33
77
|
/** The node that adds the styles. The plugin adds one at the end of every document. */
|
|
34
78
|
declare const TYPESET_TAG = "typeset-styles";
|
|
@@ -63,8 +107,11 @@ type PresetOptions = {
|
|
|
63
107
|
comments?: CommentsOptions | boolean;
|
|
64
108
|
/** Sends each diagram's source to `https://kroki.io` unless you pass your own `server`, or `{ draw: false }`. */
|
|
65
109
|
diagrams?: DiagramsOptions | boolean;
|
|
66
|
-
/**
|
|
67
|
-
|
|
110
|
+
/**
|
|
111
|
+
* Draws `mermaid` fences with comark-pele, on the server and offline. A host that renders documents it didn't write
|
|
112
|
+
* can pass `{ maxDiagrams, maxSource }`: the diagrams past either limit show their source as code, each with an issue.
|
|
113
|
+
*/
|
|
114
|
+
mermaid?: MermaidOptions | boolean;
|
|
68
115
|
/** HTML only: Vue, React, and Svelte have no diff components. */
|
|
69
116
|
diff?: boolean;
|
|
70
117
|
embed?: boolean;
|
|
@@ -108,6 +155,12 @@ type PresetOptions = {
|
|
|
108
155
|
/** Reads no JUnit reports unless you pass `{ root }` or `{ read }`; inline reports render either way. */
|
|
109
156
|
tests?: TestsOptions | boolean;
|
|
110
157
|
zoom?: ZoomOptions | boolean;
|
|
158
|
+
/**
|
|
159
|
+
* Highlights fenced code with your own Shiki, before comark-code. Off unless you pass one, so the preset bundles no
|
|
160
|
+
* grammars. A host that renders documents it didn't write can pass `{ maxBlocks, maxSource }`: the blocks past either
|
|
161
|
+
* limit show without colors, each with an issue.
|
|
162
|
+
*/
|
|
163
|
+
shiki?: ShikiOptions | false;
|
|
111
164
|
code?: CodeOptions | boolean;
|
|
112
165
|
codeNotes?: boolean;
|
|
113
166
|
/**
|
|
@@ -176,8 +229,19 @@ type Renderer<C> = {
|
|
|
176
229
|
type Preset<C> = {
|
|
177
230
|
plugins: AnyPlugin[];
|
|
178
231
|
components: Record<string, C>;
|
|
232
|
+
/**
|
|
233
|
+
* Every tag but `components`' that a document parsed with `plugins` can hold: Markdown's own, the raw HTML that
|
|
234
|
+
* GitHub's `html` plugin keeps, and the plain elements the plugins draw with. With `components`' names, it's the
|
|
235
|
+
* allowlist a host that sanitizes the tree needs. With GitHub's `html` off, raw HTML is left to the host.
|
|
236
|
+
*/
|
|
237
|
+
tags: string[];
|
|
238
|
+
/**
|
|
239
|
+
* The blocks a document may write that the plugins turn into other nodes while parsing, such as `::code-group`. A
|
|
240
|
+
* linter that reports unknown components needs them beside `components`' names.
|
|
241
|
+
*/
|
|
242
|
+
blocks: string[];
|
|
179
243
|
};
|
|
180
244
|
/** Builds a renderer's preset. Use the one from `comark-ui/html`, `/vue`, `/react`, or `/svelte`. */
|
|
181
245
|
declare function preset<C>(renderer: Renderer<C>, options?: PresetOptions): Preset<C>;
|
|
182
246
|
//#endregion
|
|
183
|
-
export {
|
|
247
|
+
export { commentsCss as a, TYPESET_TAG as c, ShikiOptions as d, MermaidOptions as f, Renderer as i, typeset as l, Preset as n, criticCss as o, PresetOptions as r, preset as s, AnyPlugin as t, ShikiHighlighter as u };
|
package/dist/index.d.mts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { t as typesetCss } from "./typeset-css-
|
|
2
|
-
import { a as
|
|
3
|
-
export { AnyPlugin, Preset, PresetOptions, Renderer, TYPESET_TAG, criticCss, preset, typeset, typesetCss };
|
|
1
|
+
import { n as typesetStylesheet, t as typesetCss } from "./typeset-css-DtOLAa1Z.mjs";
|
|
2
|
+
import { a as commentsCss, c as TYPESET_TAG, d as ShikiOptions, f as MermaidOptions, i as Renderer, l as typeset, n as Preset, o as criticCss, r as PresetOptions, s as preset, t as AnyPlugin, u as ShikiHighlighter } from "./index-Cq3zytGw.mjs";
|
|
3
|
+
export { AnyPlugin, type MermaidOptions, Preset, PresetOptions, Renderer, type ShikiHighlighter, type ShikiOptions, TYPESET_TAG, commentsCss, criticCss, preset, typeset, typesetCss, typesetStylesheet };
|
package/dist/index.mjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { t as
|
|
2
|
-
import {
|
|
3
|
-
export { TYPESET_TAG, criticCss, preset, typeset, typesetCss };
|
|
1
|
+
import { a as typeset, i as TYPESET_TAG, n as criticCss, r as preset, t as commentsCss } from "./src-MvpWiv9v.mjs";
|
|
2
|
+
import { n as typesetStylesheet, t as typesetCss } from "./typeset-css-BOtdXbMg.mjs";
|
|
3
|
+
export { TYPESET_TAG, commentsCss, criticCss, preset, typeset, typesetCss, typesetStylesheet };
|
package/dist/react.d.mts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { a as
|
|
1
|
+
import { a as commentsCss, n as Preset, o as criticCss, r as PresetOptions } from "./index-Cq3zytGw.mjs";
|
|
2
2
|
import { ComponentType } from "react";
|
|
3
3
|
//#region src/react.d.ts
|
|
4
4
|
type AnyComponent = ComponentType<any>;
|
|
5
5
|
/** Every plugin with components for `@comark/react`, which leaves out annotate, comments, diff, and quiz. */
|
|
6
6
|
declare const _default: (options?: PresetOptions) => Preset<AnyComponent>;
|
|
7
7
|
//#endregion
|
|
8
|
-
export { type PresetOptions, criticCss, _default as default };
|
|
8
|
+
export { type PresetOptions, commentsCss, criticCss, _default as default };
|
package/dist/react.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { t as
|
|
2
|
-
import {
|
|
1
|
+
import { n as criticCss, r as preset, t as commentsCss } from "./src-MvpWiv9v.mjs";
|
|
2
|
+
import { t as typesetCss } from "./typeset-css-BOtdXbMg.mjs";
|
|
3
3
|
import { i as startMermaid, n as mermaidBar, t as addMermaidStyles } from "./client-kUEiRbtp.mjs";
|
|
4
4
|
import { createElement, useEffect } from "react";
|
|
5
5
|
import * as badge from "comark-badge/react";
|
|
@@ -94,4 +94,4 @@ var react_default = (options) => preset({
|
|
|
94
94
|
zoom
|
|
95
95
|
}, options);
|
|
96
96
|
//#endregion
|
|
97
|
-
export { criticCss, react_default as default };
|
|
97
|
+
export { commentsCss, criticCss, react_default as default };
|
|
@@ -45,7 +45,7 @@ Either way, the HTML renderer inlines the styles once per document, and the Vue,
|
|
|
45
45
|
|
|
46
46
|
The `--comark-*` tokens theme every plugin at once; https://comark-ui.onmax.me/guide/theming/ lists them. In a Nuxt UI app the plugins follow its `--ui-*` variables with no setup. For a page rendered outside the app, such as review evidence, put the CSS from `nuxtUiTheme({ colors: appConfig.ui?.colors, css: mainCss })` (from `comark-ui/nuxt-ui`) in a `<style>`, so the page matches the app.
|
|
47
47
|
|
|
48
|
-
A project that renders Markdown with remark moves to Comark with `remark-to-comark`; the [remark-to-comark reference](references/remark-to-comark.md) walks through it.
|
|
48
|
+
To move a project to Comark, start with `migrate-to-comark`, which finds its Markdown libraries and runs the migrator for each; see the [migrate-to-comark reference](references/migrate-to-comark.md). A project that renders Markdown with remark moves to Comark with `remark-to-comark`; the [remark-to-comark reference](references/remark-to-comark.md) walks through it. One that renders with markdown-it moves with `markdown-it-to-comark`; see the [markdown-it-to-comark reference](references/markdown-it-to-comark.md). A project on marked moves with `marked-to-comark`; see the [marked-to-comark reference](references/marked-to-comark.md).
|
|
49
49
|
|
|
50
50
|
Problems land in `meta.issues` after `parseMarkdown`, one sentence each, and a host can refuse a document while any remain. For untrusted input, add Comark's `security` plugin with `blockedTags` such as `script`, `style`, and `iframe`; it cleans the Markdown inside blocks too.
|
|
51
51
|
|
|
@@ -23,12 +23,12 @@ function close() {
|
|
|
23
23
|
| `showLineNumbers` | Numbers the lines. |
|
|
24
24
|
| `startLineNumber=120` | Numbers the lines from 120, and turns numbers on. |
|
|
25
25
|
| `title="src/zoom.ts"` | Titles the block, like Comark's `[src/zoom.ts]`. A block without one shows its language. |
|
|
26
|
-
| `frame="terminal"` | Draws a terminal
|
|
26
|
+
| `frame="terminal"` | Draws a terminal, with a line under its header. `frame="code"` or `frame="none"` draws a plain block. |
|
|
27
27
|
| `wrap` | Starts the block with Wrap on. |
|
|
28
28
|
|
|
29
29
|
A range is one line, `{7}`, a run, `{3-4}`, or a list of both, `{1, 3-4}`, always in braces. Ranges count the block's own lines from 1, folded lines included, whatever `startLineNumber` says: `startLineNumber=120 ins={3}` marks the line numbered 122.
|
|
30
30
|
|
|
31
|
-
`sh`, `bash`, `zsh`, `shell`, `shellscript`, `shellsession`, `console`, and `ansi` blocks draw as terminals unless their title is a file name, such as `install.sh`. A terminal's header shows its title but not its language. In a code group the tab names the block, so a terminal there draws no
|
|
31
|
+
`sh`, `bash`, `zsh`, `shell`, `shellscript`, `shellsession`, `console`, and `ansi` blocks draw as terminals unless their title is a file name, such as `install.sh`. A terminal's header shows its title but not its language. In a code group the tab names the block, so a terminal there draws no line under its header.
|
|
32
32
|
|
|
33
33
|
When the host runs Shiki's notation transformers, comments such as `// [!code ++]`, `// [!code --]`, `// [!code highlight]`, `// [!code focus]`, `// [!code error]`, and `// [!code warning]` mark lines too, and comark-code styles them.
|
|
34
34
|
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# Moving a project from markdown-it
|
|
2
|
+
|
|
3
|
+
markdown-it-to-comark moves a project that renders Markdown with markdown-it to Comark. It reports what it finds as diagnostics, `MIC0101` to `MIC0303`, each with a fix and a link to https://comark-ui.onmax.me/markdown-it-to-comark/diagnostics/.
|
|
4
|
+
|
|
5
|
+
## Run it
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
vp exec markdown-it-to-comark check . --json
|
|
9
|
+
vp exec markdown-it-to-comark content "**/*.md" --write
|
|
10
|
+
vp exec markdown-it-to-comark rewrite . --write
|
|
11
|
+
vp exec markdown-it-to-comark check . --json
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
- `check` lists the markdown-it instances and framework hooks it finds, what each option and plugin becomes, the instances `rewrite` can replace and why the others stay, and the Markdown files `content` would change.
|
|
15
|
+
- `rewrite` replaces `const md = new MarkdownIt(options).use(plugin)` with `const md = comarkOptions({ ...options, plugins: [markdownItPlugin(plugin)] })` and each `md.render(src)` with `(await renderHtml(src, md))`. It only does so when every `render` call is in an async function, since Comark renders asynchronously. Install `comark`, `@comark/html`, and `markdown-it-to-comark`.
|
|
16
|
+
- `content` escapes `{`, `[`, and `:name` that Comark would read as attributes, spans, or components, and keeps an edit only if markdown-it renders the file byte for byte as before. It reads with the project's preset, options, and plugins, so `::: tip` containers and `[^1]` footnotes stay as written.
|
|
17
|
+
- Run `check` again at the end. What's left is work for you: framework setups (MIC0101), plugins and hand-made changes nobody compared (MIC0105), setups it couldn't rewrite (MIC0201), and blocks left as written (MIC0303).
|
|
18
|
+
|
|
19
|
+
## What it leaves to you
|
|
20
|
+
|
|
21
|
+
- A framework's instance, such as VitePress' `markdown.config(md)` or Eleventy's `setLibrary("md", …)`, stays as it is: the framework renders. Render with `renderHtml(markdown, comarkOptions())` where the framework lets you.
|
|
22
|
+
- A markdown-it plugin keeps its output on Comark through `markdownItPlugin(plugin, ...options)` from `markdown-it-to-comark/plugins`, renderer rules included. A comark-ui package that does the same job is reported with it (MIC0102); its markup differs.
|
|
23
|
+
- A renderer rule set by hand (`md.renderer.rules.fence = …`) moves into a plugin function registered with `markdownItPlugin()`.
|
|
24
|
+
|
|
25
|
+
## Register
|
|
26
|
+
|
|
27
|
+
- In `comark-ui`: not included. Install it beside the preset for the migration.
|
|
28
|
+
- Alone: `pnpm add -D markdown-it-to-comark`. It installs the command `markdown-it-to-comark`, the library, the Comark setup `markdown-it-to-comark/setup` and the bridge `markdown-it-to-comark/plugins` (add the package to your runtime dependencies when rewritten code imports them), and the Vite Doctor extension `markdown-it-to-comark/doctor`.
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
# Moving a project from marked
|
|
2
|
+
|
|
3
|
+
marked-to-comark moves a project that renders Markdown with marked to Comark. It reports what it finds as diagnostics, `MKC0101` to `MKC0304`, each with a fix and a link to https://comark-ui.onmax.me/marked-to-comark/diagnostics/.
|
|
4
|
+
|
|
5
|
+
## Run it
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
vp exec marked-to-comark check . --json
|
|
9
|
+
vp exec marked-to-comark content "posts/**/*.md" --write
|
|
10
|
+
vp exec marked-to-comark rewrite . --write
|
|
11
|
+
vp exec marked-to-comark check . --json
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
- `check` lists the marked setups it finds (the shared `marked`, `new Marked()` instances) and what each option and extension becomes, the calls `rewrite` can replace and why the others stay, and the Markdown files `content` would change. `--json` prints each finding with its code, file, line, fix, and docs link.
|
|
15
|
+
- `rewrite` replaces `marked.parse(markdown)` inside an async function with `await renderHtml(markdown, comarkOptions({ … }))`, importing `comarkOptions` from `marked-to-comark/setup`. Install what the new code imports: `comark`, `@comark/html`, and `marked-to-comark`.
|
|
16
|
+
- `content` escapes `{`, `[`, and `:name` that Comark would read as attributes, spans, or components, so marked still renders every file byte for byte as before. It checks each edit with the project's own marked. Run it before `rewrite`, which removes the marked setup it reads options from.
|
|
17
|
+
- Run `check` again at the end. What's left is work for you: custom renderers and extensions (MKC0105), options with no counterpart (MKC0106), calls it couldn't rewrite (MKC0201), and blocks left as written (MKC0303).
|
|
18
|
+
|
|
19
|
+
## What it leaves to you
|
|
20
|
+
|
|
21
|
+
- A call in a function that isn't async stays: `renderHtml` returns a promise. Make the function async, update its callers, and run `rewrite` again.
|
|
22
|
+
- A custom `renderer` method becomes a component for the element it draws (`components: { a }` in @comark/html, or your framework's renderer); a tokenizer or extension becomes a Comark plugin.
|
|
23
|
+
- Strings marked renders at runtime, such as chat replies, need no content changes. For a reply that streams in, render with `{ ...comarkOptions(), autoClose: true }` so unfinished Markdown looks finished at every step.
|
|
24
|
+
|
|
25
|
+
## Register
|
|
26
|
+
|
|
27
|
+
- In `comark-ui`: not included. Install it beside the preset for the migration.
|
|
28
|
+
- Alone: `pnpm add -D marked-to-comark`. It installs the command `marked-to-comark`, the library `marked-to-comark`, the Comark setup `marked-to-comark/setup` (add it to your runtime dependencies when rewritten code imports it), and the Vite Doctor extension `marked-to-comark/doctor`.
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
# Moving a project to Comark
|
|
2
|
+
|
|
3
|
+
migrate-to-comark finds the Markdown libraries a project uses and moves it with each library's migrator: remark-to-comark, markdown-it-to-comark, and marked-to-comark. Start here when you don't know which library the project uses, or it uses more than one.
|
|
4
|
+
|
|
5
|
+
## Run it
|
|
6
|
+
|
|
7
|
+
```sh
|
|
8
|
+
npx migrate-to-comark --json # what it found and would change; writes nothing
|
|
9
|
+
npx migrate-to-comark --yes # write every change
|
|
10
|
+
npx migrate-to-comark --yes --only marked # one library at a time
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
- It reads every package.json for remark, markdown-it, and marked, and the frameworks built on them: Astro, Docusaurus, and react-markdown for remark; VitePress, VuePress, and Eleventy for markdown-it; svelte-markdown and ngx-markdown for marked.
|
|
14
|
+
- It writes only what each migrator's `rewrite --write` and `content --write` would. A file two migrators want goes to the library its nearest package.json declares. When that doesn't settle it, `conflicts` in the JSON names the file and both migrators, and the file stays as it is.
|
|
15
|
+
- Code that renders Markdown switches last. While a Markdown file its migrator handles needs a hand fix or is in `conflicts`, `held` in the JSON names the code file and the Markdown files it waits on. Fix those, then run it again.
|
|
16
|
+
- In an agent's shell it can't ask, so without `--yes` it reports and writes nothing.
|
|
17
|
+
|
|
18
|
+
## What it leaves to you
|
|
19
|
+
|
|
20
|
+
Everything each migrator reports. Run each one's check at the end, and follow its reference for the fixes:
|
|
21
|
+
|
|
22
|
+
```sh
|
|
23
|
+
npx remark-to-comark check . --json
|
|
24
|
+
npx markdown-it-to-comark check . --json
|
|
25
|
+
npx marked-to-comark check . --json
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
See the [remark-to-comark](remark-to-comark.md), [markdown-it-to-comark](markdown-it-to-comark.md), and [marked-to-comark](marked-to-comark.md) references.
|
|
29
|
+
|
|
30
|
+
## Register
|
|
31
|
+
|
|
32
|
+
- In `comark-ui`: not included. Run it with `npx`, or install it beside the preset for the migration.
|
|
33
|
+
- Alone: `pnpm add -D migrate-to-comark`. It installs the command `migrate-to-comark`, the library `migrate-to-comark` (`detect`, `plan`, `apply`), and the three migrators.
|
|
@@ -49,7 +49,7 @@ Promise callbacks are microtasks, and a timer's callback is a task.
|
|
|
49
49
|
- Options are shuffled the same way for every reader, so do not write options that point at others by place, such as "All of the above" or "Both A and B". Keep the options about as long as each other, since a right option much longer than the rest is reported.
|
|
50
50
|
- Keep a block to six options or fewer. Mark at least one right option in a question, or ask it as a poll. Put no block inside another block's prompt, option, or slot.
|
|
51
51
|
|
|
52
|
-
The HTML renderer inlines the quiz script and styles. Hosts can listen for `comark-quiz:answer` and `comark-quiz:ready`, and restore answers or results with `comark-quiz:state
|
|
52
|
+
The HTML renderer inlines the quiz script and styles. Hosts can listen for `comark-quiz:answer` and `comark-quiz:ready`, and restore answers or results with `comark-quiz:state` (or `window.__comarkQuizState` set before the script runs). In an iframe, `data-quiz-relay` on the lesson's `<html>` relays all three over postMessage to the parent; see [Saving answers](https://comark-ui.onmax.me/quiz/#saving-answers) on its page for the event shapes and storage behavior.
|
|
53
53
|
|
|
54
54
|
## Register
|
|
55
55
|
|
|
@@ -5,10 +5,16 @@ remark-to-comark moves a project that renders Markdown with remark, rehype, unif
|
|
|
5
5
|
## Run it
|
|
6
6
|
|
|
7
7
|
```sh
|
|
8
|
-
vp exec remark-to-comark
|
|
8
|
+
vp exec remark-to-comark migrate
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
`migrate` runs `content --write`, then `rewrite --write`, then `check`, on a clean git tree (`--force` skips that check). To review each step first, run them yourself:
|
|
12
|
+
|
|
13
|
+
```sh
|
|
14
|
+
vp exec remark-to-comark check --json
|
|
9
15
|
vp exec remark-to-comark content "**/*.{md,mdx}" --write
|
|
10
|
-
vp exec remark-to-comark rewrite
|
|
11
|
-
vp exec remark-to-comark check
|
|
16
|
+
vp exec remark-to-comark rewrite --write
|
|
17
|
+
vp exec remark-to-comark check --json
|
|
12
18
|
```
|
|
13
19
|
|
|
14
20
|
- `check` lists the remark setups it finds and what each plugin becomes, the unified chains `rewrite` can replace and why the others stay, the Markdown files `content` would change, and the MDX it leaves alone. `--json` prints each finding with its code, file, line, fix, and docs link.
|
|
@@ -4,7 +4,7 @@ comark-ui registers every comark-ui package for one renderer, in the order they
|
|
|
4
4
|
|
|
5
5
|
## Options
|
|
6
6
|
|
|
7
|
-
`comarkUi(options)` returns `{ plugins, components }`. Each key is a package's name without `comark-`, in camelCase, such as `fileTree`, `codeNotes`, or `readingTime`. The exceptions are `math` for comark-mathml, `outline` for comark-outline, and `mermaid` and `typeset`, which are not packages. `false` turns a plugin off along with its components, and an object turns it on with those options. `true` turns on `include` and leaves the others as they are:
|
|
7
|
+
`comarkUi(options)` returns `{ plugins, components }`. Each key is a package's name without `comark-`, in camelCase, such as `fileTree`, `codeNotes`, or `readingTime`. The exceptions are `math` for comark-mathml, `outline` for comark-outline, and `mermaid`, `shiki`, and `typeset`, which are not packages. `false` turns a plugin off along with its components, and an object turns it on with those options. `true` turns on `include` and leaves the others as they are:
|
|
8
8
|
|
|
9
9
|
```ts
|
|
10
10
|
comarkUi({
|
|
@@ -26,6 +26,7 @@ comarkUi({
|
|
|
26
26
|
- Media sizing reads only data URIs by default. `zoom: { size: true }` and `media: { size: true }` also fetch remote files while parsing, and `annotate: { size: true }` does so at HTML render time. Enable these only for trusted documents, because the requests follow redirects and can reach private networks. `{ size: false }` turns measurement off for that plugin; authored dimensions and screenshot viewports still work.
|
|
27
27
|
- `icon`'s options apply to every icon the preset draws, in cards, details, file trees, tabs, and code actions too.
|
|
28
28
|
- `mermaid` draws `mermaid` fences with comark-pele, on the server and offline. In the HTML entry the diagram zooms with comark-zoom unless `zoom` is `false`. `mermaid: false` turns it off.
|
|
29
|
+
- `shiki` highlights fenced code with your own Shiki, before comark-code: `{ highlighter: (language) => shiki | undefined, themes: { light, dark } }`. It is off until you pass it, so the preset bundles no grammars. `maxBlocks` and `maxSource` cap how many blocks, and how many characters of code, a document highlights; the blocks past them show plain, each with an issue.
|
|
29
30
|
- comark-critic has no component to add its styles, so put `criticCss`, which every entry exports, in the page.
|
|
30
31
|
- The preset styles the text around the blocks, scoped to the element the document renders into, on the same `--comark-*` tokens. Pass `typeset: false` when the site already styles Markdown, such as with Tailwind Typography's `prose`.
|
|
31
32
|
|