{"id":7915,"date":"2025-07-05T14:40:10","date_gmt":"2025-07-05T12:40:10","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=7915"},"modified":"2025-07-05T16:02:24","modified_gmt":"2025-07-05T14:02:24","slug":"jsxgraph-katex-mathjax","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=7915","title":{"rendered":"JSXGraph Katex-Mathjax"},"content":{"rendered":" <!-- JSXGraph -->\r\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsxgraph@1.6.1\/distrib\/jsxgraphcore.js\"><\/script>\r\n  <!-- KaTeX -->\r\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/katex@0.16.9\/dist\/katex.min.js\"><\/script>\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/katex@0.16.9\/dist\/katex.min.css\">\r\n  <!-- MathJax -->\r\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/mathjax@3\/es5\/tex-mml-chtml.js\"><\/script>\r\n\r\n  <style>\r\n    .blog-post-title {\r\n      font-family: Arial;\r\n      padding: 1em;\r\n      background-color: #f2fbf5;\r\n    }\r\n    #board {\r\n      width: 300px;\r\n      height: 200px;\r\n      border: 1px solid #448844;\r\n      margin-top: 1em;\r\n    }\r\n\t  p {\r\n\t\t  color:black;\r\n\t  }\r\n    label {\r\n      font-weight: bold;\r\n    }\r\n    .explication {\r\n\t margin-left:2em;\r\n      background-color: #e7f7ec;\r\n      border-left: 4px solid #88cc88;\r\n      padding: 1em;\r\n      margin-top: 2em;\r\n      max-width: 800px;\r\n   \t  border-radius: 6px;\r\n    }\r\n\t  \r\n    .explication h2 {\r\n      color: #336633;\r\n    }\r\n    .explication p {\r\n      color: black;\r\n    }\r\n\r\n\r\n<\/style>\r\n\r\n<!-- <pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"><script  src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsxgraph@1.6.1\/distrib\/jsxgraphcore.js\"><\/script>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/jsxgraph@1.6.1\/distrib\/jsxgraph.css\" ><\/pre>-->\r\n\t<h1 style=\"text-align:center;\" ><span style=\"color: #c80815;\">Choix entre KaTeX et MathJax<\/span><\/h1>\r\n\r\n  \t<span style=\"color: #c80815;margin-left:2em;font-weight: bold;\">Choisir le moteur de rendu :<\/span><\/label>\r\n  \t<select id=\"engine\">\r\n    \t<option value=\"katex\">KaTeX<\/option>\r\n    \t<option value=\"mathjax\">MathJax<\/option>\r\n  \t<\/select>\r\n\t<div style=\"align-text:center;width:800px;\">\r\n  \t\t<div  id=\"board\" style=\"margin-left:2em;\" class=\"jxgbox\"><\/div>\r\n\t<div>\r\n  \t<div class=\"explication\">\r\n    \t<h4>Comment fonctionne le rendu des formules LaTeX\u202f?<\/h4>\r\n    \t<p><strong>JSXGraph<\/strong> peut utiliser deux moteurs pour afficher des formules math\u00e9matiques :<\/p>\r\n    \t<ul>\r\n      \t\t<li><strong>KaTeX<\/strong> : tr\u00e8s rapide, l\u00e9ger et bien typographi\u00e9.<\/li>\r\n      \t\t<li><strong>MathJax<\/strong> : plus puissant, mais plus lent, id\u00e9al pour les expressions complexes.<\/li>\r\n    \t<\/ul>\r\n\t\t\r\n\t\t<p>De mani\u00e8re g\u00e9n\u00e9rale ins\u00e9rer avant les \u00e9l\u00e9ments CSS juste apr\u00e8s &LT;head&GT;  et avant &LT;style&GT; les liens et scripts suivants :<\/p>\r\n\r\n\t<pre><code style=\"font-size:10px;color:black;margin:2px;\">\r\n&LT;script  src=\"https:\/\/cdn.jsdelivr.net\/npm\/jsxgraph@1.6.1\/distrib\/jsxgraphcore.js\"&GT;&LT;\/script&GT;\r\n&LT;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/jsxgraph@1.6.1\/distrib\/jsxgraph.css\" \/&GT;\r\n&LT;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.65.12\/codemirror.min.css\"&GT;\r\n&LT;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/katex@0.16.9\/dist\/katex.min.css\"&GT;\r\n&LT;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/katex@0.16.9\/dist\/katex.min.js\"&GT;&LT;\/script&GT;\r\n&LT;script src=\"https:\/\/polyfill.io\/v3\/polyfill.min.js?features=es6\"&GT;&LT;\/script&GT;\r\n&LT;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/mathjax@3\/es5\/tex-mml-chtml.js\"&GT;&LT;\/script&GT;\r\n\t<\/code><\/pre>\r\n  <p>Par d\u00e9faut, JSXGraph affiche les textes en SVG. Pour utiliser KaTeX ou MathJax, on doit activer l\u2019affichage HTML avec :<\/p>\r\n  \r\n  <pre><code style=\"font-size:10px;color:black;\">JXG.Options.text.display = 'html';<\/code><\/pre>\r\n  <p><strong>Configuration globale<\/strong> (appliqu\u00e9e \u00e0 tous les textes) :<\/p>\r\n\r\n Avant la fermeture de la balise &LT;head&GT; par  &LT;\/head&GT;, ins\u00e9rer un script\r\n&LT;script&GT; ici  &LT;\/script&GT;\r\ncontenant :\r\n<pre><code style=\"font-size:10px;color:black;\">\r\nPour KaTeX :\r\n  JXG.Options.text.useKatex = true;\r\n  JXG.Options.text.useMathJax = false;\r\n\r\nPour MathJax :\r\n  JXG.Options.text.useKatex = false;\r\n  JXG.Options.text.useMathJax = true;\r\n<\/code><\/pre>\r\n\r\n    <p><strong>Configuration locale<\/strong> (sur un seul objet <code>text<\/code>) :<\/p>\r\n    <ul>\r\n      <li><strong>KaTeX<\/strong> : <code>useKatex: true<\/code><\/li>\r\n      <li><strong>MathJax<\/strong> : utiliser une fonction <code>render<\/code> comme ci-dessous :<\/li>\r\n    <\/ul>\r\n    <pre><code style=\"font-size:10px;color:black;\">render: function(el, text) {\r\n  \t\tel.innerHTML = text;\r\n  \t\tMathJax.typesetPromise([el]);\r\n\t}<\/code><\/pre>\r\n\r\n   <p>Les deux moteurs ne peuvent pas \u00eatre actifs en m\u00eame temps sur un m\u00eame objet. Mais,  le moteur  peut \u00eatre chang\u00e9 dynamiquement \u00e0 l\u2019aide du menu de haut de page.<\/p>\r\n  <\/div>\r\n\r\n  <script>\r\n    let board;\r\n\r\n    function createBoard(engine = 'katex') {\r\n      if (board) JXG.JSXGraph.freeBoard(board);\r\n\r\n      \/\/ Configuration globale\r\n      JXG.Options.text.display = 'html';\r\n      JXG.Options.text.useKatex = (engine === 'katex');\r\n      JXG.Options.text.useMathJax = (engine === 'mathjax');\r\n\r\n      board = JXG.JSXGraph.initBoard('board', {\r\n        boundingbox: [-2, 2, 2, -2],\r\n        axis: true\r\n      });\r\n\r\n      const latex = '\\\\int_0^1 x^2 dx = \\\\frac{1}{3}';\r\n  if (engine === 'mathjax') {\r\n        board.create('text', [0, 1, `\\\\(${latex}\\\\)`], {\r\n          fontSize: 18,\r\n          render: function(el, text) {\r\n            el.innerHTML = text;\r\n            MathJax.typesetPromise([el]);\r\n          }\r\n        });\r\n      } else {\r\n        board.create('text', [0, 1, latex], {\r\n          fontSize: 18,\r\n          useKatex: true\r\n        });\r\n      }\r\n    }\r\n    \/\/ Initialisation\r\n    createBoard('katex');\r\n    \/\/ S\u00e9lecteur moteur\r\n    document.getElementById('engine').addEventListener('change', function() {\r\n      createBoard(this.value);\r\n    });\r\n  <\/script>\r\n\r\n\r\n\r\n\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7915","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/7915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7915"}],"version-history":[{"count":10,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/7915\/revisions"}],"predecessor-version":[{"id":7972,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/7915\/revisions\/7972"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}