KaTeX ne fonctionne pas

Le problème exposé dans ce sujet a été résolu.

Bonsoir, j’essaye de faire fonctionner KaTeX, mais sans succès. Je me base sur cette documentation.

L’idée et d’activer KaTeX au sein de toutes les balises <span class="katex"></span>. Mon code est le suivant :

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/styles.css">
    <!-- KaTeX -->
    <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"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
          renderMathInElement(document.querySelectorAll('span.katex'));
        });
    </script>
    <title>RPCode Example</title>
  </head>
  
  <body>
     <span class="katex">f(x) = \displaystyle \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi</span>
  </body>
</html>

Le résultat attendu est f(x)=∫−∞∞f^(ξ) e2πiξx dξf(x) = \displaystyle \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi mais j’obtiens :

J’ai essayé de changer document.querySelectorAll('span.katex') par document.getElementsByClassName('katex') ou bien document.body, mais cela ne fonctionne pas. J’ai également doublé les antislashs \\ dans l’expression mais idem.

Une idée ? Merci d’avance. ;)

+0 -0

Ok, alors la fonction renderMathInElement ne prend en paramètre qu’un élément. Pas une liste d’élément.

Aussi, par défault, il faut utiliser un délimiter.

        document.addEventListener("DOMContentLoaded", function() {
          for (e of document.querySelectorAll('span.katex')) {
            renderMathInElement(e);
          }
        });

Et pour le délimiter:

  <body>
     <span class="katex">\[f(x) = \displaystyle \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi\]</span>
  </body>
+1 -0

Oui. Tout est expliqué dans la documentation. Tu peux choisir le délimiteur que tu veux et tu peux choisir comment il s’affiche. Tu as d’autres paramètre comme ignoreTags, preProcess, …

+1 -0

Oui. Tout est expliqué dans la documentation. Tu peux choisir le délimiteur que tu veux et tu peux choisir comment il s’affiche. Tu as d’autres paramètre comme ignoreTags, preProcess, …

ache

J’ai très mal lu la documentation. Désolé de vous avoir sollicité aussi abruptement.

+0 -0

Oh !
Juste une astuce au passage.

Si tu en as la possibilité, sache que tu peux le prétraitement de KaTeX\KaTeX et ensuite tu n’as plus qu’à lier le CSS de KaTeX (et ses polices).

Ce n’est pas tout le temps possible mais parfois, ça t’évide d’avoir à rajouter du JS pour ça.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte