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

【问题标题】：How to dynamically change the theme using highlight.js?如何使用 highlight.js 动态更改主题？
【发布时间】：2019-12-09 22:06:57
【问题描述】：

我有以下代码：

<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。我在文档中找不到任何内容。我该怎么做？

【问题讨论】：

标签： html syntax-highlighting highlightjs

【解决方案1】：

在https://github.com/highlightjs/highlight.js/issues/2115 https://github.com/highlightjs/highlight.js/issues/2115 上有一个 github 回复同样的问题

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

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

代码的 GitHub 存储库可以在这里找到。

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

【讨论】：

【解决方案2】：

如果您使用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");
}

要使其正常工作，您需要在 html 标记中定义 data-theme 属性。

<html data-theme="light">
  <!-- ensure to change it with javascript and define one with default -->
  ...
</html>

【讨论】：