如何让pre/code标签正确解析字符串变量中的换行符\n？

你的问题本质是后端返回的\n是转义后的字符串（即实际是\和n两个独立字符），而非原生的换行符，所以<pre>标签无法将其解析为换行。下面是两种可行的解决思路：

前端处理方案 #

在将字符串插入<pre>标签前，把转义的\n替换成真正的换行符：

• 原生JS示例：

  const codeStr = 'console.WriteLine("Hello");\\nconsole.WriteLine("World");\\n';
  const processedCode = codeStr.replace(/\\n/g, '\n');
  document.querySelector('pre').textContent = processedCode;
  

• 如果你用Vue这类框架，可以在插值前处理：

  <pre>{{ code.replace(/\\n/g, '\n') }}</pre>
  

  注意不要用v-html，否则会把"解析成引号，但可能引入XSS风险，用textContent或原生插值更安全。

后端调整方案 #

直接让后端输出原生换行符（ASCII 0x0A），而不是转义的\n字符串：

• 比如后端如果是C#，不要拼接带\\n的字符串，直接用Environment.NewLine或者直接写\n（确保输出的是换行字符，而非转义后的字符串）；
• 如果是Java，直接用"\n"而非"\\n"，让响应输出实际的换行字符。

为什么之前的尝试无效？ #

• 替换成<br>：<pre>标签会将<br>作为普通文本显示，不会解析为换行；
• 调整CSS：CSS只能控制已存在的换行的显示方式，无法将\n字符串转换成换行结构。

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