Preface
By the way, I was leaning towards KaTeX because I felt he was quick and MathJax seemed hard to match. But everyone said that they didn't have a good impression of KaTeX, which provided me with some motivation to study MathJax.
Introduction to MathJax
MathJax is an open source mathematical symbol rendering engine running in the browser. MathJax can easily display mathematical formulas in the browser without using pictures. Currently, MathJax can parse markup languages for Latex, MathML and ASCIIMathML. The MathJax project started in 2009. The initiators include American Mathematical Society, Design Science, etc., as well as many supporters. I personally feel that MathJax will become the mainstream in mathematical symbol rendering engines in the future, and maybe it is now.
I'm not really studying, because MathJax is actually very simple, call it(['Typeset', , ]); You can render an element (this is the syntax for calling its DOM from Angular). This .Queue is actually a callback format implemented by MathJax itself. The syntax is very clear and the number of parameters is uncertain. Each is an array, representing a callback, and executed sequentially. For example, this ['Typeset', , ] , the first element is the method name, the second element is this, and the subsequent elements are all parameters...
We can see that this is equivalent to execution() , then why not execute this? Because this method is synchronized, it will cause the page to be very stuck. So MathJax encapsulates an asynchronous queue itself (its API may not have been changed for hundreds of years)
Let's talk about Angular. Because I want to use markdown, my idea is to use marked to encapsulate a directive. Then we should use MathJax to use Typeset component after the marked rendering is completed. But doing this has a wonderful effect - after switching the page, it takes nearly a minute to start rendering. I put a few logs in its queue and found that each element was queued 4 times, dozens of elements. No wonder it took a minute to start rendering the content of the next page, even though most markdowns have no math at all.
At this time, I began to feel discouraged. Is there no solution to this problem? In despair, I thought about whether I could directly use the Typeset document, and the result was OK and very fast. Therefore, the rendering is not slow, it may be that the rendering initialization process is relatively slow. Then the solution comes out at this time. We can minimize the number of renderings while only rendering documents. As long as this rendering is still in progress, no matter how many elements the queue comes up, we will only treat it as a queue 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()) {
= window as any;
}
}
finishRunning() {
= false;
if () {
();
}
}
queueChange() {
if () {
= true;
} else {
= false;
= true;
if (isPlatformBrowser()) {
if () {
({
messageStyle: 'none',
tex2jax: {
// preview: 'none',
inlineMath: [['$', '$']],
processEscapes: true
}
});
(['log', console, 'start'], ['Typeset', , document], ['log', console, 'end'], ['finishRunning', this]);
}
} else {
();
}
}
}
}
It turns out that it can complete the task successfully, and it is now runningThis websitecode on.
Summarize
The above is the entire content of this article. I hope that the content of this article has a certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.