如何使用 ``` 在我的 HTML 页面中显示为代码块？

Question

我正在使用 Python Django、Bootstrap 5，我的 HTML 代码在这里：

<div id="chat_hist" 
    data-bs-spy="scroll" 
    data-bs-root-margin="0px 0px -40%" 
    data-bs-smooth-scroll="true" 
    class="scrollspy-example bg-body-tertiary p-3 rounded-2"
    tabindex="0"
    >
  {% for chat in chat_history %}
  <p style="white-space: pre-line;"> 
    {{chat.message | safe}} 
  </p>
  {% endfor %}
</div>

正文是： chat.message 有带反引号的代码，但它看起来不像代码。看起来就像普通文本。 （我添加了一张图片以更好地解释。）

正如我所说，chat.message 有代码块，但并不完全由代码组成。我不想在整条消息中使用

<pre>

或

<code>

。
我还想让我的代码着色。对于这种情况如何实现显示为代码块？

Answer 1

您正在寻找一种在 HTML 文件中呈现 Markdown 的方法。考虑查看md-block。它为您提供了 md-block 标签，您可以使用它来渲染 markdown。一个例子是：

<md-block>
```java
public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, world!");
    }
}
```
</md-block>