0
238
ViewsCómo mostrar la función JS del evento google/code-prettify onkeyup
Este es mi código para agregar eventListener de google/code-prettify . Lo que quiero lograr es mostrar el código como un código cuando el usuario inserta su código en el área de texto . Debería estar funcionando, pero por alguna razón no funciona.
<body onload="PR.prettyPrint()">
<h1>Insert your code</h1>
<form method="POST">
<pre class=" prettyprint"> <code class=" prettyprint"> <?php echo htmlspecialchars($str); ?> </code></pre>
<div class=" prettyprint"> <textarea id="testcode" class=" prettyprint" id="code"> </textarea></div>
<script lang="javascript">
document.getElementById("testcode").addEventListener('onkeyup', PR.prettyPrint, false);
document.getElementById("testcode").innerText = "echo";
</script>
<input type="submit"></input>
</form>
</body>
El área de texto y un ejemplo de código impreso usando lib.
Documentación Documentación Si está llamando a prettyPrint a través de un controlador de eventos, envuélvalo en una función. En lugar de hacer:
addEventListener('load', PR.prettyPrint, false);
envuélvalo en un cierre como:
addEventListener('onkeyup', function(event) { PR.prettyPrint(); }, false);
1 answers
Answer question0
biblioteca alternativa
Usé una biblioteca similar que es mucho mejor.
y se llama resaltar.js
Recomiendo encarecidamente no usar la biblioteca de Google porque es un proyecto archivado
puede tener muchos errores no corregidos
✅ ¡este código tiene solo 5 líneas de código JS!
Código de ejemplo GIF en javascript, pero puede usar PHP o cualquier otro idioma que desee (solo vea los documentos)
const inputArea = document.querySelector("textarea");
const outputArea = document.querySelector("pre code");
inputArea.addEventListener("input", () => {
outputArea.innerHTML = inputArea.value;
hljs.highlightElement(outputArea);
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css" />
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/highlight.min.js"></script>
<form>
<textarea></textarea>
<pre><code class="language-javascript"></code></pre>
</form>
beneficios:
- código abierto/mantenido hasta ahora.
- puedes elegir temas (240 en total)
- si realmente quieres, puedes crear tu propio tema, solo con CSS
- Resaltado de sintaxis de 190 idiomas.
- API similar a la biblioteca de Google
<pre><code class="language-js">...</code></pre>
así que vea sus documentos sobre cómo usarlo https://highlightjs.org/usage/