According to official documentation, syntaxhightlight version 11 remove useBR configuration.
It recommend to use plugin or simply css white-space:pre
I can do it with plugin like this.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hightlight With Plugin</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>
</head>
<body>
<pre><code><div class="code"><br /><script><br />console.log("Hello, World!");<br /></script><br /></div></code></pre>
<script>
//https://github.com/highlightjs/highlight.js/issues/2559
const brPlugin = {
"before:highlightBlock": ({
block
}) => {
block.innerHTML = block.innerHTML.replace(/n/g, '').replace(/<br[ /]*>/g, 'n');
},
"after:highlightBlock": ({
result
}) => {
result.value = result.value.replace(/n/g, "<br>");
}
};
// how to use it
hljs.addPlugin(brPlugin);
hljs.highlightAll();
</script>
</body>
</html>How to do it with simply css white-space:pre ?