2025-11-29
Como poner ecuaciones en HTML
Vamos a ver como podemos hacer que cuando creamos un documento técnico en HTML nuestras ecuaciones queden bastante elegantes.
El método simple
El método más fácil es usar la etiqueta html 'pre' y dentro el cuerpo de nuestra ecuación escrito en formato código:
c = sqrt( a*a + b*b );
Aunque práctico es poco elegante dejando mucho que desear cuando la ecuación a mostrar contiene elementos complejos como integrales, facciones, etc.
Más elegante usando imagenes.
También tenemos la opción de coger nuestro programa de dibujo favorito y dibujar la ecuación incrustando despues la imagen.
En este caso el resultado puede ser mejor o menor según nuestras habilidades de dibujado. Por suerte, existe una alternativa. Podemos utilizar Latex para escribir nuestra ecuación y usar un editor online que nos permite usar la imagen dentro de nuestro HTML.
El único problema de este sistema es que si nuestra página web contiene muchas imagenes el resultado resultará en muchas imagenes que ocuparan mucho espacio.
Katex: un javascript para renderizar ecuaciones latext.
Katex es una librería que nos permite usando javascript renderizar ecuaciones dentro de un objeto DOM del html.
Podemos descargar la libreria desde su página web e instalarla en nuestro sitio web o usar un servicio CDN.
Teóricamente tan solo hay que cargar los scripts en el head del fichero HTML y dentro de la página llamar a la función katex.render(), pero he encontrado que en la documentación de la libreria no funciona el código de los ejemplos.
Por ejemplo, este código:
<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not
render properly -->
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.css"
integrity="sha384-D+9gmBxUQogRLqvARvNLmA9hS2x//eK1FhVb9PiU86gmcrBrJAQT8okdJ4LMp2uv"
crossorigin="anonymous">
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.js"
integrity="sha384-483A6DwYfKeDa0Q52fJmxFXkcPCFfnXMoXblOkJ4JcA8zATN6Tm78UNL72AKk+0O"
crossorigin="anonymous"></script>
<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/contrib/auto-render.min.js"
integrity="sha384-yACMu8JWxKzSp/C1YV86pzGiQ/l1YUfE8oPuahJQxzehAjEt2GiQuy/BIvl9KyeF"
crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
</head>
<body>
<p id="IdentificatorForElement"></p>
<script>
katex.render("f(x)^2 = \\sqrt{y}", document.getElementById('IdentificatorForElement'), {
throwOnError: false });
</script>
</body>
</html>
Funciona bien, pero está usando la versión 0.10.0. Si cambiamos los CDN para
usar la versión 0.16.25 el navegador tira un error
Uncaught ReferenceError: katex is not defined. Desde
la versión 0.13.0 se añadieron mejoras de seguridad que hace que el código
anterior a esta de fallos, haciendo que la libreria sea más díficil de usar.
Ejemplo usando la versión 0.16.25:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/katex.min.css"> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/katex.min.js"></script> <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/contrib/auto-render.min.js"></script> </head> <body> <p id="id"></p> <script> // Esperar al evento DOMContentLoaded garantiza que las scripts con defer // ya se han ejecutado y 'katex' está definido. document.addEventListener('DOMContentLoaded', function () { if (typeof katex === 'undefined') { console.error('KaTeX no está cargado — revisa la Network/Console (SRI/CSP/CDN).'); return; } katex.render("c = \\pm\\sqrt{a^2 + b^2}", document.getElementById('id'), { throwOnError: false, trust: true, strict: false } ); }); </script> </body> </html>
La ventaja de usar Katex es que es "independiente" del navegador y debería mostrarse igual en cada uno de los distintos navegadores que usemos, el resultado es muy parecido a Latex, pero tiene el problema de que añade javascript que puede hacer que no se ejecute bien en algunos navegadores.
La opción MathML.
Actualmente los navegadores soportan la extensión MathML que es un subconjunto de etiquetas XML para mostrar ecuaciones.
Ejemplo:
<math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <mi>c</mi> <mo>=</mo> <msqrt> <mrow> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><mn>2</mn></msup> </mrow> </msqrt> </mrow> </math>
A pesar de ser simplemente etiquetas al estilo HTML es bastante complicado generar ecuaciones de manera fácil si lo hacemos a pelo, pero tenemos editores online que nos facilita mucho el proceso, incluyendo editores visuales e incluso poder convertir de Latex a MatML fácilmente.
Aunque no todos los navegadores soportan MatML se está convirtiendo en un estándar y cada vez lo están mejorando. Además de ser un poco díficil de editar las ecuaciones tiene el problema que cada navegador renderiza la ecuación de una manera diferente, pero al tratarse de etiquetas de marcado esto nos permite usar CSS para hacer que sea mas vistoso.
Ejemplo:
<style>
@font-face {
font-family: "Latin Modern Math";
src: url("fonts/latinmodernmath.woff2") format("woff2");
}
math, math * {
font-family: "Latin Modern Math";
}
</style>
En el caso de usar Chrome (ya sea en PC o moviles), hay que tener en cuenta que no se visualiza todo el conjunto de etiquetas XML de MatML si no un subconjunto llamado MathML core. Esto limita mucho la visualización y hay que tener algunos puntos en cuenta.
Referencias
.