Rendering TeX expression
(JSitor example).
To make the system more flexible and to make Diagramatics not dependent on any specific TeX rendering library,
Diagramatics provides a way to render TeX expressions using whatever library the user wants.
You just need to provide a function that takes a TeX string and returns the rendered SVG string.
// `svg` is the SVG element where the TeX expressions are to be rendered.
// `texhandler` is a function that takes a TeX string and returns the rendered SVG string.
handle_tex_in_svg (
svg
:
SVGElement , texhandler
:
(texstr : string, config : any) => string )
// `svg` is the SVG element where the TeX expressions are to be rendered.
// `texhandler` is a function that takes a TeX string and returns the rendered SVG string.
One example of texhandler is using MathJax.
You can call the handle_tex_in_svg function separately, or you can call it inside the draw function.
// you can load MathJax from CDN
// If you don't want to load the whole MathJax, you can load only the tex-svg.js module
// <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
let handletex = (str, conf) => {
return MathJax.tex2svg(str, conf).innerHTML;
};
let draw_tex = (...diagrams) => {
draw_to_svg_element(diagram_svg, diagram_combine(...diagrams));
handle_tex_in_svg(diagram_svg, handletex);
};
// you can load MathJax from CDN
// If you don't want to load the whole MathJax, you can load only the tex-svg.js module
// <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
let handletex = (str, conf) => {
return MathJax.tex2svg(str, conf).innerHTML;
};
let draw_tex = (...diagrams) => {
draw_to_svg_element(diagram_svg, diagram_combine(...diagrams));
handle_tex_in_svg(diagram_svg, handletex);
};
Diagramatics will recognize any text object in the form "$...$" (or "$$...$$" for display style) as a
TeX object.
let sq = square(20);
let tx = text('$$\\nabla^2\\phi = 0$$').fontsize(24);
draw_tex(sq, tx);
let sq = square(20);
let tx = text('$$\\nabla^2\\phi = 0$$').fontsize(24);
draw_tex(sq, tx);
