HTML에 수식넣기

Math. expression E=mc^2 in HTML

HTML코드는 자체적으로 수식을 처리할 수가 없다. 지금은 동영상도 넣을 수 있지만, 아주 초기에는 그림을 넣는 기능이 나왔을 때 만해도 어마어마한 기능이었다(주1).

CSS가 출현하고 발전하며 배치에 관한 문제를 해결해 주었지만, 여전히 HTML만으로 수식을 넣을 수는 없다. HTML문서에 수식을 넣어 브라우저에서 표현하려면 보통 javascript를 이용하는 데, 이것저것 알아보니, MathJax를 주로 사용하고 있었다. 뭐 다른 것들도 있긴 있지만 거의 없었고, 유명한 것들은 그리 많지 않았다.(다행이다.주2)

javascript을 이용하기 때문에 다음의 코드를 삽입 해줘야 한다.

<script
	type="text/javascript"
    async
    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS_HTML"
></script>

async처리가 되어 있으니, cdn이 죽었을 경우 화면이 아예 안뜨는 문제가 없다(확인하지 않음). 물론 이로인해 제대로 처리가 안될 수도 있지만, 큰 문제는 없어 보인다. 위 코드는 https://docs.mathjax.org에서 가져온 것이라 꽤 믿을 만하다.

 

 

수식작성

이제 필요한 곳에 수식을 넣어 주면 되는 데, 사용하는 문법이 LaTex문법이다. 한 25년전에 공부했던거라, 보는 순간 하나도 기억이 안났다. 어쩔 수없이 구글로 뒤져가며 다시 하는 수밖에.( 그 때는 어떻게 공부했는지.. 아~ 도서관에 책이 있었다.)

실제 동작하는 지를 확인하기 위해, 위 코드 삽입 후, 수식을 넣을 위치에 다음의 코드를 넣어 보았다.

\[\sum_{n=1}^{100} {n}\]

\[\sum_{n=1}^{100} {n}\]

아주 깔끔하게 잘 나온다. 그림으로 처리될 줄 알았는 데, 긁어보니 긁힌다. 아름답다라는 생각마저 든다. 필자가 원하는 결과다.

 

 

인라인 처리

문법을 다시 익히기 전에 위에 코드를 넣으니, 수식이 한 블럭을 차지하며 문서의 중앙에 정렬되어 나타난다. 인라인 처리도 필요하기 때문에, 다음의 코드가 인라인으로 처리된다.

수식은 \(\sum_{n=1}^{100} {n}\) 입니다.

결과는 다음과 같다.

수식은 \(\sum_{n=1}^{100} {n}\) 입니다.

 

차이점은 수식표현 맨 앞뒤에 있는 "[" -> "("  ,  "]" -> ")" 로 바꾸면 된다.

 

 

Literal 처리 (수식내의 literal이 아니고 수식 밖의 Literal)

"\$$" 나 "\[" 나  "\("로 시작하면 javascript에 의해 수식으로 변환되기 때문에 이 처리를 못하게 하려면 다음같은 방법을 써서 처리하면 된다.

<span>$</span>$\sum_{n=1}^{100} {n}$<span>$</span>

<span>\</span>[\sum_{n=1}^{100} {n}\<span>]</span>

이런 식으로 시작기호가 동작하지 않게 하는 트릭을 쓴다. 여기서, 주의 점은 수식내에 또다른 \$$나 \[ 가 있으면 안되니 그 부분도 같이 처리 해줘야 한다.

(주3)에 \\$를 쓰는 방법이 있다.

(이거 알아낸다고 고생 좀 했다. 머리가 바보였다.. 결국 문서를 대충 읽다가 놓쳤다는 걸 알았다.)

 

기본적으로 $(한개)는 inline처리를 하지 않는다.

하지만, script를 통해 "\(" 대신 혹은 추가로 사용할 수 있는 데, 이유는 MathJax에 설명이 되어 있다.  간단히 $는 문서에 너무 많이 나오기에(달러화폐 사용하는 나라들) 기본적으로 넣지 않았다는 것이다. 필자는 이와 같은 이유에 따라 쓰는 것을 권장하지 않기에, 이 "$"만 쓰는 코드예제는 넣지 않겠다.(주3)

 

기본 식의 구조를 분석해보자

\sum_{n=1}^{100} {n}

\ : 다음에 오는 것이 의미있는 것이다. 단순한 텍스트가 아니다. 뭔가 기호로 변환될 지시어

sum : 합기호(\(\sum\))

_ : 밑첨자, 기호에 따라 밑에 뭔가 있는 것에 쓴다.

^ : 위첨자, 기호에 따라 위에 뭔가 있는 것에 쓴다.

{ } : 수식을 묶으라는 기호,  "\{"를 쓰면 그냥 텍스트처리

이렇게 해석이 된다.

 

HTML사용에 또다른 충돌 문제

( 이 부분은 필자는 $를 사용하지 않아 정확히 테스트를 하지 못했다. )

이부분은 인라인방식으로 $만 사용할 때 발생 할 수  있는 데

... when $x<y$ we have ...

위와 같이 작성하면  "<y"가 TAG처리되어 we have ... 이 렌더링 안될 수 있다. script보다 DOM파싱이 먼저일어나니 당연한 것이다.

 

다음이 회피하는 방법이다.

... when $x < y$ we have ...     :  이렇게 "<"와 "y" 사이에 빈 칸을 넣어 tag가 안되게 회피하기

... when $x &lt; y$ we have ...   :  또는 "<"를 TAG시작기호가 아닌 것으로 회피하기

... when $x \lt y$ we have ...    :  LateX인지 MathJax인지는 모르겠지만, 매크로로 대체하기

또, 이 충돌의 문제를 해결하기 위해 XML처리하는 방법이 있는 데, 필자는 이 방법을 아주 좋은 방법이라 생각하지만, 수식이 그리 많거나 복잡하지 않는 문서에는 어울리지 않기에 다루지 않겠다.

 

 

 

이제 레퍼런스만 있으면 되는 데, 필자가 찾은 곳 중 약간의 설명과 표로 잘 정리된 곳이 있어 이렇게 링크로 대체한다.

http://asciimath.org/

 

 

 

 

추가적은 사항은 다음의 링크를 참조, 기본 사용법이 있다.

http://docs.mathjax.org/en/latest/tex.html

 

http://www.hostmath.com/ 수식작성기

 

끝~

---

 

 

주1) 물론 너무 오래전일이라, 필자가 html을 처음 알았을 때는 Mosaic이라는 브라우저가 있었는 데,  이미 이 그림넣기 기능은 존재했다.

주2) jQuery가 사실상에 승자가 됐지만, 승자가 되기 이전에는 이런 종류의 것들이 10개정도 되었던 것 같다. 그 때 공부를 하던 친구들은 어떤 것이 좋다는 토론과 설전이 벌어지며, 춘추전국시대였다. 그 때 jQuery이외에 것을 열심히 공부한 친구들은 어렵지 않게 jQuery로 넘어 올 수 있었겠지만, 그냥 jQuery만 한 사람에 비해 시간적 낭비가 있었던 것은 사실이다. 그렇다고 다른 framework들이 나쁘다는 것은 아니다. 다 잘 만들어 졌지만, 실제적 승자가 있다는 것 뿐이다.

주3) 권장하지는 않지만, 필요한 사람이 있기에.. 또한 jQuery와 도 충돌이 날 수 있다.(그럴일 없나?)

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax:
		{
			inlineMath: [['$','$'], ['\\(','\\)']],      // inline : $도 처리
            displayMath: [ ['$$','$$'], ["\\[","\\]"] ], // 이 곳에 아예 다른 것으로 바꿀수 있다.
            processEscapes: true    // 이 것을 이용하면 \$ "$"만 표시 될 수 있게 하는 것 같은데
            // 테스트해보니 되는데, 정확한 사용법은 모르겠다.
		}   
  });
</script>
<script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>