Highlight.js v11版本如何用CSS white-space:pre实现代码换行？

Highlight.js v11砍掉了useBR配置项，官方推荐用插件或CSS的white-space:pre系列属性实现代码换行。你已经用插件搞定了，下面说纯CSS的实现方法，分两种场景：

场景1：代码内容用原生换行符（推荐） #

如果你的代码块里是用原生换行符（\n）而不是<br>来换行，根本不用额外写CSS——<pre>标签默认的white-space:pre属性就会自动保留换行和空格，直接调用hljs.highlightAll()就能正常展示换行效果。

要是想明确指定样式，也可以加这段CSS：

pre code {
  white-space: pre;
}

场景2：代码内容里是<br>（适配现有内容） #

如果你的代码内容已经是用<br>来分隔行（比如你示例里的写法），纯CSS实现的话，需要调整white-space属性让<br>生效，同时保留代码的空格缩进：

pre code {
  white-space: pre-wrap;
  display: block;
}

• pre-wrap会保留代码里的空格和原生换行，同时允许内容自动换行，还能识别<br>作为强制换行，效果最接近原来的useBR。
• display: block是为了让代码块占满容器宽度，换行更自然。

完整示例（去掉插件，只用CSS） #

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Highlight With CSS</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
  <style>
    pre code {
      white-space: pre-wrap;
      display: block;
    }
  </style>
</head>
<body>
  <pre><code>&lt;div class="code"&gt;&lt;br /&gt;&lt;script&gt;&lt;br /&gt;console.log("Hello, World!");&lt;br /&gt;&lt;/script&gt;&lt;br /&gt;&lt;/div&gt;</code></pre>

  <script>
    hljs.highlightAll();
  </script>
</body>
</html>

注意点 #

如果能控制代码内容的生成，尽量把<br>换成原生换行符，这样直接用<pre>的默认样式就够了，更简洁。

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