Un capítulo acerca de MathJax

He utilizado el MathJax en múltiples circunstancias, como la integración en WordPress o en un documento EPUB (donde utilizábamos una versión reducida y una configuración especial). Voy a dedicar esta entrada para detallar el funcionamiento y configuración de este fantástico (y desmesurado) script. Todo lo que voy a exponer se puede encontrar en la documentación de MathJax.

1.- Componentes de MathJax.

Los principales componentes de MathJax son los preprocesadores (tex2jax, mml2jax, p.e.), el Input jax, el Output jax y el MathJax Hub.

Los preprocesadores localizan y delimitan los fragmentos de texto matemático dentro del documento, y los encierran entre las etiquetas especiales que Mahjax usa para señalar las fórmulas, permitiéndole procesar posteriormente dichos fragmentos mediante el Input jax. Existen varios preprocesadores dependiendo de la sintaxis utilizada para representar el contenido matemático: tex2jax (notación LaTeX), mml2jax (notación MathML), asciimath2jax (notación AsciiMath), jsMath2jax (notación jsMath). Los preprocesadores se cargan como extensiones en los archivos de configuración o en el script de la cabecera del documento.

La misión del Input jax es convertir la notación matemática introducida por el autor, en el formato interno de trabajo usado por MathJax, llamado elemento jax interno.MathJax Hub

La tarea del Output jax es convertir dicho elemento interno jax en el formato de salida específico. Los formatos de salida más comunes son NativeMML (MathML nativo, para lo que es necesario un navegador que lo soporte), HTML-CSS (utilizando HTML y CSS, y por tanto compatible con cualquier navegador) y SVG (salida en formato gráfico vectorial escalable).

Cada formato de entrada y salida se corresponde con un script procesador diferente. Pueden encontrarse los distintos procesadores en las carpetas MathJax/jax/input/, MathJax/jax/output/. Los formatos de entrada y salida para Input jax y Output jax pueden ser especificados en el archivo de configuración o script de configuración de la cabecera del documento, como se verá más adelante.

El MathJax Hub rastrea las representaciones internas de varias ecuaciones matemáticas en la página, y puede ser consultado para obtener información sobre dichas ecuaciones. También gestiona los eventos del ratón y otras interacciones del usuario con la ecuación.

2.- Configuración de MathJax.

Según he tenido la ocasión de observar, los diversos componentes de MathJax, incluyendo los procesadores Input y Output, los preprocesadores, las extensiones y el núcleo de MathJax pueden ser configurados al menos de tres formas distintas: utilizando un archivo de configuración pre-definido, a través de la edición archivo config/default.js (que a su vez es un archivo de configuración predefinido) y a través del objeto MathJax.Hub.Config()(configuración en-línea).

2.1.- Utilizando un archivo de configuración predefinido.

Dichos archivos de configuración, siete en total, se encuentran en la carpeta MathJax/config/. Pueden ser editados y son los siguientes:

default.js: como su nombre indica, el archivo de configuración por defecto, que puede ser editado y modificado para ajustar la configuración a nuestras necesidades.

TeX-AMS-MML_HTMLorMML.js: Especifica una configuración que permite la inserción de sintaxis MathML o TeX-LaTeX, con los paquetes de símbolos AMSmath y AMSsymbols; crea una salida MathML nativa si el navegador lo soporta o una salida HTML con CSS en caso contrario.

TeX-AMS_HTML.js: configuración que permite insertar notación TeX-LaTeX, con los paquetes AMSmath y AMSsymbols, y elabora una salida HTML con CSS utilizando el HTML-CSS Output jax.

MML_HTMLorMML.js: configuración que permite especificar fórmulas matemáticas usando notación MathML y produce una salida MathML si el navegador lo soporta o HTML-CSS en otro caso.

AM_HTMLorMML.js: idem, AsciiMath entrada, MathML o HTML-CSS de salida segun el navegador lo soporte.

TeX-AMS-MML_SVG.js: entrada en notación TeX-LaTeX con los símbolos AMS o MathML, salida en formato de imagen SVG.

TeX-MML-AM_HTMLorMML.js: entrada en notación TeX_LaTeX, MathML o AsciiMath, salida MathML o HTML-CSS dependiendo de si el navegador los soporta.

Los archivos de configuración se cargan a través de la URL mediante la que se llama al script MathJax.js en la cabecera del documento. Tan sólo hay que añadir “config=nombre_archivo_configuración_sin_extension_js”al final de dicha URL. Un ejemplo podría ser el siguiente:

<script type="text/javascript"
   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

2.2.- Configuración en-línea.

Se realiza mediante el objeto MathJax.Hub.Config(), escribiendo las opciones de configuración el la cabecera de la propia página. Requiere un tag <script> propio, además del que ya se usa para cargar MathJax.js. Un ejemplo tendría la siguiente forma:

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    }
  });
</script>
<script type="text/javascript" src="path-to-MathJax/MathJax.js?config=TeX-AMS_HTML">
</script>

3. Opciones de configuración.

3.1.- Opciones de configuración del núcleo.

jax: []: Lista separada por comas del Input y el Output jax que se cargará al inicio.

extensions: []: Lista separada por comas de las extensiones que se cargarán al inicio (p.e. los prepocesadores)

config: []: Lista separada por comas de archivos de configuración que MathJax debe cargar al inicio (pueden utilizarse aquí los archivos de configuración predefinidos también).

styleSheets: []: Lista separada por comas de hojas de estilo CSS que se cargarán al inicio.

ShowMathMenu: true/false: Habilita o deshabilita el menú contextual MathJax.

zoom: “None”/”Hover”/”Click”/”Double-Click”: Indica cuando hacer un zoom a la fórmula matemática.

3.2.- Opciones de configuración de los prepocesadores.

La opciones se preceden del prepocesador en cuestión.

inlineMath: []: Vector de pares de cadenas que se usarán como delimitadores del texto matemático en-linea.

displayMath: []: Vector de pares de cadenas que se usarán como delimitadores del texto matemático “presentado”

processEscapes: true/false: Para escapar los delimitadores anteriores.

3.3.- Opciones de configuración de los procesadores output.

Las opciones se preceden del procesador output en cuestión.

scale: Factor de escala, en porcentaje, del texto matemático.

minScaleAdjust: Factor de escala mínimo, en porcentaje, del texto matemático.

Un ejemplo de todo ello:

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    showMathMenu: false,
    extensions: ["tex2jax.js"],
    jax: ["input/TeX", "output/SVG"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
      processEscapes: true
    },
    "SVG": {scale: 120}
  });
</script>
<script type="text/javascript" src="path-to-MathJax/MathJax.js">