我有以下代码：
<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/scss并处理你的依赖关系npm，你可以做接下来的事情：
@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");
}
为了使其工作，您需要定义data-themehtml 标签中的属性。
<html data-theme="light">
<!-- ensure to change it with javascript and define one with default -->
...
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
