Angular で MathJax を使用するときにどのような問題が発生しますか?

この記事では、主に Angular で MathJax を使用する際に発生するいくつかの問題について、サンプル コードを通じて詳しく紹介します。必要な友人が集まって学ぶことができます。

前書き

つまり、私は元々 KaTeX に傾いていたのですが、その理由は、KaTeX は速くて、MathJax はそれに合わせるのが難しいと感じていたからです。しかし、誰もが KaTeX の機能の欠如に不満を表明しており、それが私に MathJax を掘り下げる動機を与えてくれました。

MathJax の紹介

MathJax はブラウザ上で動作するオープンソースの数学記号レンダリング エンジンです。MathJax を使用すると、画像を使用せずにブラウザ上で数式を簡単に表示できます。現在、MathJax は、Latex、MathML、および ASCIIMathML のマークアップ言語を解析できます。 MathJax プロジェクトは 2009 年に開始されました。発起人には米国数学会やデザイン サイエンスなどが含まれ、多くの支援者が参加しています。個人的には、MathJax が将来の数学記号レンダリング エンジンの主流になると感じています。おそらくすでにそうなっているでしょう。ケース。

個人的には、これはそれほど深い研究ではありません。実際、MathJax は非常に単純で、単に MathJax.Hub.Queue(['Typeset', MathJax.Hub, this.element.nativeElement]); を呼び出すだけです。 > 要素をレンダリングします (this.element.nativeElement は Angular からその DOM を呼び出すための構文です)。この .Queue は実際には MathJax 自体によって実装されたコールバック形式です。それぞれの構文は非常に奇妙です。順番に実行されるコールバックを表す配列。たとえば、この ['Typeset', MathJax.Hub, this.element.nativeElement] では、最初の要素がメソッド名、2 番目の要素が this、後続の要素がパラメーターです...<code>MathJax.Hub.Queue(['Typeset', MathJax.Hub, this.element.nativeElement]); 就可以渲染一个元素（这个 this.element.nativeElement 是从 Angular 中调用它 DOM 的语法），这个 .Queue 实际上是 MathJax 自己实现的回调格式，语法非常清奇，参数个数不定，每个都是数组，代表一个回调，顺序执行。比如这个 ['Typeset', MathJax.Hub, this.element.nativeElement] ，第一个元素是方法名，第二个元素是 this ，之后的元素都是参数……

我们可以看到这个就相当于执行 MathJax.Hub.Typeset(this.element.nativeElement)

これがわかると思います。 MathJax.Hub.Typeset(this.element.nativeElement) を実行するには、これを実行してみてはいかがでしょうか?このメソッドは同期的であるため、ページが非常にスタックしてしまいます。したがって、MathJax は非同期キューをカプセル化します (その API は何百年も変わっていない可能性があります)

Angular に戻りましょう。マークダウンを使用する必要があるため、私のアイデアは、ディレクティブをカプセル化するためにマークを使用することです。次に、マークされたレンダリングが完了した後、MathJax を使用してコンポーネントをタイプセットする必要があります。しかし、実際にこれを実行してみると、素晴らしい効果が得られました。ページを切り替えた後、レンダリングが開始されるまでに 1 分近くかかりました。いくつかのログをキューに入れてみたところ、各要素が 4 回、つまり数十の要素がキューに入れられていることがわかりました。ほとんどのマークダウンには数学がまったく含まれていないにもかかわらず、次のページのコンテンツのレンダリングを開始するのに 1 分かかるのも不思議ではありません。

この時点で私は落胆し始めました、この問題に対する解決策はありませんか？絶望的になったとき、文書を直接植字できないか考えた結果、それが可能であり、非常に高速であることがわかりました。したがって、レンダリングが遅いわけではなく、レンダリングの初期化プロセスが遅いのかもしれません。この時点での解決策は、レンダリングの数を最小限に抑え、ドキュメントのみをレンダリングすることです。レンダリングが進行中である限り、どれだけ多くの要素がキューに入っても、それらをキューとして扱うのは 1 回だけです。

そこで私はこのサービスを書きました:

@Injectable()
export class MathjaxService {
 public isQueued = false;
 public isRunning = false;
 window: any;
 constructor(@Inject(PLATFORM_ID) private platformId: Object) {
 if (isPlatformBrowser(this.platformId)) {
 this.window = window as any;
 }
 }
 finishRunning() {
 this.isRunning = false;
 if (this.isQueued) {
 this.queueChange();
 }
 }
 queueChange() {
 if (this.isRunning) {
 this.isQueued = true;
 } else {
 this.isQueued = false;
 this.isRunning = true;
 if (isPlatformBrowser(this.platformId)) {
 if (this.window.MathJax) {
  this.window.MathJax.Hub.Config({
  messageStyle: 'none',
  tex2jax: {
  // preview: 'none',
  inlineMath: [['$', '$']],
  processEscapes: true
  }
  });
  this.window.MathJax.Hub.Queue(['log', console, 'start'], ['Typeset', this.window.MathJax.Hub, document], ['log', console, 'end'], ['finishRunning', this]);
 }
 } else {
 this.finishRunning();
 }
 }
 }
}

上記は私が皆さんのためにまとめたものです。将来的に皆さんに役立つことを願っています。

関連記事:

jQueryでカルーセルの左右切り替えを実装する方法

jQueryでデータを取得してページに割り当てる方法

three.jsで3Dモデル表示を実装する方法

Angular CLI インストールチュートリアル

Vuejs の nextTick() による非同期更新キューの実装

ReactNative を使用して Toast を実装する方法

CommonsChunkPlugin を使用してパブリック モジュールを抽出する方法

🎜

以上がAngular で MathJax を使用するときにどのような問題が発生しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。