Escribiendo fórmulas matemáticas

En muchas páginas debo escribir fórmulas matemáticas, tanto en las dedicadas a estas materias como las que tratan de Física y otras. Fuera de este sitio empleo $\LaTeX$ para este fin, por lo que seguiré haciendolo dentro del mismo.

Hay varias maneras de lograr este objetivo:

¿Donde hacer la transformación?

• En una aplicación externa que transforme $\LaTeX$ a HTML (como ser pandoc) o a gráficos SVG u otros formatos.
• En el cliente (navegador del usuario) usando las librerías javascript MathJax o Katex. Esta era la solución que usaba hasta ahora.
• En el servidor. De nuevo con MathJax o Katex.
• En la etapa de generación de código, aplicando MathJax o Katex (si, otra vez) a través de Eleventy o de Markdow-It que el anterior usa para convertir archivos markdown a HTML.

Por el tipo de páginas que estoy creando, me decidí por una combinación del segundo y el último método.

Para las páginas con contenido puramente estático, como ser algunos de los problemas resueltos, o teoría hago la conversión al generar el código HTML.

Para las que tienen contenido dinámico, es decir que el contenido puede cambiar según la interacción con el usuario utilizo una combinación de ambos métodos.

Ya que el sitio se crea como estático ( ver jamstack ) no me sirve la tercera solución propuesta.

En algún caso que necesito gráficos generados con $\LaTeX$ recurro a herramientas externas que los transforman al formato SVG, que se incluye sin problemas dentro del html (El soporte para paquetes gráficos tanto en MathJax como en Katex es muy limitado).

Después de algunas comparaciones entre MathJax y Katex me decidí por este último, principamente por problemas que se presentaron con algunas instrucciones $\LaTeX$ como ser \underbrace en MathJax, aunque puedo cambiar de librería en el futuro (MathJax es más completa que Katex).

La transformación de $\LaTeX$ a HTML se puede realizar en distintas etapas de la compilación del sitio:

• Al procesar el markdown para obtener el HTML
• Sobre el HTML, mediante eleventy
• Sobre el HTML, luego del proceso con eleventy, por ejemplo aplicando postHTML u otro método sobre el "bundler" (en este caso estoy usando snowpack).

Elijo el primer método. Para ello aplico un plugin a la librería markdown-it que es la encargada de transformar el .md a .html.

De los plugins disponibles elijo @iktakahiro/markdown-it-katex ya que en las pruebas que hice funcionó bien,y está relativamente actualizado.

Instalo Katex y el plugin:

npm i -D katex @iktakahiro/markdown-it-katex

archivo: eleventy.js

// dentro de 
// module.exports = function (eleventyConfig) {

  let markdownIt = require("markdown-it");
  let markdownItKatex = require("@iktakahiro/markdown-it-katex");
  let options = {
    html: true,
    breaks: false,
    linkify: true
  };

  let markdownLib = markdownIt(options).use(markdownItKatex, {"throwOnError" : false, "errorColor" : " #cc0000"});
  eleventyConfig.setLibrary("md", markdownLib);

Utilizo el plugin @iktakahiro/markdown-it-katex en lugar de markdown-it-katex que está desactualizado.

El uso de $\LaTeX$ dentro de markdown se realiza encerrando la expresión entre signos $ (uno para mantenerse dentro de la linea o dos para crear un bloque aparte).

Por ejemplo $\sum_{i=1}^n x_i$ para obtener $\sum_{i=1}^n x_i$ dentro del párrafo.

O $$\sum_{i=1}^n x_i$$ para tenerlo en un bloque aparte:

$$\sum_{i=1}^n x_i$$