react-codemirror-runmode 2.0.2 → 2.2.0

package/.claude/settings.local.json

@@ -0,0 +1,3 @@
+{
+  "enableAllProjectMcpServers": false
+}

package/README.md

@@ -39,14 +39,18 @@ Props:
 - `lang`: `string` - The name of the language
 - `theme`: [`Highlighter`](https://lezer.codemirror.net/docs/ref/#highlight.Highlighter) - The highlight style
 - `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
 
-### `highlightCode<Output>(languageName, input, highlightStyle, callback): Promise<Output[]>`
+### `highlightCode<o>(languageName, input, highlightStyle, fallbackLanguage?, languages?, callback): 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
+- `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
 
 ### `getCodeParser(languageName, defaultLanguage?): Promise<Parser | null>`

package/dist/highlight.d.ts

@@ -1,5 +1,5 @@
 import { Parser } from '@lezer/common';
-import { Language } from '@codemirror/language';
+import { Language, LanguageDescription } from '@codemirror/language';
 import { Highlighter } from '@lezer/highlight';
-export declare function getCodeParser(languageName: string, defaultLanguage?: Language): Promise<Parser | null>;
-export declare function highlightCode<Output>(languageName: string, input: string, highlighter: Highlighter, callback: (text: string, style: string | null, from: number, to: number) => Output): Promise<Output[]>;
+export declare function getCodeParser(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[]>;

package/dist/highlight.js

@@ -1,8 +1,15 @@
 import { LanguageDescription } from '@codemirror/language';
 import { highlightTree } from '@lezer/highlight';
-import { languages } from '@codemirror/language-data';
-export async function getCodeParser(languageName, defaultLanguage) {
-    if (languageName && languages) {
+import { languages as builtinLanguages } from '@codemirror/language-data';
+import { markdown } from '@codemirror/lang-markdown';
+export async function getCodeParser(languageName, fallbackLanguage, languages = builtinLanguages) {
+    if (languageName === 'markdown' || languageName === 'md') {
+        const mdSupport = markdown({
+            codeLanguages: builtinLanguages
+        });
+        return mdSupport.language.parser;
+    }
+    else {
         const found = LanguageDescription.matchLanguageName(languages, languageName, true);
         if (found instanceof LanguageDescription) {
             if (!found.support)
@@ -12,10 +19,10 @@ export async function getCodeParser(languageName, defaultLanguage) {
         else if (found)
             return found.parser;
     }
-    return defaultLanguage ? defaultLanguage.parser : null;
+    return fallbackLanguage ? fallbackLanguage.parser : null;
 }
-export async function highlightCode(languageName, input, highlighter, callback) {
-    const parser = await getCodeParser(languageName);
+export async function highlightCode(languageName, input, highlighter, fallbackLanguage, languages, callback) {
+    const parser = await getCodeParser(languageName, fallbackLanguage, languages);
     if (parser) {
         const tree = parser.parse(input);
         const output = [];

package/dist/react-highlighter.d.ts

@@ -1,8 +1,11 @@
 import React from 'react';
 import type { Highlighter as LezerHighlighter } from '@lezer/highlight';
+import type { Language, LanguageDescription } from '@codemirror/language';
 export type HighlighterProps = {
     lang: string;
     children: string;
     theme: LezerHighlighter;
+    fallbackLanguage?: Language;
+    languages?: LanguageDescription[];
 };
 export declare const Highlighter: React.NamedExoticComponent<HighlighterProps>;

package/dist/react-highlighter.js

@@ -2,10 +2,10 @@ 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 } = props;
+    const { lang, children: code, theme, fallbackLanguage, languages } = props;
     const [highlightedCode, setHighlightedCode] = useState(null);
     useEffect(() => {
-        highlightCode(lang, code, theme, (text, style, from) => {
+        highlightCode(lang, code, theme, fallbackLanguage, languages, (text, style, from) => {
             return (_jsx("span", { className: style || '', children: text }, from));
         }).then(setHighlightedCode);
     }, [lang, code, theme]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-codemirror-runmode",
-  "version": "2.0.2",
+  "version": "2.2.0",
   "description": "Syntax highlighting for react, utilizing CodeMirror's parser",
   "type": "module",
   "main": "dist/index.js",
@@ -14,6 +14,7 @@
     "build": "tsc --project tsconfig.build.json",
     "test": "vitest",
     "lint": "eslint .",
+    "typecheck": "tsc --noEmit",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "prepublishOnly": "npm-run-all lint format:check build && npm run test run"
@@ -31,30 +32,31 @@
     "url": "https://github.com/craftzdog/react-codemirror-runmode.git"
   },
   "dependencies": {
-    "@codemirror/language": "^6.11.0",
-    "@codemirror/language-data": "^6.5.1",
-    "@lezer/common": "^1.2.3",
-    "@lezer/highlight": "^1.2.1"
+    "@codemirror/language": "^6.11.3",
+    "@codemirror/language-data": "^6.5.2",
+    "@lezer/common": "^1.4.0",
+    "@lezer/highlight": "^1.2.3"
   },
   "peerDependencies": {
     "react": ">= 18"
   },
   "devDependencies": {
-    "@codemirror/theme-one-dark": "^6.1.2",
-    "@testing-library/react": "^16.2.0",
-    "@types/node": "^22.13.10",
-    "@types/react": "^19.0.12",
-    "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.22.0",
-    "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-react": "^7.37.4",
-    "jsdom": "^26.0.0",
+    "@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",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.5.3",
-    "react": "^19.0.0",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.27.0",
-    "vite": "^6.2.2",
-    "vitest": "^3.0.9"
+    "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"
   }
 }

package/src/highlight.ts

@@ -1,13 +1,20 @@
 import { Parser } from '@lezer/common'
 import { Language, LanguageDescription } from '@codemirror/language'
 import { Highlighter, highlightTree } from '@lezer/highlight'
-import { languages } from '@codemirror/language-data'
+import { languages as builtinLanguages } from '@codemirror/language-data'
+import { markdown } from '@codemirror/lang-markdown'
 
 export async function getCodeParser(
   languageName: string,
-  defaultLanguage?: Language
+  fallbackLanguage?: Language,
+  languages: LanguageDescription[] = builtinLanguages
 ): Promise<Parser | null> {
-  if (languageName && languages) {
+  if (languageName === 'markdown' || languageName === 'md') {
+    const mdSupport = markdown({
+      codeLanguages: builtinLanguages
+    })
+    return mdSupport.language.parser
+  } else {
     const found = LanguageDescription.matchLanguageName(
       languages,
       languageName,
@@ -18,13 +25,15 @@ export async function getCodeParser(
       return found.support ? found.support.language.parser : null
     } else if (found) return (found as any).parser
   }
-  return defaultLanguage ? defaultLanguage.parser : null
+  return fallbackLanguage ? fallbackLanguage.parser : null
 }
 
 export async function highlightCode<Output>(
   languageName: string,
   input: string,
   highlighter: Highlighter,
+  fallbackLanguage: Language | undefined,
+  languages: LanguageDescription[] | undefined,
   callback: (
     text: string,
     style: string | null,
@@ -32,7 +41,7 @@ export async function highlightCode<Output>(
     to: number
   ) => Output
 ): Promise<Output[]> {
-  const parser = await getCodeParser(languageName)
+  const parser = await getCodeParser(languageName, fallbackLanguage, languages)
   if (parser) {
     const tree = parser.parse(input)
     const output: Array<Output> = []

package/src/react-highlighter.tsx

@@ -1,15 +1,18 @@
 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'
 
 export type HighlighterProps = {
   lang: string
   children: string
   theme: LezerHighlighter
+  fallbackLanguage?: Language
+  languages?: LanguageDescription[]
 }
 
 export const Highlighter = memo<HighlighterProps>((props: HighlighterProps) => {
-  const { lang, children: code, theme } = props
+  const { lang, children: code, theme, fallbackLanguage, languages } = props
   const [highlightedCode, setHighlightedCode] = useState<
     React.ReactNode[] | null
   >(null)
@@ -19,6 +22,8 @@ export const Highlighter = memo<HighlighterProps>((props: HighlighterProps) => {
       lang,
       code,
       theme,
+      fallbackLanguage,
+      languages,
       (text: string, style: string | null, from: number) => {
         return (
           <span key={from} className={style || ''}>

package/test/index.spec.tsx

@@ -29,6 +29,8 @@ describe('highlightCode', () => {
       'js',
       'const x = 123',
       oneDarkHighlightStyle,
+      undefined,
+      undefined,
       (text, style, from, to) => ({ text, style, from, to })
     )
     expect(highlighted).toHaveLength(7)
@@ -65,6 +67,40 @@ describe('highlightCode', () => {
   })
 })
 
+describe('Highlight codeblocks', () => {
+  it('highlights codeblocks in markdown', async () => {
+    const mdCode = '```js\nconst x = 123\n```'
+    const highlighted = await highlightCode(
+      'markdown',
+      mdCode,
+      oneDarkHighlightStyle,
+      undefined,
+      undefined,
+      (text, style, from, to) => ({ text, style, from, to })
+    )
+    // Should have tokens for the markdown code block structure and the JS code inside
+    expect(highlighted.length).toBeGreaterThan(0)
+
+    // Find the code fence markers
+    const fenceStart = highlighted.find(t => t.text === '```')
+    expect(fenceStart).toBeDefined()
+
+    // Find the language info token
+    const langInfo = highlighted.find(t => t.text === 'js')
+    expect(langInfo).toBeDefined()
+
+    // Find the JS keyword 'const' inside the code block
+    const constToken = highlighted.find(t => t.text === 'const')
+    expect(constToken).toBeDefined()
+    expect(constToken?.style).not.toBeNull()
+
+    // Find the number '123'
+    const numberToken = highlighted.find(t => t.text === '123')
+    expect(numberToken).toBeDefined()
+    expect(numberToken?.style).not.toBeNull()
+  })
+})
+
 describe('React Highlighter', () => {
   it('renders highlighted code', async () => {
     const code = 'const x = 123'

package/tsconfig.json

@@ -3,17 +3,18 @@
   "compilerOptions": {
     "target": "esnext",
     "module": "esnext",
-    "lib": ["es2024", "dom"],
+    "lib": ["esnext", "dom"],
     "jsx": "react-jsx",
     "esModuleInterop": true,
     "strict": true,
     "isolatedModules": true,
     "sourceMap": false,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "noImplicitAny": false,
     "outDir": "dist",
     "declaration": true,
-    "declarationDir": "dist"
+    "declarationDir": "dist",
+    "skipLibCheck": true
   }
 }

package/vite.config.ts

@@ -1,4 +1,4 @@
-/// <reference types="vitest" />
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'