Question

我正在写博客文章，当然我可以直接写一下页面的html / css / js。

在一篇特定的帖子中，我将包含几个python代码片段，因此我想让这些片段可以切换。为此，我将它们放入div中，然后围绕div的样式显示。

当我点击显示div的按钮时，代码会出现但是hightlight.js根本无法突出显示它。

这是我期望工作但不起作用的html的最小示例。

<div style="background-color:#F0F0F0;padding:5px"><button onclick="toggleCode(event, 'etapa0')">code</button></div>
<div style="display:none" id="etapa0"><pre><code class="python">from pygame.locals import *
import pygame
</code></pre></div>

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>
function toggleCode(evt, id) {
    if (document.getElementById(id).style.display == "none") {
        document.getElementById(id).style.display = "";
        hljs.highlightBlock(document.getElementById(id));
    } else {
        document.getElementById(id).style.display = "none";
    }
}
</script>

我还试图强制highlight.js在函数toggleCode中应用突出显示，但没有成功。

Answer 1

您的问题出在src网址中，尝试在开头添加 https：

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

Answer 2

您正在尝试将空字符串指定为css display属性的值，该值不是有效值。

将其更改为任何有效值，您可以看到它们的列表here。在以下代码段中，我将""更改为"block"，代码运行正常。

＆＃13;

function toggleCode(evt, id) {
  if (document.getElementById(id).style.display == "none") {
    document.getElementById(id).style.display = "block";
    hljs.highlightBlock(document.getElementById(id));
  } else {
    document.getElementById(id).style.display = "none";
  }
}

＆＃13;

div#container {
  background-color: #F0F0F0;
  padding: 5px;
}

＆＃13;

<div id="container">
    <button onclick="toggleCode(event, 'etapa0')">code</button>
</div>
<div style="display:none" id="etapa0">
    <pre>
        <code class="python">from pygame.locals import *
import pygame
        </code>
    </pre>
</div>

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script>

</script>

＆＃13;

无法突出显示可切换div中的代码

2 个答案: