What problems do you encounter when using MathJax in Angular?

This article mainly introduces you to some problems encountered when using MathJax in Angular. The article introduces it in great detail through sample code. It has certain reference learning value for everyone's study or work. Friends who need it can come and join us. Study and study.

Preface

I was originally leaning towards KaTeX because I felt it was fast and MathJax seemed difficult to match. However, everyone expressed dissatisfaction with the lack of functions of KaTeX, which provided me with some motivation to delve into MathJax.

Introduction to MathJax

MathJax is an open source mathematical symbol rendering engine that runs in the browser. Using MathJax can be conveniently used in the browser Mathematical formulas are displayed in , without using pictures. Currently, MathJax can parse the markup languages ​​of Latex, MathML, and ASCIIMathML. The MathJax project started in 2009. The initiators include the American Mathematical Society, Design Science, etc., and there are many supporters. I personally feel that MathJax will become the mainstream of mathematical symbol rendering engines in the future, and maybe it is already the case.

Personally, I don’t think I’ve delved into it, because in fact MathJax is very simple, just call MathJax.Hub.Queue(['Typeset', MathJax.Hub, this.element.nativeElement]); You can render an element (this.element.nativeElement is the syntax for calling its DOM from Angular). This .Queue is actually the callback format implemented by MathJax itself. The syntax is very strange, and the number of parameters is variable. Each one is Array, representing a callback, executed sequentially. For example, this ['Typeset', MathJax.Hub, this.element.nativeElement], the first element is the method name, the second element is this, and the subsequent elements are parameters...

We can see Getting to this point is equivalent to executing MathJax.Hub.Typeset(this.element.nativeElement) , so why not execute this? Because this method is synchronous, it will cause the page to be very stuck. So MathJax encapsulates an asynchronous queue (its API may not have changed in hundreds of years)

Let’s go back to Angular. Because I need to use markdown, my idea is to use marked to encapsulate a directive. Then we should use MathJax to typeset the component after marked rendering is completed. But when I actually did this, it produced a wonderful effect - after switching the page, it took nearly a minute to start rendering. I put several logs in its queue and found that each element was queued 4 times, dozens of elements. No wonder it takes a minute to start rendering the content of the next page, even though most markdown has no mathematics at all.

At this time I started to get discouraged. Is there no solution to this problem? When I was desperate, I thought about whether I could typeset document directly. The result was that it was possible and very fast. So rendering is not slow, maybe the initialization process of rendering is slow. Then the solution comes out at this time. We can minimize the number of renderings and only render the document. As long as the rendering is still in progress, no matter how many elements come to the queue, we will only treat them as queues once.

So I wrote this service:

@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();
 }
 }
 }
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement left and right carousel switching in jquery

How to obtain data and assign it to the page in jQuery

How to implement 3D model display in three.js

Angular CLI installation tutorial

In Vuejs Implementing asynchronous update queue through nextTick()

How to implement Toast using ReactNative

How to extract public modules using CommonsChunkPlugin

The above is the detailed content of What problems do you encounter when using MathJax in Angular?. For more information, please follow other related articles on the PHP Chinese website!