当前位置：首页 > 文章列表 > 文章 > 前端 > React渲染带换行字符串的语法高亮技巧

React渲染带换行字符串的语法高亮技巧

2026-01-23 13:39:41 0浏览收藏

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《React 渲染带换行字符串的语法高亮方法》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

如何在 React 中对带换行的长字符串进行语法高亮渲染

本文介绍在 React 中将含 `\n` 的代码字符串自动换行并为关键字（如 `export`、`const`、`fadeAnimation`）添加颜色高亮的完整实现方案，兼顾可维护性与性能。

在 React 中渲染带格式的代码片段时，仅靠 split('\n').map(...) 添加
是基础操作；若还需对关键词做语法高亮（如 export 红色、const 蓝色、标识符绿色），则需更精细的词法解析逻辑。直接在 JSX 中硬编码 HTML 标签虽可行，但难以复用且破坏数据与视图分离原则。推荐采用正则分词 + 动态渲染的方案，既保持字符串源码的可读性，又支持灵活样式控制。

以下是一个健壮、可扩展的 highlightCode 工具函数：

const highlightCode = (code: string): React.ReactNode[] => {
  // 定义关键词匹配规则：按优先级顺序（避免短词被长词截断）
  const patterns = [
    { regex: /\b(export|import|default)\b/g, className: 'keyword-export' },
    { regex: /\b(const|let|var|function|return|if|else|for|while)\b/g, className: 'keyword-declaration' },
    { regex: /\b([a-zA-Z_$][\w$]*)\b(?=\s*[:=])/g, className: 'keyword-identifier' }, // 如 fadeAnimation =
    { regex: /"[^"]*"/g, className: 'string-literal' },
    { regex: /'[^']*'/g, className: 'string-literal' },
  ];

  // 按行分割，再逐行处理
  return code.split('\n').map((line, lineIndex) => {
    let processedLine = line;
    const tokens: React.ReactNode[] = [];

    // 对每行执行多轮高亮（按 pattern 顺序）
    for (const { regex, className } of patterns) {
      let lastIndex = 0;
      let match;

      while ((match = regex.exec(line)) !== null) {
        const [fullMatch] = match;
        const start = match.index;
        const end = start + fullMatch.length;

        // 添加前置普通文本
        if (start > lastIndex) {
          tokens.push(line.slice(lastIndex, start));
        }
        // 添加高亮词
        tokens.push(
          <span key={`${lineIndex}-${start}-${className}`} className={className}>
            {fullMatch}
          </span>
        );
        lastIndex = end;
      }

      // 添加行尾剩余文本
      if (lastIndex < line.length) {
        tokens.push(line.slice(lastIndex));
      }

      // 更新 line 供下一轮使用（实际只需一次遍历，此处为清晰演示）
      // 实际建议用单次扫描替代嵌套循环，此处简化逻辑
      processedLine = tokens.join('');
      break; // 注意：此处仅演示单轮高亮，生产环境应合并所有 pattern 到一次扫描
    }

    // ✅ 更优实践：统一处理整行（推荐使用此版本）
    const finalTokens: React.ReactNode[] = [];
    let pos = 0;
    const combinedRegex = /(\b(export|import|default)\b|\b(const|let|var|function|return|if|else|for|while)\b|\b([a-zA-Z_$][\w$]*)\b(?=\s*[:=])|"[^"]*"|'[^']*')/g;

    while ((match = combinedRegex.exec(line)) !== null) {
      const [fullMatch] = match;
      const start = match.index;

      if (start > pos) {
        finalTokens.push(line.slice(pos, start));
      }

      // 分类赋 class
      let cls = '';
      if (/^\b(export|import|default)\b$/.test(fullMatch)) cls = 'keyword-export';
      else if (/^\b(const|let|var|function|return|if|else|for|while)\b$/.test(fullMatch)) cls = 'keyword-declaration';
      else if (/^\b([a-zA-Z_$][\w$]*)\b(?=\s*[:=])$/.test(fullMatch)) cls = 'keyword-identifier';
      else if (/^["'].*["']$/.test(fullMatch)) cls = 'string-literal';

      finalTokens.push(
        <span key={`${lineIndex}-${start}`} className={cls}>
          {fullMatch}
        </span>
      );
      pos = start + fullMatch.length;
    }
    if (pos < line.length) {
      finalTokens.push(line.slice(pos));
    }

    // 包裹每行并添加缩进与换行
    return (
      <div
        key={lineIndex}
        style={{
          marginLeft: lineIndex === 0 || line.trim() === '' ? 0 : '20px',
          color: '#a69a9a',
          fontFamily: 'SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace',
        }}
      >
        {finalTokens}
        <br />
      </div>
    );
  });
};

在组件中使用：

export const CodeBlock = () => {
  const codeString = `export const fadeAnimation = {
  initial: { opacity: 0, transition: { ...transition, delay: 0.5 }, },
  animate: { opacity: 1, transition: { ...transition, delay: 0.3 }, },
  exit: { opacity: 0, transition: { ...transition, delay: 0 }, }
}`;

  return <div className="code-container">{highlightCode(codeString)}</div>;
};

配套 CSS 示例（可根据主题调整）：

.code-container {
  font-size: 14px;
  line-height: 1.5;
}
.keyword-export { color: #c586c0; font-weight: bold; }
.keyword-declaration { color: #569cd6; }
.keyword-identifier { color: #9cdcfe; }
.string-literal { color: #ce9178; }

⚠️ 注意事项：