highlight.js 无法在 django+dash 网站上运行答案

【问题标题】：highlight.js not working on django+dash websitehighlight.js 无法在 django+dash 网站上运行
【发布时间】：2022-11-17 22:16:39
【问题描述】：

我有一个 Django 网站，我想在其中显示带有语法高亮显示的代码块。

我已经安装了 highlight.js 并按照他们的说明将样式和 js 注入到 html 中，在本例中为 base.html：

...
<link rel="stylesheet" href="{% static 'highlight/styles/default.min.css' %}">
<script src="{% static 'highlight/highlight.min.js' %}"></script>
<script>hljs.highlightAll();</script>

然后我使用破折号 html 组件将代码添加到某些视图：

...
html.Div([html.H3(title),
                html.Pre(html.Code(code, className=f'language-{lang}'))])

该代码未突出显示语法。不知道如何解决这个问题。

编辑：如果将 <pre><code>...</pre><code> 元素硬编码到将应用 highlight.js 的 html 模板中，检查该元素会显示代码块中每个单词的各种转换。但是，如果 HTML 是由破折号生成的，如上所示，它只是一个普通的 <pre><code>...</pre><code> 块。如何让 highlight.js 应用于破折号生成的 HTML？

【问题讨论】：

这看起来更像是一个 Javascript 问题，因此我建议使用浏览器和 Web 开发人员工具调试此 HTML 页面。
我应该如何调试？我在控制台上没有看到任何错误。

标签： javascript python html css django

【解决方案1】：

我自己在尝试为我的 dash 应用程序实施 highlight.js 时遇到过这个问题。我找到了一个不错的替代方案，直接为 Dash 构建：

DMC 代码和棱镜组件

棱镜组件用于语法高亮https://www.dash-mantine-components.com/components/prism
代码的组成部分行内代码: https://www.dash-mantine-components.com/components/code

【讨论】：