使用react-syntax-highlighter高亮curl代码出现对齐异常如何解决

根因 #

你在模板字符串行尾添加的\是JavaScript的代码换行转义符，作用是仅在编写代码时拆分长行，不会在最终生成的字符串中保留实际换行符，因此react-syntax-highlighter拿到的是完整单行文本，无法自动分行。

修复步骤 #

1. 移除模板字符串每行末尾的转义符\，ES6模板字符串本身会保留编写时的换行符和缩进，无需额外转义。
2. 可选：给SyntaxHighlighter添加wrapLongLines={true}属性，避免单行内容过长时横向溢出。

完整修改后代码 #

import SyntaxHighlighter from 'react-syntax-highlighter';
import { github } from 'react-syntax-highlighter/dist/esm/styles/hljs';

const getCurlSnippet = (loadId, text) =>{
  const token = localStorage.getItem("token");
  const PARSE_API_URL = "API URL";
  // 移除每行末尾的\，模板字符串自动保留换行和缩进
  return `curl ${PARSE_API_URL}
    -H 'authorization: ${token}'
    -H 'Content-Type: application/json'
    --data-raw '{"loadId":"${loadId}","text":"${text}"}'
    --compressed`;
}

const getHighlightSnippet = () => (
    <SyntaxHighlighter
        language="curl"
        style={github}
        customStyle={{borderRadius: "12px", padding: "16px", background: "rgb(227 224 224)"}}
        {/* 新增自动换行属性 */}
        wrapLongLines={true}
    >
        {getCurlSnippet("U134IJ", "Hello world")}
    </SyntaxHighlighter>
);

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