我有以下代码：
<head>
<title></title>
<link rel="stylesheet" href="./styles/darkula.css">
<link rel="stylesheet" href="./styles/github.css">
</head>
<body>
<div class="container">
<pre>
<code class="html">
<button class="button is-primary">Primary</button>
</code>
</pre>
<!-- Change theme button -->
<button onclick="changeTheme()">Change theme</button>
</div>
<script src="highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
document.querySelectorAll("code").forEach(function(element) {
element.innerHTML = element.innerHTML.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
});
function changeTheme() {
...
}
</script>
</body>
我正在我的文件中加载 2 个主题。因为 github 主题是在 darkula 主题之后加载的，所以它会自动应用于所有代码元素。这很好，但我想允许用户通过单击按钮动态地将主题更改为 darkula。我在文档中找不到任何内容。我怎样才能做到这一点？
如果您正在使用
sass/scssnpm@use "sass:meta";
html[data-theme="light"] {
@include meta.load-css("highlight.js/styles/a11y-light");
}
html[data-theme="dark"] {
@include meta.load-css("highlight.js/styles/a11y-dark");
}
要使其正常工作，您需要在 html 标记中定义
data-theme<html data-theme="light">
<!-- ensure to change it with javascript and define one with default -->
...
</html>
这里有对同一问题的 github 回复 https://github.com/highlightjs/highlight.js/issues/2115
基本上，您可以包含所需的所有主题，然后禁用除所选主题之外的所有链接标签。
highlight.js 演示页面就是这样做的 https://highlightjs.org/demo/
可以在此处找到代码的 GitHub 存储库。
（https://github.com/highlightjs/highlight.js/blob/master/demo/demo.js）
这是一个可运行的片段，用于详细说明现有答案并提供快速入门方法：
<head>
<meta name="color-scheme" content="dark light" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/gml.min.css"
/>
</head>
<body>
<button type="button" onclick="changeTheme()">Change theme</button>
<span></span>
<pre><code>{
"foo": {
"bar": [1, 2, 3, 4],
"what": "hello",
"quux": {"garply": null}
}</code></pre>
<script>
const styles = [
"gml",
"sunburst",
"stackoverflow-dark",
"vs2015",
"panda-syntax-dark",
"obsidian",
];
document.querySelector("span").textContent = styles[0];
hljs.highlightAll();
function changeTheme() {
document.querySelector('link[href*="highlight.js"]').remove();
const link = document.createElement("link");
styles.unshift(styles.pop());
const style = styles[0];
link.rel = "stylesheet";
link.href = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/${style}.min.css`;
document.querySelector("head").append(link);
document.querySelector("span").textContent = style;
}
</script>
</body>基本上，我撕掉现有的样式标签并将其替换为所需的样式标签。粗糙，但有效。