Comment intégrer MathJax avec Ionic2

Question

Je reçois des erreurs d'analyse syntaxique du modèle tout en intégrant dans MathJax Ionic2 s'il vous plaît me aider,

package.json

"dependencies": { 
    ..... 
    "mathjax": "^2.7.0" 
    }, 

home.ts

import mj from "mathjax"; 

home.html

<ion-card-title> Name </ion-card-title> 
     <span> When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are 
$$x = {-b \pm \sqrtb^2-4ac \over 2a.}$$</span> 
     <button (click)= render()> Render Katex</button> 
     <script type="text/x-mathjax-config"> 
     MathJax.Hub.Config({ 
      tex2jax: 'inlineMath: [['$','$'], ['\\(','\\)']]} 
     }); 
     </script> 
     <script type="text/javascript" async src="../../../node_modules/mathjax/MathJax.js?config=TeX-MML-AM_CHTML"></script> 

Answer 1

https://www.npmjs.com/package/@types/mathjax

Vous devez installer des déclarations de type. Essayez

npm install @types/mathjax --save 

départ this question

Answer 2

Je suis googler "L'intégration MathJax dans ionique 3 offline" pendant 2 jours. Tout ce que j'ai trouvé c'est que je dois utiliser une directive pour y parvenir. Mais cette approche n'est pas rapide pour une telle application qui a beaucoup d'équation mathématique. Alors je suis venu avec une autre solution:

1. télécharger MathJax fichier hors ligne à partir here, extrait et renomme qu'avec MathJax et placer le dossier dans son ensemble www/actifs dossier de votre application ionique.

2. ajoutez le code ci-dessous dans la section de tête du fichier index.html

   <script type="text/x-mathjax-config"> MathJax.Hub.Config({ imageFont: null, extensions: ["tex2jax.js"], jax: ["input/TeX","output/HTML-CSS"], tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]} }); </script> <script type="text/javascript" async src="assets/MathJax/MathJax.js"> </script>

3. maintenant pour chaque page où vous voulez charger l'équation mathématique, il suffit de coller le code ci-dessous.

   ionViewDidEnter() { eval('MathJax.Hub.Queue(["Typeset", MathJax.Hub])'); }

En faisant ces trois étapes que vous avez MathJax intégré avec succès.

Mais le problème est que la taille du dossier MathJax est si grande. Vous pouvez réduire la taille jusqu'à 3 Mo en ayant simplement les répertoires et fichiers suivants

• MathJax.js
• extensions

• polices

  • HTML-CSS
  • TeX
    • eof
    • FTO
    • svg

• jax

  • élément
  • entrée
    • TeX
  • sortie
    • HTML-CSS
    • autochargement
    • config.js
    • polices
      • TeX
    • imageFonts.js
    • jax.js

Answer 3

Dans votre fichier index.html, ajouter le script suivant ... `

<script type="text/x-mathjax-config"> 
    MathJax.Hub.Config({ 
    showProcessingMessages: false, 
    tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] } 
    }); 
</script> 

<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_HTMLorMML"> 
</script> 

Ensuite, faire une directive pour MathJax comme suit

import {Directive, ElementRef, Input} from '@angular/core'; 
declare var MathJax: { 
    Hub: { 
    Queue: (param: Object[]) => void 
    }} 
      @Directive({selector: '[MathJax]'}) 
      export class MathJaxDirective { 
       @Input('MathJax') MathJaxInput: string = ""; 
       constructor(private el: ElementRef) { 
       } 
       ngOnChanges() { 
        this.el.nativeElement.innerHTML = this.MathJaxInput; 
        MathJax.Hub.Queue(["Typeset", MathJax.Hub, this.el.nativeElement]); 
       } 
      } 

Puis, en app.module.ts import {MathJaxDirective} from "... pour l'utiliser dans l'application que vous ensemble

Pour une condition si vous avez plusieurs modules puis faire un commonModule quelque chose comme

import { NgModule } from "@angular/core"; 
import { MathJaxDirective } from "./directives/MathJax.directive";  
@NgModule({ 
     declarations: [MathJaxDirective], 
     exports: [MathJaxDirective] 
    }) 
    export class CommonModule { } 

et importer ce module dans le module requis

Maintenant, vous êtes bon pour aller

juste dans votre .html <div [Mathjax]="sometxt">{{ sometxt }}</div>

et dans vos .ts sometxt: string = "$$someLatex"

Hope, cette volonté aider quelqu'un