gpt4 book ai didi

html - 如何使用 highlight.js 动态更改主题?

转载 作者:行者123 更新时间:2023-12-04 04:21:15 39 4
gpt4 key购买 nike

我有以下代码:

<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, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
});

function changeTheme() {
...
}
</script>
</body>

我正在我的文件中加载 2 个主题。因为 github 主题是在 darkula 主题之后加载的,所以它会自动应用于所有代码元素。这很好,但我希望允许用户通过单击按钮将主题动态更改为 darkula。我在文档中找不到任何内容。我怎样才能做到这一点?

最佳答案

这里有一个 github 对同样问题的回答 https://github.com/highlightjs/highlight.js/issues/2115

基本上你包括所有你想要的主题,然后禁用除所选主题之外的所有链接标签。

highlight.js 演示页面就是这样做的 https://highlightjs.org/static/demo/

可以在此处找到代码的 GitHub 存储库。

( https://github.com/highlightjs/highlight.js/blob/master/demo/demo.js )

关于html - 如何使用 highlight.js 动态更改主题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59257368/

39 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com