使用Prism.js的CodeBlock组件如何处理代码多余缩进？

直接给你可行的实现方案——核心思路是计算代码块中所有非空行的最小公共缩进量，然后统一移除每行开头对应长度的多余空白，完全不需要依赖indent.js这类库，自己写几行逻辑就能搞定：

实现步骤（以JavaScript为例，适配React组件） #

1. 先处理代码字符串的首尾空白，再按换行分割成每行数组
2. 统一把制表符转成空格（避免混合缩进的问题，可自定义转换数量）
3. 过滤掉全空白的行，找出剩下每行开头的空白字符最小长度
4. 遍历所有行，对非空行移除开头对应最小长度的空白，空白行保持原样
5. 把处理后的行重新拼接成字符串，再传给Prism.js高亮

具体代码实现 #

function normalizeCodeIndent(code) {
  // 去除首尾空白并分割为每行
  const lines = code.trim().split('\n');
  
  // 统一将制表符转为4个空格（可根据需求调整）
  const normalizedLines = lines.map(line => line.replace(/\t/g, '    '));
  
  // 筛选非空行，计算最小缩进量
  const nonEmptyLines = normalizedLines.filter(line => line.trim() !== '');
  if (nonEmptyLines.length === 0) return code; // 空代码直接返回
  
  const minIndent = Math.min(...nonEmptyLines.map(line => line.match(/^\s*/)[0].length));
  
  // 移除每行多余缩进
  const processedLines = normalizedLines.map(line => {
    if (line.trim() === '') return line; // 保留空白行
    return line.slice(minIndent);
  });
  
  return processedLines.join('\n');
}

在CodeBlock组件中使用 #

在代码传入Prism.js高亮前，先调用处理函数：

function CodeBlock({ code, language }) {
  const processedCode = normalizeCodeIndent(code);
  // 执行Prism高亮逻辑
  return (
    <pre className={`lang-${language} prettyprint-override`}>
      <code dangerouslySetInnerHTML={{ __html: Prism.highlight(processedCode, Prism.languages[language], language) }} />
    </pre>
  );
}

效果验证 #

用你提供的问题代码测试：

• 原始带多余缩进的代码：

p { 
        color:  hsl(0deg, 100%, 50%);
     }

• 处理后会输出你期望的格式：

p { 
  color:  hsl(0deg, 100%, 50%);
}

这个方案能精准去除外部结构带来的多余缩进，同时保留代码本身的合理层级，比依赖第三方库更可控。

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