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ío. Afortunadamente 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 Universidad. 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

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

Leer más »
Publicado por en No hay comentarios:

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} }

Publicado por en No hay comentarios:
Suscribirse a: Entradas (Atom)