#34 utilisation de MathJax pour afficher des formules mathématiques dans l'aide

4bb44a68 · francois.grand · cdb23192 · 4bb44a68 · 4bb44a68 · 4bb44a68
Commit 4bb44a68 authored 6 years ago by francois.grand
--- a/src/app/calculators/cond_distri/cond_distri.fr.md
+++ b/src/app/calculators/cond_distri/cond_distri.fr.md
@@ -6,3 +6,18 @@ Conduite distributrice
 "_Il vaut mieux pomper même s'il ne se passe rien que risquer qu'il se passe quelque chose de pire en ne pompant pas._"

 Devise Shadok
+
+tests MathJax :
+---
+
+inline `$`a \ne 0`$` : $a \ne 0$
+
+display `$$`a \ne 0`$$` : $$a \ne 0$$
+
+inline `$`ax^2 + bx + c = 0`$` : $ax^2 + bx + c = 0$
+
+display `$$`ax^2 + bx + c = 0`$$` : $$ax^2 + bx + c = 0$$
+
+inline `$`x = {-b \pm \sqrt{b^2-4ac} \over 2a}`$` : $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
+
+display `$$`x = {-b \pm \sqrt{b^2-4ac} \over 2a}`$$` : $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
\ No newline at end of file
--- a/src/app/components/help/help.component.html
+++ b/src/app/components/help/help.component.html
 <div class="container-fluid">
    <div class="row">
        <div class="col">
-            <markdown [data]="textData">
-            </markdown>
+            <markdown> {{textData}} </markdown>
        </div>
    </div>
 </div>
\ No newline at end of file
--- a/src/app/components/help/help.component.ts
+++ b/src/app/components/help/help.component.ts
-import { Component } from "@angular/core";
+import { Component, AfterViewInit } from "@angular/core";
+
+/*
+  tient lieu d'import quand on n'installe pas de paquet npm pour MathJax et qu'on le récupère
+  par l'index.html :
+   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML"></script>
+*/
+declare var MathJax: any;

 import { FormulaireDefinition } from "../../formulaire/definition/form-definition";

@@ -6,7 +13,7 @@ import { FormulaireDefinition } from "../../formulaire/definition/form-definitio
    selector: 'help',
    templateUrl: "./help.component.html",
 })
-export class HelpComponent {
+export class HelpComponent implements AfterViewInit {
    /**
     * texte de l'aide
     */
@@ -18,4 +25,16 @@ export class HelpComponent {
    public set formHelp(f: FormulaireDefinition) {
        this.textData = f.helpText;
    }
+
+    /**
+     * MAJ des expressions LateX présentes dans le composant par MathJax
+     */
+    private updateMathjax() {
+        //     MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
+        MathJax.Hub.Typeset();
+    }
+
+    public ngAfterViewInit() {
+        this.updateMathjax();
+    }
 }
--- a/src/index.html
+++ b/src/index.html
@@ -34,6 +34,21 @@
    }
  </style>
 -->
+
+  <!-- MathJax-->
+  <!-- config locale qui s'ajoute à la config par défaut (ajoute les expressions LateX inline avec $....$) -->
+  <script type="text/x-mathjax-config">
+  MathJax.Hub.Config({
+    tex2jax: {
+      inlineMath: [['$','$'], ['\\(','\\)']],
+      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre']
+    }
+  });
+  </script>
+
+  <!-- récupération du code + configuration par défaut -->
+  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_CHTML"></script>
+  <!-- /MathJax-->
 </head>

 <body>