«
in blogging  / #mathjax #troubleshooting  

MathJax가 레이아웃에서 넘칠 때

긴 식을 썼을 때 MathJax가 블로그에서 넘친다. https://codepen.io/mathjax/pen/qEdqPg에 나온 내용을 약간 수정하니 깔끔하게 잘 출력되었다.

MathJax.js를 불러오는 스크립트 상단에 아래 내용을 추가한다. 밑에다 하면 수식이 출력되지 않으니 주의.

html을 사용하는 경우

<script type="text/javascript">
window.MathJax = {
    AuthorInit: function () {
    MathJax.Hub.Register.StartupHook("Begin",function () {
        MathJax.Hub.Queue(function () {
            var math = document.getElementsByClassName("MathJax");
            for(var i=0; i<math.length; i++){
                var w = math[i].offsetWidth, W = math[i].parentNode.offsetWidth-0;
                if (w > W) {
                    math[i].style.fontSize = (100*W/w)+"%";
                }
            }
        });
    });
    }
};
</script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"
type="text/javascript"></script>

CommonHTML을 사용하는 경우

<script type="text/javascript">
window.MathJax = {
    AuthorInit: function () {
    MathJax.Hub.Register.StartupHook("Begin",function () {
        MathJax.Hub.Queue(function () {
            var math = document.getElementsByClassName("mjx-chtml");
            for(var i=0; i<math.length; i++){
                var w = math[i].offsetWidth, W = math[i].parentNode.offsetWidth-0;
                if (w > W) {
                    math[i].style.fontSize = (120*W/w)+"%";
                }
            }
        });
    });
    }
};
</script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML"
type="text/javascript"></script>
 blogging  / #mathjax #troubleshooting