index.html (4531B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <title>Cómo escribo matemáticas en HTML: LaTeX, latexmlmath y MathML</title> 7 <link rel="icon" type="image/png" href="/favicon.png" /> 8 <link rel="stylesheet" type="text/css" href="../article.css" /> 9 </head> 10 <body> 11 <header> 12 <p class="title">Cómo escribo matemáticas en HTML: LaTeX, latexmlmath y MathML</p> 13 <p class="date">15 de junio de 2020 • fjbalon</p> 14 </header> 15 <p>LaTeX -ó TeX- es un lenguaje de marcas y un sistema de tipografía, escrito por <a href="https://es.wikipedia.org/wiki/Donald_Knuth">Donald E. Knuth</a> muy popular entre las comunidades de matemáticos, físicos e informáticos. Una de las características esenciales del lenguaje es la composición de fórmulas matemáticas complejas, lo que constituye una ventaja absoluta contra procesadores de texto WYSIWYG.</p> 16 <p>Sin embargo, HTML presenta casi el mismo problema que los procesadores de texto comunes, puesto que escribir ecuaciones complejas se hace excesivamente tedioso. Para ello es posible implementar el lenguaje de marcas -basado en XML- MathML, cuyo objetivo es expresar notación matemática. </p> 17 <p>Así, tomando como ejemplo la ecuación:</p> 18 19 <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="\frac{\int_{0}^{5}x\mathrm{d}x}{\lim_{x\rightarrow\infty}\frac{3+x}{x^{2}}}" display="block"> 20 <mfrac> 21 <mrow> 22 <msubsup> 23 <mo largeop="true" symmetric="true">∫</mo> 24 <mn>0</mn> 25 <mn>5</mn> 26 </msubsup> 27 <mrow> 28 <mi>x</mi> 29 <mo></mo> 30 <mrow> 31 <mo rspace="0pt">d</mo> 32 <mi>x</mi> 33 </mrow> 34 </mrow> 35 </mrow> 36 <mrow> 37 <msub> 38 <mo>lim</mo> 39 <mrow> 40 <mi>x</mi> 41 <mo>→</mo> 42 <mi mathvariant="normal">∞</mi> 43 </mrow> 44 </msub> 45 <mo></mo> 46 <mfrac> 47 <mrow> 48 <mn>3</mn> 49 <mo>+</mo> 50 <mi>x</mi> 51 </mrow> 52 <msup> 53 <mi>x</mi> 54 <mn>2</mn> 55 </msup> 56 </mfrac> 57 </mrow> 58 </mfrac> 59 </math> 60 <p>Que en LaTeX es escrita como:</p> 61 62 <pre><code>\[ 63 \frac{\int_0^5 x \mathrm{d}x}{\lim_{x\rightarrow\infty}\frac{3+x}{x^2}} 64 \]</code></pre> 65 <p>Nos valemos de la herramienta <emb>latexmlmath</emb>> con el string de la ecuación como argumento para que nos genere el código HTML en MathML.</p> 66 67 <pre><code>$ latexmlmath "\[\frac{\int_0^5 x \mathrm{d}x}{\lim_{x\rightarrow\infty}\frac{3+x}{x^2}}\]" 68 69 <?xml version="1.0" encoding="UTF-8"?> 70 <math xmlns="http://www.w3.org/1998/Math/MathML" alttext="\frac{\int_{0}^{5}x\mathrm{d}x}{\lim_{x\rightarrow\infty}\frac{3+x}{x^{2}}}" display="block"> 71 <mfrac> 72 <mrow> 73 <msubsup> 74 <mo largeop="true" symmetric="true">∫</mo> 75 <mn>0</mn> 76 <mn>5</mn> 77 </msubsup> 78 <mrow> 79 <mi>x</mi> 80 <mo></mo> 81 <mrow> 82 <mo rspace="0pt">d</mo> 83 <mi>x</mi> 84 </mrow> 85 </mrow> 86 </mrow> 87 <mrow> 88 <msub> 89 <mo>lim</mo> 90 <mrow> 91 <mi>x</mi> 92 <mo>→</mo> 93 <mi mathvariant="normal">∞</mi> 94 </mrow> 95 </msub> 96 <mo></mo> 97 <mfrac> 98 <mrow> 99 <mn>3</mn> 100 <mo>+</mo> 101 <mi>x</mi> 102 </mrow> 103 <msup> 104 <mi>x</mi> 105 <mn>2</mn> 106 </msup> 107 </mfrac> 108 </mrow> 109 </mfrac> 110 </math></code></pre> 111 <p>El resultado puede verse claramente en el ejemplo de la ecuación.</p> 112 <h2>Bibliografía y enlaces de interés</h2> 113 <ul> 114 <li><a href="https://oeis.org/wiki/List_of_LaTeX_mathematical_symbols">List of LaTeX mathematical symbols</a> - OEIS</li> 115 <li><a href="http://metodos.fam.cie.uva.es/~latex/curso-2015/apuntes3.pdf">Apuntes de LaTeX - Capítulo 3: Fórmulas matemáticas</a></li> 116 <li><a href="https://manualdelatex.com/tutoriales/ecuaciones">Ecuaciones en LaTeX</a> - manualdelatex.com</li> 117 </ul> 118 119 </body> 120 </html>