我正在尝试将动态响应集成为事件/流(来自 gpt api)。事件源打印正确,但全部为文本。其中有带有三个反引号的代码片段为
```javascript
var s = "JavaScript syntax highlighting";
window.alert(s);
var num = 42;
```
但它不是突出显示,我使用了highlight.js lib,但仅突出显示了我手动添加的precode内的语法。但我需要动态突出显示。这就是我所做的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
</head>
<body>
<p style="white-space: pre-wrap">
```javascript
var s = "JavaScript syntax highlighting"; //not highlighiting
window.alert(s);
var num = 42;
```
<pre><code class="language-javascript">
var s = "JavaScript syntax highlighting"; //highlighiting
window.alert(s);
var num = 42;
</code></pre>
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</body>
</html>
我哪里出错了......任何方式或替代方案。请推荐。
您可以使用正则表达式来查找和替换它们。
const regexCode = /```(?<lang>\w*)\n+(?<code>.*?)```/gs
let rawText = document.querySelector("p").innerHTML
document.querySelector("p").innerHTML = rawText.replaceAll(regexCode, '<pre><code class="language-$1">$2</code></pre>')
<p style="white-space: pre-wrap">
```javascript
var s = "JavaScript syntax highlighting"; //not highlighiting
window.alert(s);
var num = 42;
```
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>