react-codemirror-runmode 2.2.1 → 2.3.0

package/.oxfmtrc.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "arrowParens": "avoid",
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "sortImports": true,
+  "sortPackageJson": true
+}

package/.oxlintrc.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript", "unicorn", "oxc", "react"],
+  "categories": {
+    "correctness": "error"
+  },
+  "settings": {
+    "react": {
+      "version": "19"
+    }
+  },
+  "rules": {
+    "typescript/no-explicit-any": "off",
+    "typescript/ban-ts-comment": "off",
+    "typescript/no-this-alias": "off",
+    "typescript/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ],
+    "no-useless-escape": "off",
+    "no-unused-expressions": "off",
+    "prefer-const": "error",
+    "no-unused-vars": "off",
+    "react-hooks/exhaustive-deps": "off"
+  },
+  "ignorePatterns": ["dist/**", "node_modules/**"]
+}

package/README.md

@@ -37,28 +37,64 @@ You can apply custom themes using CodeMirror's theme system. This component uses
 Props:
 
 - `lang`: `string` - The name of the language
-- `theme`: [`Highlighter`](https://lezer.codemirror.net/docs/ref/#highlight.Highlighter) - The highlight style
+- `theme`: [`Highlighter`](https://lezer.codemirror.net/docs/ref/#highlight.Highlighter)` | readonly Highlighter[]` - The highlight style. Pass an array to combine several highlighters; their emitted classes are merged per token (e.g. a generic token theme plus a markdown-specific one).
 - `children`: `string` - The code to highlight
 - `fallbackLanguage`: `Language` - Optional fallback language to use if the specified language isn't found
 - `languages`: `LanguageDescription[]` - Optional custom list of language descriptions
+- `markdownConfig`: `MarkdownConfig` - Optional markdown parser options, applied only when `lang` is `markdown`/`md`. See [Markdown highlighting](#markdown-highlighting).
 
-### `highlightCode<o>(languageName, input, highlightStyle, fallbackLanguage?, languages?, callback): Promise<Output[]>`
+### `highlightCode<o>(languageName, input, highlighter, fallbackLanguage?, languages?, callback, markdownConfig?): Promise<Output[]>`
 
 Parameters:
 
 - `languageName`: `string` - The name of the language
 - `input`: `string` - The code to highlight
-- `highlighter`: [`Highlighter`](https://lezer.codemirror.net/docs/ref/#highlight.Highlighter) - The highlight style
+- `highlighter`: [`Highlighter`](https://lezer.codemirror.net/docs/ref/#highlight.Highlighter)` | readonly Highlighter[]` - The highlight style, or an array of styles whose classes are merged
 - `fallbackLanguage`: `Language` - Optional fallback language to use if the specified language isn't found
 - `languages`: `LanguageDescription[]` - Optional custom list of language descriptions
 - `callback`: `(text: string, style: string | null, from: number, to: number) => Output)` - A callback function that converts the parsed tokens
+- `markdownConfig`: `MarkdownConfig` - Optional markdown parser options, applied only when `languageName` is `markdown`/`md`
 
-### `getCodeParser(languageName, defaultLanguage?): Promise<Parser | null>`
+### `getCodeParser(input, languageName, fallbackLanguage?, languages?, markdownConfig?): Promise<Parser | null>`
 
 Parameters:
 
-- `languageName: string` - The name of the language
-- `defaultLanguage?: Language` - A fallback language (Optional)
+- `input`: `string` - The code to highlight (used to preload nested code-fence languages for markdown)
+- `languageName`: `string` - The name of the language
+- `fallbackLanguage?`: `Language` - A fallback language (Optional)
+- `languages?`: `LanguageDescription[]` - Optional custom list of language descriptions
+- `markdownConfig?`: `MarkdownConfig` - Optional markdown parser options, applied only when `languageName` is `markdown`/`md`
+
+## Markdown highlighting
+
+When `lang` is `markdown` (or `md`), the markdown source is parsed with
+[`@codemirror/lang-markdown`](https://github.com/codemirror/lang-markdown). By default this
+uses a **CommonMark** base with no extensions. Pass `markdownConfig` to opt into GFM and/or
+custom [Lezer markdown extensions](https://github.com/lezer-parser/markdown#user-content-markdownextension):
+
+```javascript
+import { Highlighter } from 'react-codemirror-runmode'
+import { markdownLanguage } from '@codemirror/lang-markdown'
+
+// GFM (tables, strikethrough, task lists, autolinks) + custom extensions,
+// with two highlighters whose classes are merged per token.
+;<Highlighter
+  lang="markdown"
+  theme={[tokenHighlighter, mdTokenHighlighter]}
+  markdownConfig={{
+    base: markdownLanguage,
+    extensions: [
+      /* your @lezer/markdown extensions */
+    ]
+  }}
+>
+  {markdownSource}
+</Highlighter>
+```
+
+`MarkdownConfig` mirrors the `base` and `extensions` options of `markdown()`. Prefer a stable
+reference for `markdownConfig` (e.g. a module-level constant) to avoid re-highlighting on every
+render.
 
 ## License
 

package/dist/highlight.d.ts

@@ -1,6 +1,16 @@
-import { Parser } from '@lezer/common';
+import { markdown } from '@codemirror/lang-markdown';
 import { Language, LanguageDescription } from '@codemirror/language';
+import { Parser } from '@lezer/common';
 import { Highlighter } from '@lezer/highlight';
-export declare function getMarkdownParser(input: string, languages?: LanguageDescription[]): Promise<Parser>;
-export declare function getCodeParser(input: string, languageName: string, fallbackLanguage?: Language, languages?: LanguageDescription[]): Promise<Parser | null>;
-export declare function highlightCode<Output>(languageName: string, input: string, highlighter: Highlighter, fallbackLanguage: Language | undefined, languages: LanguageDescription[] | undefined, callback: (text: string, style: string | null, from: number, to: number) => Output): Promise<Output[]>;
+/**
+ * Configuration for the markdown parser used when highlighting `markdown`/`md`
+ * input. Mirrors the relevant subset of `@codemirror/lang-markdown`'s `markdown()`
+ * options so callers can opt into GFM (`base: markdownLanguage`) and custom Lezer
+ * markdown extensions (e.g. app-specific node props, GFM alerts).
+ *
+ * Defaults match `@codemirror/lang-markdown`: a CommonMark base with no extensions.
+ */
+export type MarkdownConfig = Pick<NonNullable<Parameters<typeof markdown>[0]>, 'base' | 'extensions'>;
+export declare function getMarkdownParser(input: string, languages?: LanguageDescription[], markdownConfig?: MarkdownConfig): Promise<Parser>;
+export declare function getCodeParser(input: string, languageName: string, fallbackLanguage?: Language, languages?: LanguageDescription[], markdownConfig?: MarkdownConfig): Promise<Parser | null>;
+export declare function highlightCode<Output>(languageName: string, input: string, highlighter: Highlighter | readonly Highlighter[], fallbackLanguage: Language | undefined, languages: LanguageDescription[] | undefined, callback: (text: string, style: string | null, from: number, to: number) => Output, markdownConfig?: MarkdownConfig): Promise<Output[]>;

package/dist/highlight.js

@@ -1,7 +1,7 @@
+import { markdown } from '@codemirror/lang-markdown';
 import { LanguageDescription } from '@codemirror/language';
-import { highlightTree } from '@lezer/highlight';
 import { languages as builtinLanguages } from '@codemirror/language-data';
-import { markdown } from '@codemirror/lang-markdown';
+import { highlightTree } from '@lezer/highlight';
 /**
  * Extract language names from code blocks in markdown text
  */
@@ -29,17 +29,18 @@ async function preloadLanguageParsers(languageNames, languages) {
         }
     }))).filter((desc) => !!desc);
 }
-export async function getMarkdownParser(input, languages = builtinLanguages) {
+export async function getMarkdownParser(input, languages = builtinLanguages, markdownConfig = {}) {
     const codeBlockLanguages = extractCodeBlockLanguages(input);
     const preloadedLanguages = await preloadLanguageParsers(codeBlockLanguages || [], languages);
     const langSupport = markdown({
+        ...markdownConfig,
         codeLanguages: preloadedLanguages
     });
     return langSupport.language.parser;
 }
-export async function getCodeParser(input, languageName, fallbackLanguage, languages = builtinLanguages) {
+export async function getCodeParser(input, languageName, fallbackLanguage, languages = builtinLanguages, markdownConfig) {
     if (languageName === 'markdown' || languageName === 'md') {
-        return await getMarkdownParser(input, languages);
+        return await getMarkdownParser(input, languages, markdownConfig);
     }
     else {
         const found = LanguageDescription.matchLanguageName(languages, languageName, true);
@@ -53,8 +54,8 @@ export async function getCodeParser(input, languageName, fallbackLanguage, langu
     }
     return fallbackLanguage ? fallbackLanguage.parser : null;
 }
-export async function highlightCode(languageName, input, highlighter, fallbackLanguage, languages, callback) {
-    const parser = await getCodeParser(input, languageName, fallbackLanguage, languages);
+export async function highlightCode(languageName, input, highlighter, fallbackLanguage, languages, callback, markdownConfig) {
+    const parser = await getCodeParser(input, languageName, fallbackLanguage, languages, markdownConfig);
     if (parser) {
         const tree = parser.parse(input);
         const output = [];

package/dist/react-highlighter.d.ts

@@ -1,11 +1,24 @@
-import React from 'react';
-import type { Highlighter as LezerHighlighter } from '@lezer/highlight';
 import type { Language, LanguageDescription } from '@codemirror/language';
+import type { Highlighter as LezerHighlighter } from '@lezer/highlight';
+import React from 'react';
+import { type MarkdownConfig } from './highlight.js';
 export type HighlighterProps = {
     lang: string;
     children: string;
-    theme: LezerHighlighter;
+    /**
+     * One highlighter, or several whose emitted classes are merged per token.
+     * Pass an array to combine, e.g. a generic token theme with a
+     * markdown-specific one.
+     */
+    theme: LezerHighlighter | readonly LezerHighlighter[];
     fallbackLanguage?: Language;
     languages?: LanguageDescription[];
+    /**
+     * Markdown parser options, used only when `lang` is `markdown`/`md`. Enables
+     * GFM (`base: markdownLanguage`) and custom Lezer markdown extensions. Pass a
+     * stable reference (e.g. a module-level constant) to avoid re-highlighting on
+     * every render.
+     */
+    markdownConfig?: MarkdownConfig;
 };
 export declare const Highlighter: React.NamedExoticComponent<HighlighterProps>;

package/dist/react-highlighter.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo, useEffect, useState } from 'react';
 import { highlightCode } from './highlight.js';
 export const Highlighter = memo((props) => {
-    const { lang, children: code, theme, fallbackLanguage, languages } = props;
+    const { lang, children: code, theme, fallbackLanguage, languages, markdownConfig } = props;
     const [highlightedCode, setHighlightedCode] = useState(null);
     useEffect(() => {
         highlightCode(lang, code, theme, fallbackLanguage, languages, (text, style, from) => {
             return (_jsx("span", { className: style || '', children: text }, from));
-        }).then(setHighlightedCode);
-    }, [lang, code, theme]);
+        }, markdownConfig).then(setHighlightedCode);
+    }, [lang, code, theme, markdownConfig]);
     return _jsx(_Fragment, { children: highlightedCode || code });
 });
 Highlighter.displayName = 'Highlighter';

package/dist/src/highlight.d.ts

@@ -0,0 +1,16 @@
+import { markdown } from '@codemirror/lang-markdown';
+import { Language, LanguageDescription } from '@codemirror/language';
+import { Parser } from '@lezer/common';
+import { Highlighter } from '@lezer/highlight';
+/**
+ * Configuration for the markdown parser used when highlighting `markdown`/`md`
+ * input. Mirrors the relevant subset of `@codemirror/lang-markdown`'s `markdown()`
+ * options so callers can opt into GFM (`base: markdownLanguage`) and custom Lezer
+ * markdown extensions (e.g. app-specific node props, GFM alerts).
+ *
+ * Defaults match `@codemirror/lang-markdown`: a CommonMark base with no extensions.
+ */
+export type MarkdownConfig = Pick<NonNullable<Parameters<typeof markdown>[0]>, 'base' | 'extensions'>;
+export declare function getMarkdownParser(input: string, languages?: LanguageDescription[], markdownConfig?: MarkdownConfig): Promise<Parser>;
+export declare function getCodeParser(input: string, languageName: string, fallbackLanguage?: Language, languages?: LanguageDescription[], markdownConfig?: MarkdownConfig): Promise<Parser | null>;
+export declare function highlightCode<Output>(languageName: string, input: string, highlighter: Highlighter | readonly Highlighter[], fallbackLanguage: Language | undefined, languages: LanguageDescription[] | undefined, callback: (text: string, style: string | null, from: number, to: number) => Output, markdownConfig?: MarkdownConfig): Promise<Output[]>;

package/dist/src/highlight.js

@@ -0,0 +1,76 @@
+import { markdown } from '@codemirror/lang-markdown';
+import { LanguageDescription } from '@codemirror/language';
+import { languages as builtinLanguages } from '@codemirror/language-data';
+import { highlightTree } from '@lezer/highlight';
+/**
+ * Extract language names from code blocks in markdown text
+ */
+function extractCodeBlockLanguages(text) {
+    const codeBlockRegex = /```(\w+)/g;
+    const languages = [];
+    let match;
+    while ((match = codeBlockRegex.exec(text)) !== null) {
+        languages.push(match[1]);
+    }
+    return languages;
+}
+/**
+ * Pre-load parsers for a list of language names
+ */
+async function preloadLanguageParsers(languageNames, languages) {
+    return (await Promise.all(languageNames.map(async (langName) => {
+        const found = LanguageDescription.matchLanguageName(languages, langName, true);
+        if (found instanceof LanguageDescription) {
+            if (!found.support)
+                await found.load();
+            if (found.support) {
+                return found;
+            }
+        }
+    }))).filter((desc) => !!desc);
+}
+export async function getMarkdownParser(input, languages = builtinLanguages, markdownConfig = {}) {
+    const codeBlockLanguages = extractCodeBlockLanguages(input);
+    const preloadedLanguages = await preloadLanguageParsers(codeBlockLanguages || [], languages);
+    const langSupport = markdown({
+        ...markdownConfig,
+        codeLanguages: preloadedLanguages
+    });
+    return langSupport.language.parser;
+}
+export async function getCodeParser(input, languageName, fallbackLanguage, languages = builtinLanguages, markdownConfig) {
+    if (languageName === 'markdown' || languageName === 'md') {
+        return await getMarkdownParser(input, languages, markdownConfig);
+    }
+    else {
+        const found = LanguageDescription.matchLanguageName(languages, languageName, true);
+        if (found instanceof LanguageDescription) {
+            if (!found.support)
+                await found.load();
+            return found.support ? found.support.language.parser : null;
+        }
+        else if (found)
+            return found.parser;
+    }
+    return fallbackLanguage ? fallbackLanguage.parser : null;
+}
+export async function highlightCode(languageName, input, highlighter, fallbackLanguage, languages, callback, markdownConfig) {
+    const parser = await getCodeParser(input, languageName, fallbackLanguage, languages, markdownConfig);
+    if (parser) {
+        const tree = parser.parse(input);
+        const output = [];
+        let pos = 0;
+        highlightTree(tree, highlighter, (from, to, classes) => {
+            if (from > pos)
+                output.push(callback(input.slice(pos, from), null, pos, from));
+            output.push(callback(input.slice(from, to), classes, from, to));
+            pos = to;
+        });
+        pos != tree.length &&
+            output.push(callback(input.slice(pos, tree.length), null, pos, tree.length));
+        return output;
+    }
+    else {
+        return [callback(input, null, 0, input.length)];
+    }
+}

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './highlight.js';
+export * from './react-highlighter.js';

package/dist/src/index.js

@@ -0,0 +1,2 @@
+export * from './highlight.js';
+export * from './react-highlighter.js';

package/dist/src/react-highlighter.d.ts

@@ -0,0 +1,24 @@
+import type { Language, LanguageDescription } from '@codemirror/language';
+import type { Highlighter as LezerHighlighter } from '@lezer/highlight';
+import React from 'react';
+import { type MarkdownConfig } from './highlight.js';
+export type HighlighterProps = {
+    lang: string;
+    children: string;
+    /**
+     * One highlighter, or several whose emitted classes are merged per token.
+     * Pass an array to combine, e.g. a generic token theme with a
+     * markdown-specific one.
+     */
+    theme: LezerHighlighter | readonly LezerHighlighter[];
+    fallbackLanguage?: Language;
+    languages?: LanguageDescription[];
+    /**
+     * Markdown parser options, used only when `lang` is `markdown`/`md`. Enables
+     * GFM (`base: markdownLanguage`) and custom Lezer markdown extensions. Pass a
+     * stable reference (e.g. a module-level constant) to avoid re-highlighting on
+     * every render.
+     */
+    markdownConfig?: MarkdownConfig;
+};
+export declare const Highlighter: React.NamedExoticComponent<HighlighterProps>;

package/dist/src/react-highlighter.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useEffect, useState } from 'react';
+import { highlightCode } from './highlight.js';
+export const Highlighter = memo((props) => {
+    const { lang, children: code, theme, fallbackLanguage, languages, markdownConfig } = props;
+    const [highlightedCode, setHighlightedCode] = useState(null);
+    useEffect(() => {
+        highlightCode(lang, code, theme, fallbackLanguage, languages, (text, style, from) => {
+            return (_jsx("span", { className: style || '', children: text }, from));
+        }, markdownConfig).then(setHighlightedCode);
+    }, [lang, code, theme, markdownConfig]);
+    return _jsx(_Fragment, { children: highlightedCode || code });
+});
+Highlighter.displayName = 'Highlighter';

package/package.json

@@ -1,7 +1,19 @@
 {
   "name": "react-codemirror-runmode",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Syntax highlighting for react, utilizing CodeMirror's parser",
+  "keywords": [
+    "codemirror",
+    "highlight",
+    "react",
+    "syntax"
+  ],
+  "license": "MIT",
+  "author": "Takuya Matsuyama <hi@craftz.dog>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/craftzdog/react-codemirror-runmode.git"
+  },
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -13,50 +25,36 @@
   "scripts": {
     "build": "tsc --project tsconfig.build.json",
     "test": "vitest",
-    "lint": "eslint .",
+    "lint": "oxlint",
     "typecheck": "tsc --noEmit",
-    "format": "prettier --write .",
-    "format:check": "prettier --check .",
+    "format": "oxfmt",
+    "format:check": "oxfmt --check",
     "prepublishOnly": "npm-run-all lint format:check build && npm run test run"
   },
-  "keywords": [
-    "react",
-    "codemirror",
-    "syntax",
-    "highlight"
-  ],
-  "author": "Takuya Matsuyama <hi@craftz.dog>",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/craftzdog/react-codemirror-runmode.git"
-  },
   "dependencies": {
-    "@codemirror/language": "^6.11.3",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/language": "^6.12.3",
     "@codemirror/language-data": "^6.5.2",
-    "@lezer/common": "^1.4.0",
+    "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3"
   },
-  "peerDependencies": {
-    "react": ">= 18"
-  },
   "devDependencies": {
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@testing-library/react": "^16.3.0",
-    "@types/node": "^25.0.1",
-    "@types/react": "^19.2.7",
-    "@vitejs/plugin-react": "^5.1.2",
-    "eslint": "^9.39.1",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-react": "^7.37.5",
-    "jsdom": "^27.3.0",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^26.0.0",
+    "@types/react": "^19.2.17",
+    "@vitejs/plugin-react": "^6.0.2",
+    "jsdom": "^29.1.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.7.4",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.49.0",
-    "vite": "^7.2.7",
-    "vitest": "^4.0.15"
+    "oxfmt": "0.56.0",
+    "oxlint": "1.71.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.9"
+  },
+  "peerDependencies": {
+    "react": ">= 18"
   }
 }

package/pnpm-workspace.yaml

@@ -0,0 +1,43 @@
+allowBuilds:
+  esbuild: true
+minimumReleaseAgeExclude:
+  - '@oxfmt/binding-android-arm-eabi@0.56.0'
+  - '@oxfmt/binding-android-arm64@0.56.0'
+  - '@oxfmt/binding-darwin-arm64@0.56.0'
+  - '@oxfmt/binding-darwin-x64@0.56.0'
+  - '@oxfmt/binding-freebsd-x64@0.56.0'
+  - '@oxfmt/binding-linux-arm-gnueabihf@0.56.0'
+  - '@oxfmt/binding-linux-arm-musleabihf@0.56.0'
+  - '@oxfmt/binding-linux-arm64-gnu@0.56.0'
+  - '@oxfmt/binding-linux-arm64-musl@0.56.0'
+  - '@oxfmt/binding-linux-ppc64-gnu@0.56.0'
+  - '@oxfmt/binding-linux-riscv64-gnu@0.56.0'
+  - '@oxfmt/binding-linux-riscv64-musl@0.56.0'
+  - '@oxfmt/binding-linux-s390x-gnu@0.56.0'
+  - '@oxfmt/binding-linux-x64-gnu@0.56.0'
+  - '@oxfmt/binding-linux-x64-musl@0.56.0'
+  - '@oxfmt/binding-openharmony-arm64@0.56.0'
+  - '@oxfmt/binding-win32-arm64-msvc@0.56.0'
+  - '@oxfmt/binding-win32-ia32-msvc@0.56.0'
+  - '@oxfmt/binding-win32-x64-msvc@0.56.0'
+  - '@oxlint/binding-android-arm-eabi@1.71.0'
+  - '@oxlint/binding-android-arm64@1.71.0'
+  - '@oxlint/binding-darwin-arm64@1.71.0'
+  - '@oxlint/binding-darwin-x64@1.71.0'
+  - '@oxlint/binding-freebsd-x64@1.71.0'
+  - '@oxlint/binding-linux-arm-gnueabihf@1.71.0'
+  - '@oxlint/binding-linux-arm-musleabihf@1.71.0'
+  - '@oxlint/binding-linux-arm64-gnu@1.71.0'
+  - '@oxlint/binding-linux-arm64-musl@1.71.0'
+  - '@oxlint/binding-linux-ppc64-gnu@1.71.0'
+  - '@oxlint/binding-linux-riscv64-gnu@1.71.0'
+  - '@oxlint/binding-linux-riscv64-musl@1.71.0'
+  - '@oxlint/binding-linux-s390x-gnu@1.71.0'
+  - '@oxlint/binding-linux-x64-gnu@1.71.0'
+  - '@oxlint/binding-linux-x64-musl@1.71.0'
+  - '@oxlint/binding-openharmony-arm64@1.71.0'
+  - '@oxlint/binding-win32-arm64-msvc@1.71.0'
+  - '@oxlint/binding-win32-ia32-msvc@1.71.0'
+  - '@oxlint/binding-win32-x64-msvc@1.71.0'
+  - oxfmt@0.56.0
+  - oxlint@1.71.0

package/src/highlight.ts

@@ -1,8 +1,21 @@
-import { Parser } from '@lezer/common'
+import { markdown } from '@codemirror/lang-markdown'
 import { Language, LanguageDescription } from '@codemirror/language'
-import { Highlighter, highlightTree } from '@lezer/highlight'
 import { languages as builtinLanguages } from '@codemirror/language-data'
-import { markdown } from '@codemirror/lang-markdown'
+import { Parser } from '@lezer/common'
+import { Highlighter, highlightTree } from '@lezer/highlight'
+
+/**
+ * Configuration for the markdown parser used when highlighting `markdown`/`md`
+ * input. Mirrors the relevant subset of `@codemirror/lang-markdown`'s `markdown()`
+ * options so callers can opt into GFM (`base: markdownLanguage`) and custom Lezer
+ * markdown extensions (e.g. app-specific node props, GFM alerts).
+ *
+ * Defaults match `@codemirror/lang-markdown`: a CommonMark base with no extensions.
+ */
+export type MarkdownConfig = Pick<
+  NonNullable<Parameters<typeof markdown>[0]>,
+  'base' | 'extensions'
+>
 
 /**
  * Extract language names from code blocks in markdown text
@@ -27,11 +40,7 @@ async function preloadLanguageParsers(
   return (
     await Promise.all(
       languageNames.map(async langName => {
-        const found = LanguageDescription.matchLanguageName(
-          languages,
-          langName,
-          true
-        )
+        const found = LanguageDescription.matchLanguageName(languages, langName, true)
         if (found instanceof LanguageDescription) {
           if (!found.support) await found.load()
           if (found.support) {
@@ -45,14 +54,13 @@ async function preloadLanguageParsers(
 
 export async function getMarkdownParser(
   input: string,
-  languages: LanguageDescription[] = builtinLanguages
+  languages: LanguageDescription[] = builtinLanguages,
+  markdownConfig: MarkdownConfig = {}
 ): Promise<Parser> {
   const codeBlockLanguages = extractCodeBlockLanguages(input)
-  const preloadedLanguages = await preloadLanguageParsers(
-    codeBlockLanguages || [],
-    languages
-  )
+  const preloadedLanguages = await preloadLanguageParsers(codeBlockLanguages || [], languages)
   const langSupport = markdown({
+    ...markdownConfig,
     codeLanguages: preloadedLanguages
   })
   return langSupport.language.parser
@@ -62,16 +70,13 @@ export async function getCodeParser(
   input: string,
   languageName: string,
   fallbackLanguage?: Language,
-  languages: LanguageDescription[] = builtinLanguages
+  languages: LanguageDescription[] = builtinLanguages,
+  markdownConfig?: MarkdownConfig
 ): Promise<Parser | null> {
   if (languageName === 'markdown' || languageName === 'md') {
-    return await getMarkdownParser(input, languages)
+    return await getMarkdownParser(input, languages, markdownConfig)
   } else {
-    const found = LanguageDescription.matchLanguageName(
-      languages,
-      languageName,
-      true
-    )
+    const found = LanguageDescription.matchLanguageName(languages, languageName, true)
     if (found instanceof LanguageDescription) {
       if (!found.support) await found.load()
       return found.support ? found.support.language.parser : null
@@ -83,36 +88,30 @@ export async function getCodeParser(
 export async function highlightCode<Output>(
   languageName: string,
   input: string,
-  highlighter: Highlighter,
+  highlighter: Highlighter | readonly Highlighter[],
   fallbackLanguage: Language | undefined,
   languages: LanguageDescription[] | undefined,
-  callback: (
-    text: string,
-    style: string | null,
-    from: number,
-    to: number
-  ) => Output
+  callback: (text: string, style: string | null, from: number, to: number) => Output,
+  markdownConfig?: MarkdownConfig
 ): Promise<Output[]> {
   const parser = await getCodeParser(
     input,
     languageName,
     fallbackLanguage,
-    languages
+    languages,
+    markdownConfig
   )
   if (parser) {
     const tree = parser.parse(input)
     const output: Array<Output> = []
     let pos = 0
     highlightTree(tree, highlighter, (from, to, classes) => {
-      if (from > pos)
-        output.push(callback(input.slice(pos, from), null, pos, from))
+      if (from > pos) output.push(callback(input.slice(pos, from), null, pos, from))
       output.push(callback(input.slice(from, to), classes, from, to))
       pos = to
     })
     pos != tree.length &&
-      output.push(
-        callback(input.slice(pos, tree.length), null, pos, tree.length)
-      )
+      output.push(callback(input.slice(pos, tree.length), null, pos, tree.length))
     return output
   } else {
     return [callback(input, null, 0, input.length)]

package/src/react-highlighter.tsx

@@ -1,21 +1,32 @@
-import React, { memo, useEffect, useState } from 'react'
-import { highlightCode } from './highlight.js'
-import type { Highlighter as LezerHighlighter } from '@lezer/highlight'
 import type { Language, LanguageDescription } from '@codemirror/language'
+import type { Highlighter as LezerHighlighter } from '@lezer/highlight'
+import React, { memo, useEffect, useState } from 'react'
+
+import { highlightCode, type MarkdownConfig } from './highlight.js'
 
 export type HighlighterProps = {
   lang: string
   children: string
-  theme: LezerHighlighter
+  /**
+   * One highlighter, or several whose emitted classes are merged per token.
+   * Pass an array to combine, e.g. a generic token theme with a
+   * markdown-specific one.
+   */
+  theme: LezerHighlighter | readonly LezerHighlighter[]
   fallbackLanguage?: Language
   languages?: LanguageDescription[]
+  /**
+   * Markdown parser options, used only when `lang` is `markdown`/`md`. Enables
+   * GFM (`base: markdownLanguage`) and custom Lezer markdown extensions. Pass a
+   * stable reference (e.g. a module-level constant) to avoid re-highlighting on
+   * every render.
+   */
+  markdownConfig?: MarkdownConfig
 }
 
 export const Highlighter = memo<HighlighterProps>((props: HighlighterProps) => {
-  const { lang, children: code, theme, fallbackLanguage, languages } = props
-  const [highlightedCode, setHighlightedCode] = useState<
-    React.ReactNode[] | null
-  >(null)
+  const { lang, children: code, theme, fallbackLanguage, languages, markdownConfig } = props
+  const [highlightedCode, setHighlightedCode] = useState<React.ReactNode[] | null>(null)
 
   useEffect(() => {
     highlightCode(
@@ -30,9 +41,10 @@ export const Highlighter = memo<HighlighterProps>((props: HighlighterProps) => {
             {text}
           </span>
         )
-      }
+      },
+      markdownConfig
     ).then(setHighlightedCode)
-  }, [lang, code, theme])
+  }, [lang, code, theme, markdownConfig])
 
   return <>{highlightedCode || code}</>
 })

package/test/index.spec.tsx

@@ -1,12 +1,14 @@
+import { markdownLanguage } from '@codemirror/lang-markdown'
+import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
+import { Parser } from '@lezer/common'
+import { tagHighlighter, tags } from '@lezer/highlight'
+import { render, screen } from '@testing-library/react'
 // @vitest-environment jsdom
 import { describe, expect, it } from 'vitest'
-import { Parser } from '@lezer/common'
-import { oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
+
 import { getCodeParser, highlightCode, Highlighter } from '../src'
-import { render, screen } from '@testing-library/react'
 
-const sleep = (msec: number) =>
-  new Promise(resolve => setTimeout(resolve, msec))
+const sleep = (msec: number) => new Promise(resolve => setTimeout(resolve, msec))
 
 describe('getCodeParser', () => {
   it('loads a JavaScript parser', async () => {
@@ -133,6 +135,58 @@ describe('Highlight codeblocks', () => {
   })
 })
 
+describe('markdownConfig (GFM)', () => {
+  const strikeHighlighter = tagHighlighter([{ tag: tags.strikethrough, class: 'strike' }])
+
+  it('does not tokenize GFM strikethrough with the default CommonMark base', async () => {
+    const highlighted = await highlightCode(
+      'markdown',
+      '~~gone~~',
+      strikeHighlighter,
+      undefined,
+      undefined,
+      (text, style) => ({ text, style })
+    )
+    expect(highlighted.some(t => t.style === 'strike')).toBe(false)
+  })
+
+  it('tokenizes GFM strikethrough when base is markdownLanguage', async () => {
+    const highlighted = await highlightCode(
+      'markdown',
+      '~~gone~~',
+      strikeHighlighter,
+      undefined,
+      undefined,
+      (text, style) => ({ text, style }),
+      { base: markdownLanguage }
+    )
+    const struck = highlighted.find(t => t.style === 'strike')
+    expect(struck).toBeDefined()
+    expect(struck?.text).toContain('gone')
+  })
+})
+
+describe('multiple highlighters', () => {
+  const highlighterA = tagHighlighter([{ tag: tags.strikethrough, class: 'a-strike' }])
+  const highlighterB = tagHighlighter([{ tag: tags.strikethrough, class: 'b-strike' }])
+
+  it('merges classes emitted by an array of highlighters', async () => {
+    const highlighted = await highlightCode(
+      'markdown',
+      '~~gone~~',
+      [highlighterA, highlighterB],
+      undefined,
+      undefined,
+      (text, style) => ({ text, style }),
+      { base: markdownLanguage }
+    )
+    const struck = highlighted.find(t => t.style?.includes('a-strike'))
+    expect(struck).toBeDefined()
+    expect(struck?.style).toContain('a-strike')
+    expect(struck?.style).toContain('b-strike')
+  })
+})
+
 describe('React Highlighter', () => {
   it('renders highlighted code', async () => {
     const code = 'const x = 123'

package/tsconfig.build.json

@@ -1,4 +1,7 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src"
+  },
   "exclude": ["test", "vite.config.ts"]
 }

package/vite.config.ts

@@ -1,6 +1,5 @@
-/// <reference types="vitest/config" />
-import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vitest/config'
 
 export default defineConfig({
   plugins: [react()],

package/.prettierignore

@@ -1,137 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
-
-# IDE
-.idea/
-.vscode/
-
-# Lock files
-pnpm-lock.yaml

package/.prettierrc.json

@@ -1,10 +0,0 @@
-{
-  "arrowParens": "avoid",
-  "singleQuote": true,
-  "bracketSpacing": true,
-  "endOfLine": "lf",
-  "semi": false,
-  "tabWidth": 2,
-  "trailingComma": "none",
-  "plugins": []
-}

package/eslint.config.js

@@ -1,45 +0,0 @@
-import js from '@eslint/js'
-import eslintTs from 'typescript-eslint'
-import eslintReact from 'eslint-plugin-react'
-
-export default eslintTs.config(
-  { ignores: ['dist'] },
-  js.configs.recommended,
-  eslintTs.configs.recommended,
-  eslintReact.configs.flat.recommended,
-  eslintReact.configs.flat['jsx-runtime'],
-  {
-    plugins: {
-      '@typescript-eslint': eslintTs.plugin
-    },
-    rules: {
-      // TypeScript
-      '@typescript-eslint/no-explicit-any': 'off',
-      '@typescript-eslint/no-unused-vars': [
-        'warn',
-        {
-          argsIgnorePattern: '^_',
-          varsIgnorePattern: '^_',
-          caughtErrorsIgnorePattern: '^_'
-        }
-      ],
-      '@typescript-eslint/ban-ts-comment': 'off',
-      '@typescript-eslint/no-this-alias': 'off',
-      '@typescript-eslint/no-var-requires': 'off',
-      '@typescript-eslint/no-unused-expressions': 'off',
-
-      // JavaScript and React rules
-      'no-useless-escape': 0,
-      'prefer-const': 2,
-      'no-unused-vars': 0
-    }
-  },
-
-  {
-    settings: {
-      react: {
-        version: '19'
-      }
-    }
-  }
-)