如何为react-code-blocks传入的代码字符串设置缩进格式？

你的问题出在传入的代码字符串本身带有不必要的前导缩进，react-code-blocks会原样渲染这些空白字符，所以导致显示格式混乱。可以用以下几种方式解决：

1. 手动修正代码字符串 #

直接清理掉每一行多余的前导空格，保持代码本身的合理缩进层级：

interface Shape {
    double getArea();
    default String getDescription() {
        return "This is a shape with an area of " + getArea();
    }
}

2. 自动清理公共前导缩进（动态场景适用） #

如果代码是动态生成的，没法手动调整，可以写个工具函数自动移除所有行的公共多余前导空格：

function normalizeCodeIndent(code) {
    // 过滤空行，避免影响缩进计算
    const nonEmptyLines = code.split('\n').filter(line => line.trim());
    if (nonEmptyLines.length === 0) return code;

    // 找出所有非空行中最短的前导空格数
    const minLeadingSpaces = Math.min(
        ...nonEmptyLines.map(line => line.match(/^\s*/)[0].length)
    );

    // 对每一行去掉对应长度的前导空格
    return code.split('\n')
        .map(line => line.slice(minLeadingSpaces))
        .join('\n');
}

// 使用示例
const rawCode = `interface Shape {
          double getArea();
          default String getDescription() {
              return "This is a shape with an area of " + getArea();
          }
      }`;
const formattedCode = normalizeCodeIndent(rawCode);

之后直接把formattedCode传入react-code-blocks组件即可。

注意 #

react-code-blocks的核心功能是代码高亮，本身并不提供代码格式化能力，所以必须先确保传入的代码字符串本身缩进正确，组件才能渲染出符合预期的效果。

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