Présentation

KaTeX est une librairie Javascript permettant de publier en ligne des formules mathématiques définies avec le langage LaTeX. Celui-ci est bien connu depuis de nombreuses années des auteurs de manuels de mathématiques, physique et chimie.
Sans avoir pour objectif de rédiger une thèse sur un concept mathématique, cette librairie peut satisfaire un besoin plus ponctuel tel que la justification de la complexité d'un algorithme ou la définition d'un filtre de fréquences.

Aperçu

Voici quelques exemples d'équations affichées via KaTeX :

Références

Pour plus d'informations sur les possibilités offertes par cette librairie, je vous invite à consulter cette page de la Khan Academy où un lien permet de télécharger l'archive contenant les fichiers CSS et Javascript ainsi que les polices à référencer dans la page HTML où publier une formule.

Mise en œuvre

Il faut tout d'abord déclarer dans l'en-tête de la page les fichiers CSS et Javascript de la librairie :

<link rel="stylesheet" type="text/css" href="path/katex.min.css">
<script type="text/javascript" src="path/katex.min.js"></script>

Une formule peut alors être ajoutée dans le corps de la page :

<div class="tex" data-expr="\displaystyle c = \pm\sqrt{a^2 + b^2}"></div>

Enfin, le chargement des formules présentes dans la page peut être réalisé sans autre framework Javascript externe :

<script type="text/javascript">
  var elements = document.getElementsByClassName("tex");
  Array.prototype.forEach.call(elements, function(element) {
    katex.render(element.getAttribute("data-expr"), element);
  });
</script>

Dans cet exemple, pour chaque élément possédant la classe tex, son attribut data-expr ainsi que l'élément lui-même sont passés en paramètres de la fonction de rendu de Katex.

L'utilisateur pourra à sa guise remplacer ce chargement par un équivalent d'un framework complémentaire tel que jQuery et personnaliser l'affichage de ses formules en surchargeant les styles CSS par défaut.