本文介绍在 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( {fullMatch} ); 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( {fullMatch} ); pos = start + fullMatch.length; } if (pos < line.length) { finalTokens.push(line.slice(pos)); } // 包裹每行并添加缩进与换行 return ( {finalTokens}
); }); };在组件中使用：
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 {highlightCode(codeString)}; };配套 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; }⚠️ 注意事项：
- 避免直接 dangerouslySetInnerHTML —— 本方案完全基于 React 元素，安全且支持 SSR；
- 正则需注意贪婪匹配与边界（b）防止误匹配（如 const 不匹配 constant）；
- 复杂语法高亮建议接入 Prism.js 或 react-syntax-highlighter，本方案适用于轻量定制场景；
- 若代码含 JSX 或模板字符串，需增强正则以处理嵌套引号与插值（如 ${…}）。
通过该方案，你既能保留原始字符串的可维护性，又能实现专业级的语法着色效果，同时保持 React 的声明式与可组合特性。