13.3.21

LaTeX on Various Platforms

MathJax example

 

Contents


Learning Goals

The learning goals for this module include:

  • Learn about the LaTeX support provided by environments like GeoGebra, Brightspace, and Google Docs.
  • Learn how to include LaTeX on any webpage using the MathJax Javascript library.
  • Explore other platforms that offer LaTeX support.


Before You Start

Think of a few different document types or platforms that you use to communicate mathematics. This might include word-processors, slide-presentation software, online learning environments, webpages, graphing calculators, etc. How many different tools do you need to use to insert mathematical expressions and symbols into these environments?


LaTeX Everywhere

The LaTeX support included in various digital platforms allows you to use LaTeX or LaTeX-style commands to include mathematics without having to create an entire LaTeX document. In most chases, there are facilities on these platforms to inject a small amount of LaTeX (just what you need) into your document or page.

LaTeX in GeoGebra

The free online graphing and geometry tool GeoGebra includes LaTeX support in its text tool, allowing you to include LaTeX-based formulas on graphs and sketches that you create.


LaTeX editor in GeoGebra

Try out the GeoGebra support for LaTeX following these steps:

  1. Go to the GeoGebra graphing calculator page.
  2. Select the Tools menu and choose the Text Tool within the Media Tools category.
  3. Click on the graphing area to bring up the Text Tool, and select LaTeX Formula.
  4. Enter one of the LaTeX commands you have learned.
Geogebra's LaTeX editor provides some help - clicking on the Advanced/LaTeX options will open an equation-editor style interface that will insert the LaTeX code for symbols that you select.

LaTeX editor in GeoGebra

Read more about GeoGebra's LaTeX support on the GeoGebra wiki.

LaTeX in Brightspace

The virtual learning environment Brightspace has a LaTeX editor that is similar to the GeoGebra editor and the simple LaTeX renderer included in this course.

  1. In any Brightspace text editor, click on the "Show All Components" button (the ellipsis ...)
  2. Clicking on the Sigma button will show a dropdown with options for equation and symbol insertion.
  3. You can choose the LaTeX editor from the list.

LaTeX editor in Brightspace

LaTeX in Google Docs

Google Docs allows you to insert equations into your documents, and provides an equation editor to help you create the mathematics you want. However, if you know a bit of LaTeX, you can speed things up by using the Google Docs Equation Shortcuts, which are essentially LaTeX commands without the curly braces.

Google's official documentation on the use of equation shortcuts is very brief, but one enterprising user has come up with an unofficial cheatsheet.

Once you have finished typing the shortcut, Google Docs will automatically replace it with the symbol, and create editable spaces for you to put any required arguments. For example, typing "\frac" within the equation editing region will cause Google Docs to create a horizontal line, and places for the numerator and denominator.


LaTeX-based shortcut in GoogleDocs

If you have a Google account, try following these steps:

  1. Open a new Google Doc file.
  2. From the Insert menu, select Equation.
  3. In the text area created, type a simple command, like "\alpha" followed by a space.
  4. Note that your command should be replaced by an appropriate symbol.

LaTeX on any Web Page

Any webpage can display mathematics using LaTeX thanks to MathJax, a JavaScript library. All of the displayed mathematics in this course is created using LaTeX commands supported by MathJax, so looking at the source for these pages can provide some hints at how it is used.

The MathJax provides instructions on how to include MathJax on any webpage you author. As described there, including a small script will allow you to insert LaTeX formatted math using delimiters: backslashes with round brackets for inline math, and backslashes with square brackets for displayed equations.

  <!DOCTYPE html>
   <html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>MathJax example</title>
      <script type="text/javascript" async
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async>
      </script>
      </head>
   <body>
   <p>
     When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
     \[x = {-b \pm \sqrt{b^2-4ac} \over 2a}.\]
   </p>
   </body>
   </html>

This results in a web page displaying:
When a0, there are two solutions to ax2+bx+c=0 and they arex=b±b24ac2a.

This method can be used on some web-page authoring and blogging platforms that do not offer explicit LaTeX support. If there is a facility for inserting a script, you can insert the MathJax code, and start using LaTeX on your page. This is one way to get LaTeX support on Blogger-based blogs, for example.

MathJax offers support for advanced LaTeX formatting and configuration - please see their docs for more information.

LaTeX in Other Documents

If you are creating a document in another platform that does not have LaTeX support, you can use online LaTeX editors and insert the displayed math as an image file into your document. As described in module 1, editors like CodeCogs, or QuickLaTeX allow you to download a rendered image of your LaTeX commands. Alternatively, you could use the simple LaTeX renderer here and use a screen-capture tool to obtain an image of your equation.


Learn More

Malin Christersson has a nice page about LaTeX on the web, which includes some background, brief descriptions of Wikipedia, Wordpress, and various wiki-engine support for LaTeX, and a short overview of MathJax.

The popular graphing calculator Desmos will automatically render the math you type correctly. But did you know that it uses LaTeX behind the scenes (via another software library, MathQuill), and can even act like a LaTeX editor? In Desmos, type any equation, like "y=sin(theta)", highlight what you typed and copy it into a plain text editor. You will see that the result is a set of LaTeX commands that give the typed math that you see in Desmos. This suggest that if you want to get a bit of LaTeX code but you don't know the commands, you can type it in Desmos and copy the commands from there.


15.6.20

LaTeX en Blackboard con MathJax

Usando MathJax en Blackboard

Por: Darío Castro Castro


Matemáticas y texto

Acostumbrado a escribir en \LaTeX{} me era difícil adaptarme e escribir matemáticas usando el editor de ecuaciones de Blackboard y a la renderización que Blackboard hace de \LaTeX{}. Esto me llevó a leer muchas páginas web sobre escritura \LaTeX{} en páginas web. Históricamente, mostrar la notación matemática en los navegadores web ha sido un desafíoAfortunadamente las cosas han seguido adelante. En este post les presento las opciones disponibles para mostrar la notación matemática en el entorno de Blackboard que usamos en la UniversidadUn antecedente importante es que existe un compilador que pasa de \LaTeX{} a HTML: LaTeX2HTML. Sin embargo este es un proceso a veces engorroso en cualquier sistema operativo. Finalmente la búsqueda me llevó a tres soluciones:

  1. MathJax
  1. Markdown
  1. KaTeX

Les hablaré inicialmente de MathJax y de Markdown

LaTeX en Blackboard sin plugin

Blackboard permite introducir código \LaTeX directamente en la ventana de escritura. 

Soporte para notación matemática en Blackboard

Blackboard actualmente muestra notación matemática con Blackboard Math Editor. El editor de matemáticas está escrito por WIRIS, basado en estándares como MathML para representación interna y el formato de imagen PNG para mostrar fórmulas. La notación matemática se ingresa usando el editor gráfico de matemáticas y se muestra en un archivo de imagen.

Para la mayoría de las personas, Blackboard Math Editor es perfectamente adecuado. Sin embargo, para algunos temas y en algunos casos puede presentar problemas. Éstas incluyen:

  • Ya tiene una gran cantidad de notación escrita en un lenguaje de marcado matemático (es decir, \LaTeX), puede tomar mucho tiempo ingresar esto usando el editor gráfico de matemáticas en Blackboard.
  • Nativamente Blackboard muestra notación matemática en formato sans-serif. Para algunas áreas temáticas se prefiere una fuente serif.
  • Blackboard utiliza imágenes para mostrar la notación matemática, lo que puede generar problemas como: poca accesibilidad, imágenes borrosas y difíciles de leer al escalar, un ligero desenfoque de la notación cuando se imprime en papel, no hay opción para copiar y pegar la fórmula en otra aplicación para manipulación (por ejemplo, un sistema de álgebra computacional).
A continuación la forma de introducir ecuaciones en Blackboard sin ningún plugin o script externo

Así se introduce ecuaciones en Blackboard sin ningún plugin o extensión $$x^2+y^2$$ para ecuaciones en línea y si queremos centrar, centramos el cursor y escribimos la ecuación

$$x^2+y^2$$

Luego damos click en Enviar y el coloca la salida \LaTeX con una renderización "aceptable". El resultado se ve a continuación

LaTeX en Blackboard con KaTeX

Usando KaTeX en Blackboard

Por: Darío Castro Castro



Matemáticas y texto

Acostumbrado a escribir en \LaTeX{} me era dificil adaptarme e escribir matemáticas usando el editor de ecuaciones de Blackboard y a la renderización que Blackboard hace de \LaTeX{}. Esto me llevó a leer muchas páginas web sobre escritura \LaTeX{} en páginas web. Un antecedente importante es que existe un compilador que pasa de \LaTeX{} a HTML: LaTeX2HTML. Sin embargo este es un proceso a veces engorroso en cualquier sistema operativo. Finalmente la búsqueda me llevó a tres soluciones:

  1. MathJax
  1. Markdown
  1. KaTeX

En éste post solo hablaré de KaTeX y Markdown. En el Aquí encontrará la información sobre MathJax


LaTeX en Blackboard sin plugin

Blackboard permite introducir código \LaTeX directamente en la ventana de escritura

Así se introduce ecuaciones en Blackboard sin ningún plugin o extensión $$x^2+y^2$$ para ecuaciones en línea y si queremos centrar, centramos el cursor y escribimos la ecuación

$$x^2+y^2$$

Luego damos click en Enviar y el coloca la salida LaTeX con una renderización "aceptable". El resultado se ve a continuación

LaTeX en Blackboard con KaTeX

KaTeX es una biblioteca de JavaScript rápida y fácil de usar para la representación matemática de TeX en la web.

  • Rápido: KaTeX procesa sus matemáticas sincrónicamente y no necesita redistribuir la página. Vea cómo se compara con un competidor en esta prueba de velocidad .
  • Calidad de impresión: el diseño de KaTeX se basa en el TeX de Donald Knuth, el estándar de oro para la composición matemática.
  • Autocontenido: KaTeX no tiene dependencias y se puede combinar fácilmente con los recursos de su sitio web.
  • Representación* del lado del servidor: KaTeX produce la misma salida independientemente del navegador o el entorno, por lo que puede representar previamente las expresiones usando Node.js y enviarlas como HTML sin formato. KaTeX es compatible con todos los principales navegadores, incluidos Chrome, Safari, Firefox, Opera, Edge e IE 11.

KaTeX admite gran parte (pero no todos) de LaTeX y muchos paquetes de LaTeX. Vea la lista de funciones compatibles .

¡Prueba KaTeX en la página de demostración!.


Existen muchas variaciones del plugin básico de KaTeX, pero después de leer la documentación de KaTeX encontré el que sirve con Blackboard , encontré el apropiado.

<link rel="stylesheet" 
href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" 
integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" 
crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" 
integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" 
crossorigin="anonymous"></script>
<script defer 
src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" 
integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" 
crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>

Se copia éste código antes de empezar es escribir y se pega en la ventana que se despliega en Blackboard al hacer click en el botón HTML.

y nos debé quedar así

Le damos click a actualizar y empezamos escribir directamente nuestro código LaTeX, teniendo la precaución que debemos usar \(\) para ecuaciones en línea y \[\] para ecuaciones centradas, los resultados sería estos

De esta manera podemos escribir código LaTeX complejo y se compilará sin problemas. A continuación otros ejemplos

LaTeX en Blackboard escribiendo en Markdown

Markdown es un lenguaje de marcado que facilita la aplicación de formato a un texto empleando una serie de caracteres de una forma especial. En principio, fue pensado para elaborar textos cuyo destino iba a ser la web con más rapidez y sencillez que si estuviésemos empleando directamente HTML. Y si bien ese suele ser el mejor uso que podemos darle, también podemos emplearlo para cualquier tipo de texto, independientemente de cual vaya a ser su destino.

Como explica "John Gruber": http://daringfireball.net/projects/markdown/, uno de sus creadores, Markdown es realmente dos cosas: por un lado, el lenguaje; por otro, una herramienta de software que convierte el lenguaje en HTML válido.

De Markdown existen variantes, unas soporta escritura LaTeX otras no. Existen versiones instalables en el computador y existen versiones online. De las versiones online que estudié, la que mejor se adapta a nuestro propósito es

UPMATH

Aquí podemos escribir las ecuaciones como lo hacemos de costumbre en nuestro editor LaTeX, pero siempre escribiendo en código Markdown que no es nada difícil.

A continuación ejemplo cualquiera de código escrito en Markdown. Una vez se escribe el código, copiamos el html que se genera y lo pegamos en Blackboard en la ventana html quedando un resultado así

Ejemplo de LaTeX con Markdown

Let H be a Hilbert space, C be a closed bounded convex subset of H, T a nonexpansive self map of C. Suppose that as n\rightarrow\infty, a_{n,k}\rightarrow0 for each k, and \gamma_{n}=\sum_{k=0}^{\infty}\left(
a_{n,k+1}-a_{n,k}\right)  ^{+}\rightarrow0. Then for each x in C, A_{n}x=\sum_{k=0}^{\infty}a_{n,k}T^{k}x converges weakly to a fixed point of T .

The numbered equation

(1)u_{tt}-\Delta u+u^{5}+u\left|  u\right|  ^{p-2}=0\text{ in }\mathbf{R}%
^{3}\times\left[  0,\infty\right[ \label{eqn1}%

is automatically numbered as equation (1)

(2)\boxed{
  \int\limits_{-\infty}^{\infty}
  e^{-x^2} \, dx = \sqrt{\pi}
}

(3)x_{1,2} = {-b\pm\sqrt{b^2 - 4ac} \over 2a}.

(4)A_{m,n} = \begin{pmatrix}
a_{1,1} & a_{1,2} & \cdots & a_{1,n} \\
a_{2,1} & a_{2,2} & \cdots & a_{2,n} \\
\vdots  & \vdots  & \ddots & \vdots  \\
a_{m,1} & a_{m,2} & \cdots & a_{m,n}
\end{pmatrix}

(5)\[\oint_{S}\vec{E}\cdot d\vec{S}=\frac{1}{\varepsilon_o}\int_{V} \rho \, dV\]

(6)\gamma \overset{\text{def}}{=}
\lim\limits_{n \to \infty}
  \left(
     \sum\limits_{k=1}^n {1 \over k}
     - \ln n
  \right)
\approx 0.577

In this case the LaTeX syntax will be highlighted in the source code. You can even add equation numbers (unfortunately there is no automatic numbering and refs support):

(7)|\vec{A}|=\sqrt{A_x^2 + A_y^2 + A_z^2}.

It is possible to write Cyrillic symbols in \text command: Q_\text{плавления}>0.

One can use matrices:

(8)T^{\mu\nu}=\begin{pmatrix}
\varepsilon&0&0&0\\
0&\varepsilon/3&0&0\\
0&0&\varepsilon/3&0\\
0&0&0&\varepsilon/3
\end{pmatrix},

integrals:

(9)P_\omega={n_\omega\over 2}\hbar\omega\,{1+R\over 1-v^2}\int\limits_{-1}^{1}dx\,(x-v)|x-v|,

cool tikz-pictures:

\usetikzlibrary{decorations.pathmorphing}
\begin{tikzpicture}[line width=0.2mm,scale=1.0545]\small
\tikzset{>=stealth}
\tikzset{snake it/.style={->,semithick,
decoration={snake,amplitude=.3mm,segment length=2.5mm,post length=0.9mm},decorate}}
\def\h{3}
\def\d{0.2}
\def\ww{1.4}
\def\w{1+\ww}
\def\p{1.5}
\def\r{0.7}
\coordinate[label=below:$A_1$] (A1) at (\ww,\p);
\coordinate[label=above:$B_1$] (B1) at (\ww,\p+\h);
\coordinate[label=below:$A_2$] (A2) at (\w,\p);
\coordinate[label=above:$B_2$] (B2) at (\w,\p+\h);
\coordinate[label=left:$C$] (C1) at (0,0);
\coordinate[label=left:$D$] (D) at (0,\h);
\draw[fill=blue!14](A2)--(B2)-- ++(\d,0)-- ++(0,-\h)--cycle;
\draw[gray,thin](C1)-- +(\w+\d,0);
\draw[dashed,gray,fill=blue!5](A1)-- (B1)-- ++(\d,0)-- ++(0,-\h)-- cycle;
\draw[dashed,line width=0.14mm](A1)--(C1)--(D)--(B1);
\draw[snake it](C1)--(A2) node[pos=0.6,below] {$c\Delta t$};
\draw[->,semithick](\ww,\p+0.44*\h)-- +(\w-\ww,0) node[pos=0.6,above] {$v\Delta t$};
\draw[snake it](D)--(B2);
\draw[thin](\r,0) arc (0:atan2(\p,\w):\r) node[midway,right,yshift=0.06cm] {$\theta$};
\draw[opacity=0](-0.40,-0.14)-- ++(0,5.06);
\end{tikzpicture}

plots:

\begin{tikzpicture}[scale=1.0544]\small
\begin{axis}[axis line style=gray,
	samples=120,
	width=9.0cm,height=6.4cm,
	xmin=-1.5, xmax=1.5,
	ymin=0, ymax=1.8,
	restrict y to domain=-0.2:2,
	ytick={1},
	xtick={-1,1},
	axis equal,
	axis x line=center,
	axis y line=center,
	xlabel=$x$,ylabel=$y$]
\addplot[red,domain=-2:1,semithick]{exp(x)};
\addplot[black]{x+1};
\addplot[] coordinates {(1,1.5)} node{$y=x+1$};
\addplot[red] coordinates {(-1,0.6)} node{$y=e^x$};
\path (axis cs:0,0) node [anchor=north west,yshift=-0.07cm] {0};
\end{axis}
\end{tikzpicture}

and the rest of LaTeX features.

About Upmath

It works in browsers, except equations rendered on the server. The editor stores your text in the browser to prevent the loss of your work in case of software or hardware failures.

I have designed and developed this lightweight editor and the service for converting LaTeX equations into svg-pictures to make publishing math texts on the web easy. I consider client-side rendering, the rival technique implemented in MathJax, to be too limited and resource-consuming, especially on mobile devices.

The source code is published on Github under MIT license.

Now you can erase this instruction and start writing your own scientific post. If you want to see the instruction again, open the editor in a private tab, in a different browser or download and clear your post and refresh the page.

Have a nice day :)

Roman Parpalak, web developer and UX expert.

(2)\boxed{
  \int\limits_{-\infty}^{\infty}
  e^{-x^2} \, dx = \sqrt{\pi}
}