Html 如何使用highlight.js动态更改主题？_Html_Syntax Highlighting_Highlightjs

Html 如何使用highlight.js动态更改主题？

html

Html 如何使用highlight.js动态更改主题？,html,syntax-highlighting,highlightjs,Html,Syntax Highlighting,Highlightjs,我有以下代码： <head> <title></title> <link rel="stylesheet" href="./styles/darkula.css"> <link rel="stylesheet" href="./styles/github.css"> </head> <body> <div class="container"> <p

我有以下代码：

<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>



主要的，重要的


改变主题
hljs.initHighlightingOnLoad（）；
document.queryselectoral（“代码”）.forEach（函数（元素）{
element.innerHTML=element.innerHTML.replace（///g，“&；”）.replace（///g，”）.replace（///g，“&；”）.replace（///g，”&；”）；
});
函数changeTheme（）{
...
}

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

这里有一个github对这个问题的回答

基本上，您可以包含所有想要的主题，然后禁用除所选主题之外的所有链接标记

highlight.js演示页面就是这样做的

GitHub存储库用于存储代码，可在此处找到

（）