HTML 문서에서 수식 사용하기

수식

---

 블로그에 글을 작성하면서 $log$ $n$, $\sum_{1}^n$, $\frac{n(n-1)}{2}$, $n^2$과 같은 수식을 쓸 일이 많았는데 

내가 아무 것도 모를 당시 생각했던 HTML 문서에서 수식을 표현하기 위한 방법은 두 가지가 있었다.

1. 외부에서 이미지로 불러오는 방법 
2. n^2, 1/2, log n과 같이 Text로 표현하는 방법

위 두 방법 외에는 따로 생각나는 해결책이 없어 검색을 통해 HTML 문서에서 수식을 표현할 수 있는 방법을 조사해보았다.

조사한 모든 방법은 TEX 문법을 사용해야한다는 공통점이 있었다.

표현 방법(JavaScript)

---

 ▶ HTML의 <img> 태그를 이용하는 방법

• 사용법: <img src="http://latex.codecogs.com/(file type).latex? \options 수식"/>

 뒤에 붙은  수식  부분에 TEX 문법을 사용해서 표현하고자 하는 수식을 기입하면 그에 해당하는 이미지가 출력된다.

아무래도 원리는 지원하는 홈페이지에 GET방식으로 Parameter 값을 넘겨주면, 값을 받은 사이트에서 처리한 후 이미지 파일을 넘겨주는 방식인 것으로 예상된다.

사용 예시 

<img src="http://latex.codecogs.com/png.latex?\dpi{200}\bg_white x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}"/>

▶JavaScript의 <eq>,<eqq> 문법 활용하기

<eq>,<eqq> 태그들로 수식을 작성하고 아래의 JavaScript를 추가하면 된다.

<script>
(function(){ // 변수충돌 방지용 anonymous function.
    var codecogs="http://latex.codecogs.com/png.latex?\\dpi{200}\\bg_white "; // option들을 적절히 선택.
    function toImg(texEq){
        return '<img class="eq" src="'+codecogs+texEq+'"/>';
    }
    var eqs=window.document.getElementsByTagName("eq");
    var eqqs=window.document.getElementsByTagName("eqq");
    for (var i=0;i<eqs.length;i++){
        eqs[i].innerHTML=toImg("\\inline "+eqs[i].innerHTML.trim());
    }
    for (var i=0;i<eqqs.length;i++){
        eqqs[i].innerHTML=toImg(eqqs[i].innerHTML.trim());
    }
})();
</script>

※ script 뒤에 있는 태그들은 동작하지 않고 TEX 문법이 그대로 노출되기 때문에 script를 가장 나중에 작성해야함.

사용 예시 

<eq>x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}</eq>

x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}

▶MathJax 이용하기

 MathJax는 홈페이지에 수식을 표현할 수 있게 해주는 오픈소스 자바스크립트이다.

플러그인이나 글꼴 설치없이 바로 수식을 나타내주는 편리한 도구로 사용법 또한 간단하다.

이 문서를 작성할 당시에는 문제가 없었으나 현재 크롬 브라우저에서는 안전하지 않은 스크립트 표시를 해야만 보이도록 변경되었다.

아래에 기술할 JavaScript 코드만 추가하면 그 페이지 내에서 무한정 사용할 수 있다.

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
  });
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
 

• 사용법: 두 개의 달러 기호($) 사이에 TEX 문법 입력

 이렇게 간단하게 수식을 표현할 수 있으며, 위의 두 방법과 달리 이미지가 아닌 문자로 처리되어 깔끔하다는 장점이 있다.

또한 달러 기호를 하나가 아닌 두 개($$) 즉 총 4개의 달러 기호 사이에 TEX 문법을 입력하면 중간 정렬할 수도 있고 따로 HTML 태그를 적용시키기도 편리하지만, 방문자가 매번 페이지를 열 때마다 브라우저가 처리해야만 제대로 보여서 느리다.

사용 예시 

$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$

 $x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$

이 글은 제가 공부하면서 이해한 부분을 정리한 것입니다.

 틀린 부분이 있다면 댓글로 피드백 해주시고 도움이 되셨다면 추천과 공감 부탁드리겠습니다.

출처 : Kipid's blog