本文介绍在 react 中将含 `\n` 的代码字符串自动换行并为关键字（如 `export`、`const`、`fadeanimation`）添加颜色高亮的完整实现方案，兼顾可维护性与性能。
在 React 中渲染带格式的代码片段时，仅靠 split('\n').map(...) 添加 <br/> 是基础操作；若还需对关键词做语法高亮（如 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; }⚠️ 注意事项：
- 避免直接 dangerouslySetInnerHTML —— 本方案完全基于 React 元素，安全且支持 SSR；
- 正则需注意贪婪匹配与边界（\b）防止误匹配（如 const 不匹配 constant）；
- 复杂语法高亮建议接入 Prism.js 或 react-syntax-highlighter，本方案适用于轻量定制场景；
- 若代码含 JSX 或模板字符串，需增强正则以处理嵌套引号与插值（如 ${...}）。
通过该方案，你既能保留原始字符串的可维护性，又能实现专业级的语法着色效果，同时保持 React 的声明式与可组合特性。
