No te resalta la sintaxis porque no se lo estas diciendo al agregar el nuevo texto.
La función initHighlightingOnLoad
, tal como en su nombre ya se intuye, inicializa los elementos afectados por highlight.js
durante la carga inicial de la página (OnLoad significa Al Cargar). Si agregas nuevos contenidos éstos no son tomados en cuenta, porque el objeto hljs
no parece que quede a la escucha de nada.
De hecho la función initHighlightingOnLoad
esta obsoleta desde la versión 11.0.0 de highlight.js. Actualmente van por la versión 11.4.0.
He modificado tu código para que usen esa versión y más abajo explico los cambios realizados. Aquí te dejo un snippet funcionando:
#pintar {
display: block;
margin: 0 auto;
width: 20%;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/styles/androidstudio.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
<div>
<button id="mostrar">Mostrar codigo</button>
</div>
<div id="pintar">
<pre><code class="python">if True:</code></pre>
</div>
</body>
</html>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
<script>
hljs.highlightAll();
</script>
<script>
var btn = document.getElementById("mostrar")
var divPintar = document.getElementById("pintar")
btn.addEventListener("click", function() {
divPintar.innerHTML = ""
divPintar.innerHTML += `
<pre><code class='python'>if False</code></pre>`
hljs.highlightAll()
})
</script>
Explicación de los cambios:
- He actualizado la versión de highlight.js a la 11.4.0 aquí:
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
- He quitado la función obsoleta
hljs.initHighlightingOnLoad();
y la he sustituido por la actual:
hljs.highlightAll();
- Dentro de la escucha del evento
click
, he agregado la rellamada a highlighAll() para que vuelva a ejecutarse completamente en el documento actual (lo habia intentando con hljs.highlightElement(divPintar)
que parece más lógico, pero me cambiaba un poco el tipo de letra). Es decir:
btn.addEventListener("click", function() {
divPintar.innerHTML = ""
divPintar.innerHTML += `
<pre><code class='python'>if False</code></pre>`
hljs.highlightAll()
})
Prueba y ya nos dirás.