如何移除prism-react-renderer生成的首尾空行？TokenArray数组处理

针对你遇到的模板字符串空格导致首尾空行的问题，我们可以通过处理TokenArray来精准移除这些无效行。下面是具体的解决方案：

1. 先明确空行的判断逻辑 #

根据你给出的TokenArray类型，外层数组的每个元素对应一行代码，内层的每个token对象带有empty属性。我们定义：当某一行的**所有token的empty属性都为true**时，这一行就是需要移除的空行。

2. 编写判断空行的辅助函数 #

先写一个工具函数来验证某一行是否为空行：

const isEmptyLine = (line: TokenArray[0]): boolean => {
  // 检查该行所有token的empty属性是否都为true
  return line.every(token => token.empty === true);
};

3. 编写移除首尾空行的核心函数 #

通过循环检查并移除数组首尾的空行，注意要复制原数组避免修改原始数据：

type TokenArray = { types: string[]; content: string; empty?: boolean; }[][];

const trimEmptyLines = (tokenArray: TokenArray): TokenArray => {
  // 复制原数组，防止直接修改传入的原始数据
  const trimmedTokens = [...tokenArray];

  // 移除开头的空行（循环处理连续空行）
  while (trimmedTokens.length > 0 && isEmptyLine(trimmedTokens[0])) {
    trimmedTokens.shift();
  }

  // 移除结尾的空行（循环处理连续空行）
  while (trimmedTokens.length > 0 && isEmptyLine(trimmedTokens[trimmedTokens.length - 1])) {
    trimmedTokens.pop();
  }

  return trimmedTokens;
};

4. 在Code组件中集成使用 #

把处理后的tokens传入渲染逻辑即可：

import { usePrism } from 'prism-react-renderer';

const Code = ({ children }) => {
  const { tokens, getLineProps, getTokenProps } = usePrism({
    code: children,
    language: 'javascript', // 根据你的实际需求修改语言类型
  });

  // 移除首尾空行
  const cleanedTokens = trimEmptyLines(tokens);

  return (
    <pre style={{ backgroundColor: '#f6f8fa', padding: '16px', borderRadius: '6px' }}>
      <code>
        {cleanedTokens.length > 0 ? (
          cleanedTokens.map((line, lineIndex) => (
            <div {...getLineProps({ line, key: lineIndex })}>
              {line.map((token, tokenIndex) => (
                <span {...getTokenProps({ token, key: tokenIndex })} />
              ))}
            </div>
          ))
        ) : (
          <span style={{ color: '#6a737d' }}>无有效代码内容</span>
        )}
      </code>
    </pre>
  );
};

补充提示 #

如果你的模板字符串本身首尾有冗余空格，也可以先对children做trim()处理再传入prism，但结合上面的token处理能更稳妥地应对prism生成的空行token，确保最终渲染结果没有多余的首尾空行。

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