Question

我有以下法典:

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

我的档案中有两个主题。由于深层主题之后,该主题正在装上,因此自动适用于所有法典要素。这是很不错的,但我要允许用户积极改变这个主题,以黑点击纽拉。我无法在文件中找到任何东西。我如何能够这样做?

Answer 1

如果您使用<代码>ss/scs,并用<代码>np处理你的属性,你可以做以下工作:

@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标签上。

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

Answer 2

The s a github response to this same question here https://github.com/highlightjs/issues/2115

基本上,你包括你想要的所有主题,然后除选定主题外,所有链接点都无法使用。

Thelight.js demo page do this https://highlightjs.org/demo/

吉特·霍马库的存放处可以在此找到。

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

Answer 3

这里是一条可操作的幻灯塔,详细阐述现有的答案,并提供一种快速开端做法:

<head>
  <meta name="color-scheme" content="dark light" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/gml.min.css"
  />
</head>
<body>
  <button type="button" onclick="changeTheme()">Change theme</button>
  <span></span>
    <pre><code>{
"foo": {
  "bar": [1, 2, 3, 4],
  "what": "hello",
  "quux": {"garply": null}
}</code></pre>

  <script>
    const styles = [
      "gml",
      "sunburst",
      "stackoverflow-dark",
      "vs2015",
      "panda-syntax-dark",
      "obsidian",
    ];
    document.querySelector("span").textContent = styles[0];
    hljs.highlightAll();

    function changeTheme() {
      document.querySelector( link[href*="highlight.js"] ).remove();
      const link = document.createElement("link");
      styles.unshift(styles.pop());
      const style = styles[0];
      link.rel = "stylesheet";
      link.href = `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/${style}.min.css`;
      document.querySelector("head").append(link);
      document.querySelector("span").textContent = style;
    }
  </script>
</body>

基本上,我穿透现有的风格,用所希望的标签取而代之。关键但有效。

Preloading the styles helps ensure smooth transitions, if desired.

友情链接