MathJax js 라이브러리 bbox 출력 오류 해결 방법

MathJax는 웹 브라우저에 수학 표기법을 표기하는 Javascript 라이브러리입니다.

---

mathjax bbox 오류 해결

네모 박스가 \bbox[5px, border:1pxsolidblack]이라는 텍스트로 출력되는 문제가 있었습니다.

에러 코드

Promise.allSettled([MathJax.typeset()]).then(function () {

이 부분에서 아래의 에러가 발생하였습니다.

에러 메세지

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'replaceChild')
    at e.replace (tex-mml-chtml.js:1:10078)
    at e.updateDocument (tex-mml-chtml.js:1:198719)
    at t.updateDocument (tex-mml-chtml.js:1:45671)
    at e.updateDocument (tex-mml-chtml.js:1:191730)
    at e.updateDocument (tex-mml-chtml.js:1:725196)
    at Object.renderDoc (tex-mml-chtml.js:1:39265)
    at e.renderDoc (tex-mml-chtml.js:1:39488)
    at t.render (tex-mml-chtml.js:1:42447)
    at tex-mml-chtml.js:1:26311
    at e (tex-mml-chtml.js:1:754476)

기존 스크립트 코드

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

변경 스크립트 코드

<script id="MathJax-script" defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
  
<!-- mathjax -->
<script>
    MathJax = {
        tex: {packages: {'[+]': ['bbox']}},
        startup: {
            ready() {
                const Configuration = MathJax._.input.tex.Configuration.Configuration;
                const CommandMap = MathJax._.input.tex.SymbolMap.CommandMap;
                const TEXCLASS = MathJax._.core.MmlTree.MmlNode.TEXCLASS;

                const styles = MathJax._.output.chtml.Wrappers.math.CHTMLmath.styles;
                styles["mjx-math"]["font-size"] = "14px";
                styles["mjx-charbox"] = {
                    "font-family": "Noto Sans Korean, sans-serif !important;",
                    "font-size": "10px !important"
                };
                styles["mjx-utext"] = {
                    "font-family": "Noto Sans Korean, sans-serif !important;",
                    "font-size": "10px !important",
                    "font-style": "normal ! important",
                };
                styles["mjx-mstyle"] ={
                    "margin-top": "10px",
                    "margin-bottom": "3px",
                }
                styles["mjx-mfrac"] = {
                    "font-size": "min(max(0.9*16px, 14px),14px) !important;",

                };
                styles["mjx-texatom"] = {
                    "white-space": "break-space"
                };

                styles["mjx-line"]={
                    "margin-bottom": "3px !important;",
                }
                styles["mjx-root"]={
                    "width": "auto !important;",
                }
                styles["mjx-box mjx-mstyle"]={
                    "margin-top": "0px",
                    "margin-bottom": "0px",
                }

                new CommandMap('bbox', {bbox: 'Bbox'}, {
                    Bbox(parser, name) {
                        const xml = parser.create('node', 'XML');
                        const id = parser.GetBrackets(name, '');
                        const value = parser.GetArgument(name,'');
                        let widthCount = 0;
                        widthCount += (value.split('\\quad').length - 1) * 20;
                        widthCount += (value.split('\\;').length -1) * 10;
                        widthCount += (value.split('\\,').length -1);
                        const w = parser.GetBrackets(name, (widthCount) + "px");
                        const style = document.createElement('style');
                        style.innerHTML = `.input-text-box.input-equation {text-align: center; }`;
                        document.head.appendChild(style);

                        xml.setXML(MathJax.startup.adaptor.node('input', {
                            class: "input-text-box input-equation", style: {width: w}, xmlns: 'http://www.w3.org/1999/xhtml'
                        }), MathJax.startup.adaptor);
                        xml.getSerializedXML = function () {
                            return this.adaptor.outerHTML(this.xml) + '</input>';
                        }
                        parser.Push(
                            parser.create('node', 'TeXAtom', [
                                parser.create('node', 'semantics', [
                                    parser.create('node', 'annotation-xml', [
                                        xml
                                    ], {encoding: 'application/xhtml+xml'})
                                ])
                            ], {texClass: TEXCLASS.ORD})
                        );
                    }
                });
                Configuration.create('bbox', {handler: {macro: ['bbox']}});

                MathJax.startup.defaultReady();
            }
        },
    };
</script>

위와 같이, 다른 MathJax 스크립트로 교체 후 bbox 관련 스크립트를 추가해 주었더니 화면에 박스가 정상적으로 출력되었습니다.