Невозможно выделить код внутри переключаемого div

Я пишу сообщение в блоге и, конечно, могу написать прямо 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, но безуспешно.

Мне кажется, код JS не запускается после нажатия кнопки, поэтому он не применяет JS.

Carnaru Valentin 11.04.2018 12:24

В этом есть смысл, но я не знаю, как это исправить.

RGS 11.04.2018 12:26
style.display = "", "" не является допустимым значением для свойства отображения
Raul Sauco 11.04.2018 12:37

@ Рауль Сауко, что это должно быть тогда?

RGS 11.04.2018 13:21

@RGS работает нормально fiddle.jshell.net/3onf72pj

Bhuwan 11.04.2018 13:54
0
5
61
2

Ответы 2

Ваша проблема в URL-адресе 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>

Вы пытаетесь назначить пустую строку в качестве значения свойства css display, которое не является допустимым значением.

Измените это на любое из допустимых значений, вы увидите их список здесь. В следующем фрагменте я заменил "" на "block", и код работает нормально.

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";
  }
}
div#container {
  background-color: #F0F0F0;
  padding: 5px;
}
<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>

Другие вопросы по теме