如何让React SyntaxHighlighter实现多行代码原样展示

问题修复方案 #

导致代码仅能单行显示、和原始格式不一致的核心原因和修改方法如下：

• 字符串传值格式错误：你当前用普通单引号包裹syntaxBlock内容，JavaScript 普通字符串不会保留字面量里的换行、缩进，需要替换为反引号包裹的模板字符串，才能完整保留原始书写格式。
• SyntaxHighlighter配置不全：仅配置wrapLines无法触发长代码换行，需要额外补充wrapLongLines={true}参数；你展示的是JSX组件代码，建议将language改为jsx提升高亮匹配精度。

修改后传值代码：

<Showcase 
   class="w-full p-4 text-center m-auto space-x-2" 
   component={
          <>
            <Button variant="primary" text="Disabled Button" disabled />
            <Button variant="secondary" text="Disabled Button" disabled />
          </>
   } 
   syntaxBlock={`
          <Button variant="primary" text="Disabled Button" disabled />
          <Button variant="secondary" text="Disabled Button" disabled />
   `}
   title="Disabled" 
/>

修改后高亮渲染代码：

<SyntaxHighlighter 
  wrapLines={true} 
  wrapLongLines={true}
  language="jsx" 
  style={a11yDark} 
  showLineNumbers
>
  {props.syntaxBlock}
</SyntaxHighlighter>

可选优化（去除多余缩进）

如果修改后发现每行前置缩进过多、前后有多余空行，可以对传入的字符串做简单处理，根据你的实际缩进量调整正则里的空格数即可：

{props.syntaxBlock?.trim().replace(/^\s{10}/gm, '')}

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