3

我有以下代码：

<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。我在文档中找不到任何内容。我怎样才能做到这一点？

4

1 回答 1

2

这里有一个 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）

于 2020-01-28T09:20:38.053 回答