如何在html javascript中高亮markdown代码语法

问题描述 投票:0回答:1

我正在尝试将动态响应集成为事件/流(来自 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>

我哪里出错了......任何方式或替代方案。请推荐。

javascript html css syntax-highlighting
1个回答
0
投票

您可以使用正则表达式来查找和替换它们。

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>

© www.soinside.com 2019 - 2024. All rights reserved.