0

highlightjs

Estoy usando highlightjs para resaltar la sintaxis, cree un botón que al presionarlo me pinta un código en un div, el tema es que debería resaltarse la sintaxis pero no esta funcionando.

¿ a que se debe eso ?

#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/10.5.0/highlight.min.js"></script>
<script>
  hljs.initHighlightingOnLoad();
</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>`
  })
</script>

2
  • funciona bien antes de apretar el boton.. y se arruina cuando apretas el boton.. debe estar mal el html que le pasas al apretar el boton...
    – gbianchi
    Commented el 22 ene. 2022 a las 3:32
  • o highligth solo se esta ejecutando al cargar.. suena mas probable...
    – gbianchi
    Commented el 22 ene. 2022 a las 3:33

1 respuesta 1

1

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.

1
  • Funciona perfectamente.
    – Boolean
    Commented el 22 ene. 2022 a las 13:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.