태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
IT 이야기/블로그 & HTML2009/04/24 00:58

블로그에 LaTeX 수식 입력하기

일도 잘 안되고 심심해서 RSS로 블로그들을 살펴보던중, 재미난 글을 하나 찾았습니다. 바로, 블로그에서 LaTeX수식을 사용하는 방법에 관한 글이었습니다. 

LaTeX는 주로 이공계와 같이 수식을 많이 사용하는 분야에서 이용하는 문서형식인데, WYSWYG에디터가 아니라 HTML처럼 명령어를 이용해서 문서를 생성하는데, 소스로 작성된 수식을 변환해주는 해석기를 거쳐서 이미지나 PDF문서가 결과가 됩니다.

블로그에 글을 작성하다보면 가끔 수식을 입력하고 싶을때가 있는데, 보통은 다른 에디터에서 작성한 후에 이미지를 업로드 했었죠. 그런데, 이 방법을 이용하면 아주 간단하게 수식을 입력할 수가 있겠네요. 

여기저기 관련글을 좀 더 찾아본 후에 정리해 봅니다. 


적용하기

위 글에서 소개한 블로그에 올려진 방법을 바탕으로 본 블로그에도 적용을 해 보았습니다.
(참고로 아래 방법의 원문은 http://hshin.info/185 입니다.)

1. 스킨의 </head> 앞에 아래 소스 추가

<script language="javascript" type="text/javascript">
        document.createElement("tex");
        document.createElement("texeq");
        
        var mathtex_server = "http://www.problem-solving.be/cgi-bin/mathtex.cgi";    

        function generateLink(code) {   
                return "<img class=\"equation\" src=\""+ mathtex_server + "?" + code +"\" />";
        }
         
        function generateTeX(tag) {
                var eqn = window.document.getElementsByTagName(tag);
                for (var i=0; i<eqn.length; i++) {
                        if (tag == "tex") { 
                                eqn[i].innerHTML = generateLink("\\small\\textstyle " + eqn[i].innerHTML);
                        } 
                        if (tag == "texeq") { 
                                eqn[i].innerHTML = generateLink(eqn[i].innerHTML);
                        } 
                }
        }
</script>


2. 스킨의 </body> 앞에 아래 소스 추가

<script language="javascript" type="text/javascript">
        generateTeX("tex");
        generateTeX("texeq");
</script>



사용하기 및 결과보기

인라인으로 문장에 포함되는 형태로 사용하려면 <tex> ~ </tex>, 좀더 큰 형태로 사용하려면 <texeq> ~</texeq> 태그를 이용하면 됩니다. 

그 결과 아래와 같이 이쁜 수식을 사용할 수 있게 보여지고 있습니다. 

이차방정식의 근의 공식:

입력: <texeq> ax^2+bx+c=0 ~~~\Leftrightarrow~~~ x=\frac{-b \pm \sqrt{b^2-4ac}}{2a} </texeq>
 결과:  ax^2+bx+c=0 ~~~\Leftrightarrow~~~ x=\frac{-b \pm \sqrt{b^2-4ac}}{2a}



관련사이트

본 글은 아래 사이트들을 참고하여 작성된 것임을 밝혀둡니다.



저작자 표시 비영리 변경 금지

'IT 이야기 > 블로그 & HTML' 카테고리의 다른 글

트위터(Twitter) ==> 미투데이 ==> 블로그  (2) 2009/07/23
블로그용 LaTeX 적용 코드 수정  (2) 2009/04/24
블로그에 LaTeX 수식 입력하기  (6) 2009/04/24
새 파비콘(favicon)과 블로그이미지, 대표이미지  (6) 2009/04/09
max-width 이용하여 크게 올라간 웹 이미지 한방에 조절하기  (17) 2009/04/01
태그 속성값으로 CSS 스타일 적용하기: a[rel=**] { ... }  (2) 2009/03/30
Creative Commons License
Posted by 호아범
TAG , , , , , ,
Trackback 4 Comment 6

TRACKBACK http://www.crazybar.net/trackback/881 관련글 쓰기

  1. Tistory에서 수식 표현하기  삭제

    2009/04/24 04:48TRACKBACK FROM New Start, Ens!

    다음의 소스코드를 skin.html 의 첫 부분인 </head> 바로 앞에 넣으세요. <script language="javascript" type="text/javascript"> document.createElement("tex"); document.createElement("texeq"); </script> before_end_head.js 다음의 소스코드를 skin.html 의 마지막 부분인 </body> 바로 앞에 넣으세요. <script..

  2. 블로그용 LaTeX 적용 코드 수정  삭제

    2009/04/24 14:52TRACKBACK FROM Crazy Life on Net

    먼저 올린 글에서는 일단 적용만 시켰었는데요. JavaScript 코드를 좀 다듬어 봤습니다. 적용하기 1. 스킨의 </head> 앞에 아래 소스 추가 <script type="text/javascript" language="javascript"> <!--         var eqTags = {"tex":"\\small\\textstyle ", "texeq":""};         function createTex() {               ..

  3. [Tip] 블로그에 LaTex 수식 입력하기  삭제

    2009/04/24 15:37TRACKBACK FROM ::날탱의 컴터 이야기::

    요즘 이직때문에 회사에 나와서도 일은 안하고 이리저리 정리하면서 RSS 피드를 읽는 중, 블로그에서 LaTex수식을 사용하는 글을 보고 앞으로 사용할 일이 많아 정리한다. LaTex는 주로 수식을 많이 사용하는 분야에서 이용하는 문서 형식으로, WYSWYG에디터가 아니라 HTML처럼 명령어를 이용해서 문서를 생성하는데, 소스로 작성된 수식을 변환해주는 해석기를 거쳐서 이미지나 PDF와 같은 문서로 결과가 출력됩니다. 지금이야 그렇다처도 앞으로 이직을..

  4. Tistory에서 수식 입력하기  삭제

    2009/05/27 03:46TRACKBACK FROM Adorpyiskn

    Tistory에서 수식을 입력할 수 있는 방법이 있다고 해서 기록해둔다. 이 정보는 이 블로그에서 가져온 것이다. 모든 코드의 삽입은 skin.html 파일에서 이루어진다. 다음 코드를 </head> 앞에 추가해준다. <script type="text/javascript" language="javascript"> <!-- var eqTags = {"tex":"\\small\\textstyle ", "texeq":""}; function createT..

댓글을 달아 주세요

  1. BlogIcon rain2u

    잘 정리된 글 잘 읽었습니다.
    저 역시 공부하는 과목의 특성상 수식을 많이 쓰게 되는데...
    게다가 정리벽(!?)까지 있어서... 블로그에다가 공부한 내용을 정리하여 놓습니다.
    그러다가 보니 자연스럽게 라텍스를 알게 되었고...

    현재에는 구글 가젯으로 제공되는 sitmo 에서 필요한 수식만을 입력하여 그림파일로 다운받은 뒤,
    블로그에 저장하고 있습니다. :)

    2009/04/24 05:53 [ ADDR : EDIT/ DEL : REPLY ]
    • BlogIcon 호아범

      네, 저도 본문에 썼듯이 수식을 꼭 올려야 하는 상황이면 PC에서 작업을 한 후에 올리곤 했었는데, 그게 은근 귀찮아서 아예 수식을 빼버리는 일이 생기더라구요.
      생각보다 간단한 방법이라서, 적용해 두면 써먹을 일이 있을거 같아요.. ^^
      다만 mathTeX 서버를 이용하는 방식이라 경우에 따라선 약간의 delay가 생기지 않을까 하는 생각이 드네요.

      2009/04/24 10:42 [ ADDR : EDIT/ DEL ]
  2. BlogIcon Ens

    제가 제시한 것과 다르게 generateLink, generateTeX 함수 등의 정의가 </head> 위쪽으로 옮긴 이유가 있는지요?
    제가 JavaScript를 발로 짜는 습관이 있어서.. 제 코드에 문제가 있는 거면..
    제 홈피에 있는 내용도 바꾸야 되는 것 같아서 질문드립니다.

    2009/04/24 06:42 [ ADDR : EDIT/ DEL : REPLY ]
    • BlogIcon 호아범

      아니요.. 수행상에 문제가 있어서 바꾼건 아닙니다. ^^
      다만 본문에 함수 정의가 나오면 정리가 되질 않아서, 유지보수 차원에서 옮겼다는 설명이 가장 적합할 것 같네요.
      또, 이렇게 해두면 별도 JS 파일로 저장한 후에 파일체로 포함시키기에도 용이해서요.
      어쨌든 유용한 정보 공개해 주셔서 넘 감사합니다. ^^

      2009/04/24 10:45 [ ADDR : EDIT/ DEL ]
  3. BlogIcon 돌이아빠

    LaTex를 블로그에서도 쓸 수가 있게 되었네요? 오호.이거 재밌어 보입니다.
    심심할때 적용해 봐야겠어요. ㅎㅎㅎ

    2009/04/24 08:01 [ ADDR : EDIT/ DEL : REPLY ]
    • BlogIcon 호아범

      그러게요... 비공개로 사용중인 Wiki에는 관련 기능을 구현해서 사용중이었는데, 블로그에 적용해볼 생각을 못했네요.
      역시 세상에는 발빠른 분들이 참 많은것 같아요. ^^

      2009/04/24 10:46 [ ADDR : EDIT/ DEL ]