일반 HTML 문서로도 작성할 수 있지만, 모바일용 웹 페이지를 만들었습니다.

Posted by Scripter
TAG jQuery, latex

댓글을 달아 주세요

(1) MathJax의 사용 예:
\ (a \ne 0\ ) 이면, 2차방정식 \ (ax^2 + bx + c = 0\ ) 의 두 근은 $ $x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $ $
라고 입력하면,
\(a \ne 0\) 이면, 2차방정식 \(ax^2 + bx + c = 0\) 의 두 근은 $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ 로 표시되고,


(2) MathTeX 의 사용 예:
<tex style="border:blue 2px dotted; padding: 3px; background: #ff8;"> \int \ln x \, {\rm d}x = x \ln \ x - x + C </tex>
라고 입력하면,

\int \ln x \, {\rm d}x = x \ln \ x - x + C

로 표시됩니다.


위와 같이 MathJax 와 MathTeX 을 한 페이지 내에서 동시에 사용할 수 있습니다. 그렇게 하기 위해서는 티스토리 블로그 주인장은 관리 모드의 skin.html 의 편집에서 <head> 태그와 </head> 태그 사이에 딱 두 줄

<script type="text/javascript" src="http://www.ezsolver.co.kr/mathjax/v1.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> 



<script type="text/javascript" src="href="http://www.ezsolver.co.kr/mathtex_tag.js"></script>

만 써넣어 주면 됩니다.

※ 인터넷 익스플로러 사용자는 MathJax 를 적용하여 작성된 문서를 볼 때는 디자인 사이언스(Design Science)에서 무료로 배포하는 MathPlayer 플러그인이 설치되어 있어야 볼 수 있습니다.

※ MathJax 는 서버측 CGI 는 전혀 쓰지 않고 오직 Javascript 와 서버에 올려 놓은 폰트 파일들 만으로 동작합니다. MathML 양식의 수식과 LaTeX 양식의 수식을 모두 지원하며 상호 변환도 가능합니다.

※ MathJax 로 작성된 수식은 줌(확대)도 계단 현상이 나타나지 않고 매끄럽게 보이지만, 루트 기호는 좌측 위가 좀 끊어져 보이는 곳이 있습니다. 반면에 MathTeX 으로 작성된 수식은 줌인(확대)하면 계단현상이 나타나 보기게 약간 흉하지만 보통 크기로는 뚜렷하고 예쁩니다. 루트기로 같은 것은 줌인(확대)하더라도 끊어져 보이는 곳이 없습니다.

※ MathJax 양식으로 작성하든 MathTeX 양식으로 작성하든 모바일 기기(아이폰, 갤럭시탭, 아이패드, 갤럭시 패드 등)에서도 수식이 잘 보입니다.

※ MathTeX 은 MimeTeX을 만들었던 가 그 후속 버전으로 만든 순수 C 언어로 작성된 CGI 입니다.  MathTeX 이 하는 일은 서버에 설치된 TeX 시스템을 자동으로 가동시켜 입력된데이터 (URL 파라미터로 서버에 넘어간 문자열)을 이미지(그림) 데이터로 변환한 다음 클라이언트(웹 브라우저)에게 그 이미지의 ContentType 과 함께 보내 주는 역할입니다
.

        [참조]
            ☞ 위의 구조로 작성된 별도의 간단한 문서 보 러 가기
            ☞ MathJax 홈페이지
            ☞ MathPlayer 다운로드와 설치


Posted by Scripter

댓글을 달아 주세요

티스토리 편집기의 우측 상단에 있는 HTML 체크박스를 체크하고,

<tex>\frac{\mathrm{d} }{\mathrm{d} } e^x = e^x</tex>

를 입력하면 티스토리 블로그에는 도함수 공식
\frac{\mathrm{d} }{\mathrm{d} x} e^x = e^x
이 표시됩니다.




<tex>\int e^x \, dx = e^x + C</tex>

를 입력하면 티스토리 블로그에는 적분 공식
\int e^x \, dx = e^x + C
가 표시됩니다.


단, 주의 할 것은 수식 부분의 입력과 수정은 반드시 티스토리 편집기의 우측 상단에 있는 HTML 체크박스를 체크하여 HTML 보면서 작업해여 합니다. (편집기에서는 수식을 볼 수 없고 블로그로 가야 수식이 제대로 보입니다.)
왜 그러는지 모르겠지만, 티스토리의 편집기가 소문자 태그 <tex> 와 </tex> 를 대문자 태그 <TEX> 와 </TEX> 로 바꾸어 버리네요. 이것이 조금 불편합니다. (웹 표준에 어긋나는데....)

문장 중에 수식을 포함하기 위해 수식의 크기를 작게 하려면 tex 태그 대신에 stex 태그를 사용하여

<stex>\frac{\mathrm{d} }{\mathrm{d} } e^x = e^x</stex> 와 <stex>\int e^x \, dx = e^x + C</stex>

를 입력하면, 티스토리 블로그에는
\frac{\mathrm{d} }{\mathrm{d} x} e^x = e^x\int e^x \, dx = e^x + C
로 표시됩니다.


※ 위와 같이 티스토리 블로그에 수식이 표현되게 할려면 티스토리 블로그 주인장은 무엇을 해야 할까요? 답은 아주 간단합니다. 스킨 편집에서 HTML/CSS 편집에 가서 <head> 태그와 </head> 태그 사이에 딱 한 줄

<script type="text/javascript" src="http://www.ezsolver.co.kr/mathtex_tag.js"></script>

만 넣어 주면 됩니다.

일반 html 문서에도 (웹서버에 올려진 html 문서이든 로컬에서 작업중인 html 문서이든 상관없이) 저 딱 한 줄만 head 태그 영역 안에 넣어 주면 tex 태그와 stex 태그를 사용할 수 있습니다. 일반 태그처럼 tex 태그와 stex 태그에도 id 명이나 class 명을 옵션으로 줄 수도 있고, 스타일을 적용할 수 있습니다. 또한 tex 태그와 stex 태그는 jQuery 와도 잘 동작합니다. IE6 이상, Safari, FireFox, Chrome 에서도 tex 태그와 stex 태그가 잘 동작함을 확인하였습니다. 모바일 웹에서도 물론 잘 동작합니다.



Posted by Scripter

댓글을 달아 주세요

  1. 궁상 2012.07.05 22:33  댓글주소  수정/삭제  댓글쓰기

    큰 도움이 되었습니다. 블로그를 시작해보려고 알아보는 중인데, 워드프레스와 티스토리가 괜찮은 것 같더라고요. 라텍스가 입력된다면 티스토리도 제게 좋은 장소일것 같습니다!

  2. Seldon 2012.08.21 16:36 신고  댓글주소  수정/삭제  댓글쓰기

    도움이 되었습니다. 좋은 정보 고맙습니다.