index.html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Éditeur LaTeX avec MathJax</title>
    <!-- Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
</head>
<body>
    <div class="container mt-4">
        <h2 class="mb-3">Entrez votre LaTeX ci-dessous</h2>
        <textarea id="latex-input" class="form-control" placeholder="Entrez votre LaTeX ici" rows="4"></textarea>
        <button onclick="renderLatex()" class="btn btn-primary mt-2">Afficher</button>
        <div id="output" class="mt-4 p-3 border rounded"></div>
    </div>

    <script>
    function renderLatex() {
        var input = document.getElementById('latex-input').value;
        var output = document.getElementById('output');
        output.textContent = ''; // Nettoyer le contenu précédent
        var textNode = document.createTextNode(input.replace(/\\\\/g, '\\')); // Remplacer les doubles backslashes par des simples
        output.appendChild(textNode); // Ajouter le nœud de texte à l'élément de sortie
        MathJax.typesetPromise([output]); // Demande à MathJax de rafraîchir le rendu pour cet élément spécifique
    }
    </script>
</body>
</html>