Ecuaciones Matematicas LaTeX con Mathjax y KaTeX en Paginas Web o Blogs

Si alguna vez viste una Pagina Web con ecuaciones Matemáticas, Físicas, Químicas, Estadísticas o Económicas este mini articulo-tutorial te interesa, comparto 2 maneras de insertar ecuaciones $$\LaTeX$$ en nuestra Web Site o Blog con MathJaX y $$\KaTeX$$.

$$$f(x) = \frac{1}{2\pi i}\oint \frac{f(z)}{z-a} dz$$$


Hace tiempo compartí como tener Ecuaciones LaTeX en Blogger, en base a esta, los siguientes métodos funcionan de manera ligero y eficaz. Una notación matemática elegante y adecuada en un sitio web o blog le da un mayor expresión y de comprensión para quienes acostumbramos expresarnos de manera formal, lógica y matemáticas, a continuación las dos maneras:

1. MathJax
Es una biblioteca javascript que permite visualizar fórmulas matemáticas en navegadores web, utilizando los lenguajes de marcado LaTeX o MathML de código abierto, mathjax se libera como software de fuente abierta bajo la Licencia Apache, los pasos son:

1.1. Vamos a la plantilla editar de nuestra pagina web,
1.2. Copiar el Siguente código MathJax v2.7:
<!-- LaTeX con MathJax V2.7-->
<script type='text/x-mathjax-config'>
  MathJax.Hub.Config({
    extensions: [&quot;tex2jax.js&quot;],
    jax: [&quot;input/TeX&quot;, &quot;output/HTML-CSS&quot;],
    tex2jax: {
      inlineMath: [ [&#39;$&#39;,&#39;$&#39;], [&quot;\\(&quot;,&quot;\\)&quot;] ],
      displayMath: [ [&#39;$$&#39;,&#39;$$&#39;], [&quot;\\[&quot;,&quot;\\]&quot;] ],
      processEscapes: true
    },
    &quot;HTML-CSS&quot;: { availableFonts: [&quot;TeX&quot;] }
  });</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML' type='text/javascript'/>

1.3. Pegar en la cabecera de nuestra pagina web, o sea entre <head> y </head> de la plantilla, guardar, y listo para el uso (punto 3.) e insertar la ecuaciones matemáticas en nuestra Page.

2. KaTeX 
Es otra biblioteca JavaScript que muestra la notación matemática en los navegadores web. Se pone especial énfasis en ser rápido y fácil de usar. Fue desarrollado inicialmente por la Academia Khan, actualmente funciona bajo la Licencia MIT, y los pasos son:
2.1. Vamos a la plantilla editar de nuestra pagina web,
2.2. Copiar el siguiente código KaTeX v0.7:
<!-- LaTeX con KaTeX V0.7 -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/contrib/auto-render.min.js'/>
2.3. Pegar en la cabecera, entre <head> y </head> de la plantilla,
2.4. Ahora copiar el siguiente código javascript:
<!-- LaTeX con KaTeX V0.7 -->
<script>
  renderMathInElement(
    document.body,
    {
      delimiters: [
        {left: &quot;$$&quot;, right: &quot;$$&quot;, display: true},
        {left: &quot;$&quot;, right: &quot;$&quot;, display: false},
        {left: &quot;\\[&quot;, right: &quot;\\]&quot;, display: true},
        {left: &quot;\\(&quot;, right: &quot;\\)&quot;, display: false}
      ],
      ignoredTags: [
        &quot;script&quot;,
        &quot;noscript&quot;,
        &quot;style&quot;,
        &quot;textarea&quot;,
        &quot;pre&quot;,
        &quot;code&quot;
      ]
    }
  );
</script>

 2.5. Pegar en el cuerpo, o sea entre <body> y </body> de la plantilla, guardar, y listo para el uso e insertar la ecuaciones matemáticas en nuestra Page.

3. Como Insertar la Ecuación
Si todo esta bien, está listo para insertar las ecuaciones matemáticas en su pagina web o blog. Para escribir una ecuación, todo código $$\LaTeX$$ debe ir entre signos de dólar $ (uno=alineado o dos=centrado) o entre \\( ecuación \\). Y para los que no estamos familiarizados con el editor LaTeX, CodeCogs es una ayuda que te permite obtener códigos LaTeX o TeX ademas de insertar ecuaciones HTML imagen en nuestra web.

Por ejemplo para insertar la ecuación de segundo grado ($$ax^{2}+bx +c=0$$), se escribe en sintaxis $$\TeX$$ de la siguiente manera: x_{(1,2)} = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} (obtenido de CodeCogs), y lo ponemos entre los signos de dolar, el resultado sera:
$$$x_{(1,2)} = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$$ 

COMENTARIOS

GOOGLE: 2
  1. Hola, me interesa mucho esta publicación pero al hacer lo que me dices de las dos maneras no me sale la ecuación. Me puedes ayudar en decir donde exactamente voy a copiar el código latex?
    Gracias.

    ResponderEliminar
    Respuestas
    1. El código $$\LaTeX$$ puede ir en cualquier parte de la pagina o blog entre signo/signos de dólar $en este caso.

      Eliminar

Nombre

Contabilidad,2,EconomiaPolitica,5,Estadisticas,1,EvaluacionProyectos,47,FinanzasCorporativas,8,GasPetroleo,6,GestionCalidad,2,GestionProduccion,16,GestionProyectos,15,IdentificacionProyectos,9,Imagenes,4,IngenieriaAmbiental,5,IngenieriaElectrica,4,IngenieriaIndustrial,10,IngenieriaLegal,5,IngenieriaMetodos,3,IngenieriaTransporte,5,Internet,6,InvestigacionOperaciones,3,Lean,10,Libros,6,Logistica,1,Logo,3,Macroeconomia,4,Matematicas,5,Microeconomia,9,Mineria,12,OPINION,17,OptimizacionDinamica,7,PaginaWeb,6,PlanNegocios,4,PreparacionProyectos,35,PROYECTOS,2,SeguridadIndustrial,4,Variedad,15,
ltr
item
Ruben Apaza: Ecuaciones Matematicas LaTeX con Mathjax y KaTeX en Paginas Web o Blogs
Ecuaciones Matematicas LaTeX con Mathjax y KaTeX en Paginas Web o Blogs
https://1.bp.blogspot.com/-LXwVWq8JTWM/WUXN8I4xugI/AAAAAAAADbE/ASbezpefxBItZBmZX_ECI9PFz6WZL0lEwCLcBGAs/s1600/latex_mathjax_katex_web.png
https://1.bp.blogspot.com/-LXwVWq8JTWM/WUXN8I4xugI/AAAAAAAADbE/ASbezpefxBItZBmZX_ECI9PFz6WZL0lEwCLcBGAs/s72-c/latex_mathjax_katex_web.png
Ruben Apaza
https://www.rubenapaza.com/2017/06/ecuaciones-latex-mathjax-katex-pagina.html
https://www.rubenapaza.com/
https://www.rubenapaza.com/
https://www.rubenapaza.com/2017/06/ecuaciones-latex-mathjax-katex-pagina.html
true
6705892616169174074
UTF-8
Cargando... No encontrado VER TODO Leer mas Replica Cancelar Borrar Por Portada PAGINAS PUBLICACIONES Ver todo RELACIONADOS Y RECOMENDADOS ETIQUETA ARCHIVO BUSCAR TODOS No se encontró ninguna publicación Volver al inicio Domingo Lunes Martes Miércoles Jueves Viernes Sabado Dom Lun Mar Mie Jue Vie Sab Enero Febrero Marzo Abril Mayo Junio Julio Agosto Septiembre Octubre Noviembre Diciembre Ene Feb Mar Abr Mayo Jun Jul Ago Sep Oct Nov Dic ahora Hace 1 minuto $$1$$ minutes ago Hace 1 hora $$1$$ hours ago Ayer $$1$$ days ago $$1$$ weeks ago Hace mas de 5 semanas Seguidores Seguir CONTENIDO PREMIUM BLOQUEADO PASO 1: Compartir en una red social. PASO 2: Haga clic en el enlace que compartiste para desbloquear. Copiar todo el código Seleccionar todo el código Todo los códigos fueron copiados a su portapapeles. Si no copia los códigos / textos, presione [CTRL] + [C] (o CMD + C en Mac) para copiar