Как интегрировать MathJax с Ionic2

Question

я получаю ошибки шаблона синтаксического анализа при интеграции MathJax в Ionic2, пожалуйста, помогите мне с этим,

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

Вам необходимо установить декларации типов. Попробуйте

npm install @types/mathjax --save 

чек this question

Answer 2

Я прибегая к помощи "Интеграция MathJax в ионном 3 автономном" за последние 2 дня. Все, что я нашел, это то, что я должен использовать директиву для достижения этого. Но такой подход не подходит для такого приложения, которое имеет множество математических уравнений. Так что я придумал другое решение:

1. скачать MathJax автономный файл из here, извлекать и переименовать с MathJax и поместите всю папку в WWW/АКТИВЫ папку вашего ионным приложения.

2. добавить код, указанный ниже в головной части файла 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. теперь для каждой страницы, где вы хотите загрузить математическое уравнение, просто вставьте код, приведенный ниже.

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

Делая эти три шага вы интегрировали MathJax успешно.

Но проблема в размере папки MathJax настолько велика. Вы можете уменьшить размер до 3 мб, просто имея следующие каталоги и файлы:

• MathJax.JS
• расширений

• шрифты

  • HTML-CSS
  • TeX
    • ВФ
    • OTF
    • SVG

• JAX

  • элемент
  • вход
    • ТеХ
  • выход
    • HTML-CSS
    • AutoLoad
    • config.js
    • шрифты
      • TeX
    • imageFonts.js
    • jax.js

Answer 3

В файле index.html, добавить следующий скрипт ... `

<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> 

Затем сделайте директиву MathJax следующим

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]); 
       } 
      } 

Тогда в app.module.ts import {MathJaxDirective} from "... использовать его в вас всем приложении

Для условия, если у вас есть несколько модулей затем составляют общиймодуль примерно

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

и импортировать этот модуль в нужном модуле

Теперь вы хорошо идти

только в вашем .html <div [Mathjax]="sometxt">{{ sometxt }}</div>

и в вашем .ts sometxt: string = "$$someLatex"

Надежда, это будет помогите кому-то