CodeMirror v6中JSX语法高亮失效问题求助

问题根源 #

你遇到的高亮失效、标签样式混乱问题，核心原因是默认的javascript()扩展没有启用JSX语法解析，编辑器无法识别JSX结构，只能把相关内容当成普通JavaScript文本处理，导致token分类错误。另外你文档里的转义字符（</>）也会让编辑器无法识别JSX标签。

解决步骤 #

1. 启用JSX语法支持
   @codemirror/lang-javascript本身内置了JSX支持，不需要额外安装独立的lang-jsx包，只需在初始化时传入{jsx: true}配置：

   javascript({ jsx: true })
   

2. 修正文档内容
   把字符串里的</>替换为原始的</>，否则编辑器会把这些当成普通字符串，而非JSX标签。

3. 调整扩展加载顺序
   确保主题（oneDark）在syntaxHighlighting之前加载，避免样式优先级冲突。

修正后的完整代码 #

import { EditorView } from 'codemirror';
import { EditorState } from '@codemirror/state';
import { javascript } from '@codemirror/lang-javascript';
import {
  syntaxHighlighting,
  defaultHighlightStyle,
} from '@codemirror/language';
import { oneDark } from '@codemirror/theme-one-dark';

const jsxString = `import { useState } from 'react';
import { render } from 'react-dom'

function Counter() {
    const [value, setValue] = useState(0);

    return (
        <>
            <div>Counter: {value}</div>
            <button onClick={() => setValue(value + 1)}>Increment</button>
            <button onClick={() => setValue(value - 1)}>Decrement</button>
        </>
    );
}

render(<Counter />, document.getElementById('app'));
`;

const state = EditorState.create({
  doc: jsxString,
  extensions: [
    oneDark,
    javascript({ jsx: true }),
    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
  ],
});

const view = new EditorView({
  state,
  parent: document.getElementById('root'),
});

额外说明 #

• 启用JSX后，编辑器会正确识别开始标签、结束标签、JSX文本、嵌入表达式等不同token，主题会为它们分配对应的样式，解决标签样式不一致、文本与标签未区分的问题。
• 如果你需要自定义JSX相关的高亮样式，不需要重新实现完整主题，可以通过扩展defaultHighlightStyle或自定义HighlightStyle来单独覆盖JSX对应的token样式，例如：

  import { HighlightStyle, tags } from '@codemirror/language';
  
  const customJSXStyle = HighlightStyle.define([
    { tag: tags.tagName, color: '#61afef' },
    { tag: tags.attributeName, color: '#d19a66' },
  ]);
  
  // 在extensions中添加：
  syntaxHighlighting(customJSXStyle)
  

内容的提问来源于stack exchange，提问作者Devildude4427