Sur mon blog scientifique Couleur-Science il m’arrive d’avoir besoin d’afficher des équations ou des expressions mathématiques, avec des fractions ou des lettres grecques.

Il existe plusieurs bibliothèques en JavaScript pour faire ça, l’une d’elles, la plus populaire en fait, est MathJAX, que vous connaissez peut-être et que j’utilisais avant. MathJAX est compatible avec pratiquement tous les navigateurs (jusqu’à IE6) et gère le SVG, le MML,, les images, elle permet de générer des codes d’intégration… Sauf que ceci vient avec un coût : l’archive pèse plus de 100 Mo, contient des milliers de fichiers et surtout le rendu est très lent.

Puis j’ai découvert Katex : un outil qui permet d’afficher des équations, comme MathJAX, mais bien plus rapidement : en fait, l’affichage est pratiquement instantané même sur les ordinateurs moins puissants ! Il n’y a pas cinquante mille options, du coup l’archive est beaucoup plus légère (2 Mo seulement, dont les 3/4 ne seront jamais chargés que sur les vieux navigateurs).

Je l’utilise depuis quelques mois sur Couleur-Science et c’est nickel. Vous pouvez en voir le résultat sur ces articles : 1, 2, 3.

Pour l’usage, ça se fait avec la syntaxe LaTeX (tuto et commandes supportées).
Dans votre page Web, incluez les fichiers katex.min.css et katex.min.js, ainsi que la bibliothèque auto-render, qui permet de faire le rendu automatique des équations quand elles sont en LaTeX dans le code source.

Pour retrouver la syntaxe de MathJAX, ajoutez ceci dans votre JavaScript :

renderMathInElement(
	document.body,
	{
		delimiters: [
			{left: "$$", right: "$$", display: true},
			{left: "$", right: "$", display: false},
		]
	}
);

Pour faire une équation dans une ligne de texte, mettez tout simplement le code LaTeX de l’équation entre deux « $ » (comme ceci : « $equation$ »)
Pour faire une équation sous la forme d’un bloc, centré, entre deux paragraphes de texte, mettez le code entre « $$ » (comme ceci : « $$equation$$ »).

KaTeX est créé par la Khan Academy, une association à but non-lucrative pour promouvoir l’éducation (en sciences, en programmation, en arts, en économie…) à travers des milliers de cours en ligne et des vidéos.

Enfin, ni MathJAX ni KaTeX ne permettent de tracer des graphiques. Pour cela, il y a JSXGraph, qui est très complète (donc forcément un peu lourde aussi). Un exemple d’utilisation ici.