jueves, 25 de junio de 2026

Como insertar LaTeX en Blogger (o en cualquier blog con HTML)

Llevo años con la tarea pendiente de mirar cómo introducir código LaTeX en las entradas de este blog (Blogger).

  • Poner el editor en modo HTML


  • Insertar al principio las siguientes líneas para utilizar el script de MathJax:
<script>
window.MathJax = {
   tex: {
inlineMath: [
['$', '$'],
['\\(', '\\)']
],
displayMath: [
['$$', '$$'],
['\\[', '\\]']
],
processEscapes: true } }; </script> <script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"> </script>

  • Ahora para insertar código LaTeX integrado en el texto de entradas del blog podemos utilizar \\( fórmula \\) o \$ fórmula \$. Puede hacerse desde el editor en vista de redacción si se desea.
Por ejemplo: $a^2+b^2=c^2$.
  • Si lo que quiere es destacar una fórmula separada del texto y centrada utilizaremos \\[ fórmula \\] o \$\$ fórmula \$\$. Puede hacerse desde el editor en vista de redacción si se desea.
Por ejemplo: $$a^2+b^2=c^2$$

Importante tener en cuenta:
  • Los delimitadores a utilizar se pueden cambiar por otros en los apartados de inlineMath y displayMath de la cabecera HTML que hemos puesto.
  • Una vez definidos hay que tener cuidado porque esos símbolos dejan de interpretarse como caracteres de texto. Por ejemplo, si quiero escribir que una compra me ha costado 43\$ tengo que escribir en la entrada del blog \\$ en lugar de \$ porque MathJax lo interpretará como que estamos abriendo un delimitador de fórmula.
  • En ocasiones, el editor en vista de redacción de Blogger añade cosas como <span></span> al texto y hace que no se interpreten las fórmulas. También podemos tener problemas si hay negritas o cursivas. Hay que revisar que se visualizan y si no es así entrar en el editor en modo HTML para quitar lo que sobre.
Si utilizamos pocas veces LaTeX está bien el proceso anterior, pero si lo usamos constantemente podemos editar la plantilla HTML del tema que tenemos en Blogger para no tener que añadir las líneas del script cada vez.
Y añadimos las líneas de código dentro del <head> </head> (por ejemplo después de la línea de <title></title>).

A partir de ahora ya no tengo excusa y escribiré como toca las expresiones algebraicas 😁

No hay comentarios: