Activer le rendu LaTeX sur un site sans MathJax

2026-04-04 par Damien Mégy   latex mathématiques web

Table des matières

• Exécuter MathJax ou KaTeX depuis la console
  • MathJax (config + chargement + typeset)
• Transformer en bookmarklet
  • Étapes
  • Exemple (MathJax)
• Test (Klein project blog)
• Tranformer ceci en extension Chrome / Firefox
  • Structure minimale
  • manifest.json (Manifest V3)
  • background.js
  • content.js
  • Installation
• Publier l'extension

¶Rendre du LaTeX sur n’importe quelle page web

Cet article, comme beaucoup d'autres articles du blog, n'est qu'un simple aide-mémoire pour l'auteur :-)

Problématique : on tombe sur une page web qui contient des mathématiques, écrites en LaTeX, mais le LaTeX n'est pas compilé, ce qui rend la lecture pénible, comme par exemple sur https://blog.kleinproject.org/fr/comment-empiler-des-oranges-la-conjecture-de-kepler-sur-lempilement-des-spheres/. (Ceci peut être dû à plusieurs raisons : mathjax/katex non inclus ou supporté, problème de lancement de mathjax etc.)

Solution : dans cette entrée, on explique ici comment relancer le rendu LaTeX sur n'importe quel site,

• soit à partir de la console,
• soit, mieux, d'un simple clic à l'aide d'un petit script javascript placé en favori,
• soit même en fabriquant une petite extension chrome/firefox pour pouvoir simplement cliquer sur un bouquon "Executer Latex sur cette page".

¶Exécuter MathJax ou KaTeX depuis la console

¶MathJax (config + chargement + typeset)

Copier-coller dans la console :

(() => {
  if (window.MathJax) {
    MathJax.typesetPromise && MathJax.typesetPromise();
    return;
  }

  window.MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']],
      displayMath: [['$$', '$$'], ['\\[', '\\]']]
    },
    svg: { fontCache: 'global' },
    startup: { typeset: false }
  };

  const s = document.createElement('script');
  s.src = "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js";
  s.async = true;
  s.onload = () => {
    window.MathJax?.typesetPromise
      ? MathJax.typesetPromise()
      : MathJax.typeset && MathJax.typeset();
  };
  document.head.appendChild(s);
})();

---

¶Transformer en bookmarklet

Un bookmarklet est un favori contenant du JavaScript.

¶Étapes

1. Créer un favori
2. Remplacer son URL par une version « minifiée » sur une seule ligne précédée de javascript:

¶Exemple (MathJax)

javascript:(()=>{if(window.MathJax){MathJax.typesetPromise&&MathJax.typesetPromise();return;}window.MathJax={tex:{inlineMath:[['$','$'],['\\(','\\)']],displayMath:[['$$','$$'],['\\[','\\]']]},svg:{fontCache:'global'},startup:{typeset:false}};var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';s.async=true;s.onload=()=>{window.MathJax?.typesetPromise?MathJax.typesetPromise():MathJax.typeset&&MathJax.typeset()};document.head.appendChild(s);})();

Cliquer sur ce favori exécute le script sur la page courante.

¶Test (Klein project blog)

Tester les différentes méthodes sur https://blog.kleinproject.org/fr/comment-empiler-des-oranges-la-conjecture-de-kepler-sur-lempilement-des-spheres/.

En cas de problème, vérifier la présence du javascript: au début, et vérifier que les caractères spéciaux n'ont pas été échappés lors sur copier-coller.

---

¶Tranformer ceci en extension Chrome / Firefox

¶Structure minimale

extension/
├── manifest.json
├── content.js

¶manifest.json (Manifest V3)

{
  "manifest_version": 3,
  "name": "Math Renderer",
  "version": "1.0",
  "permissions": ["scripting", "activeTab"],
  "action": {
    "default_title": "Render LaTeX"
  },
  "background": {
    "service_worker": "background.js"
  }
}

¶background.js

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ["content.js"]
  });
});

¶content.js

Réutiliser le code MathJax ou KaTeX de la section I.

---

¶Installation

• Chrome : chrome://extensions → mode développeur → charger le dossier
• Firefox : about:debugging → charger un module temporaire

¶Publier l'extension

Dans un prochain épisode !