-
Notifications
You must be signed in to change notification settings - Fork 0
/
Tex2SVG.ts
72 lines (58 loc) · 2.11 KB
/
Tex2SVG.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import { mathjax } from "mathjax-full/js/mathjax";
import { TeX } from "mathjax-full/js/input/tex";
import { SVG } from "mathjax-full/js/output/svg";
import { browserAdaptor } from "mathjax-full/js/adaptors/browserAdaptor";
import { HTMLHandler } from "mathjax-full/js/handlers/html/HTMLHandler";
import { SafeHandler } from "mathjax-full/js/ui/safe/SafeHandler";
import { AllPackages } from "../common/AllPackages";
import { GenerateErrorMessage, GetErrorMessage } from "../common/utils";
mathjax.handlers.register(SafeHandler(new HTMLHandler(browserAdaptor())));
const mathDocument = mathjax.document(document, {
InputJax: new TeX({
packages: AllPackages,
}),
OutputJax: new SVG(),
});
// Add CSS styles
mathDocument.updateDocument();
export interface Options {
nodeClassNameList?: string[];
errorMessageClassNameList?: string[];
}
export function Tex2SVG(math: string, display: boolean, options?: Options) {
try {
const wrapper = mathDocument.convert(math, {
display,
});
if (options?.nodeClassNameList) {
wrapper.classList.add(...options.nodeClassNameList);
}
const title = document.createElement("title");
title.innerText = math;
const defsElement = wrapper.getElementsByTagName("defs")[0];
defsElement.parentNode.insertBefore(title, defsElement);
return wrapper;
} catch (e: unknown) {
console.log(e);
const wrapper = document.createElement("mjx-container");
wrapper.className = "MathJax";
wrapper.setAttribute("jax", "SVG");
if (display) {
wrapper.setAttribute("display", "true");
}
const message = document.createElement("span");
message.innerText = GenerateErrorMessage(math, display, GetErrorMessage(e));
if (options?.errorMessageClassNameList) {
message.classList.add(...options.errorMessageClassNameList);
} else {
// default style
message.style.fontWeight = "bold";
message.style.display = "inline-block";
message.style.border = "2px solid #000";
message.style.padding = "0 4px";
message.style.textAlign = "left";
}
wrapper.appendChild(message);
return wrapper;
}
}