본문 바로가기

블로그/꾸미기

블로그(티스토리 및 다른 블로그)에서 LaTeX 수식 입력하기

블로그에서 LaTeX 수식을 입력하는 방법입니다.

LaTeX 문법은 여기를 참조하세요.
위키피디아 수식 입력(http://en.wikipedia.org/wiki/Help:Formula)
http://faq.ktug.or.kr/wiki/uploads/essential-kr.pdf의 '수식의 조판', '수학 기호', '학습을 위한 엄청난 수학 예제' 부분
http://www.ktug.or.kr/doc/lshort-kr/lshort-kr.pdf의 '수식 조판하기' 부분



방법 1. 자바스크립트와 태그를 이용한 수식 입력(티스토리)

http://hshin.info/185의 내용을 약간 수정했습니다.

다음의 소스 코드를 skin.html 의 앞부분에 있는 </head> 바로 앞에 넣어 주세요.

<script type="text/javascript">
// Last Modified by Serna(http://serna.tistory.com)

document.createElement("tex");
document.createElement("texeq");

var mathtex_server = "http://latex.codecogs.com/gif.latex";

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("\\inline " + eqn[i].innerHTML);
                else if (tag == "texeq")
                        eqn[i].innerHTML = generateLink(eqn[i].innerHTML);
        }
}
</script>

다음의 소스 코드를 skin.html의 뒷부분에 있는 </body> 바로 앞에 넣어 주세요.

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

수식은 HTML 모드에서 입력해야 합니다.
문단 중간에 인라인 형식으로 수식을 입력하고자 할 때에는
<tex>작은 수식</tex>
을 입력하고, 수식 하나가 여러 줄을 차지하도록 크게 입력하고 싶을 때는
<texeq>큰 수식</texeq>
를 입력하면 됩니다.

다음은 이를 사용한 예입니다.
- 입력 -
<tex>\sum_{k=1}^{n}k=\frac{n(n+1)}{2}</tex><br />
<texeq>\sum_{k=1}^{n}k=\frac{n(n+1)}{2}</texeq><br />

- 결과 -


(이 방법은 페이지가 열린 뒤, 자바 스크립트로 코드를 수식 이미지로 변환하기 때문에 수식 표시가 조금 느릴 수 있습니다.)

수정된 내용 : mathTeX 서버 주소를 바꿨습니다. 흰색 배경에서는 이 서버의 수식이 보기 더 좋을 것입니다.



방법 2. 편집기를 이용한 수식 입력(모든 블로그)

제가 가장 많이 쓰는 방법입니다.

새 창에 다음 웹 페이지를 열어 주세요.(새 탭이 아니라 새 창에 하는 것이 편합니다.)
온라인 수식 편집기(http://www.codecogs.com/components/equationeditor/equationeditor.php)

여기서 수식을 입력합니다.
수식을 입력하면 가운데에 그 수식에 해당하는 그림이 보입니다.
수식을 다 입력하셨으면 가운데에 있는 그림을 끌어서 티스토리 편집기에 드래그 앤 드롭하세요.(그래서 새 창을 여는 게 편하다는 겁니다.)
그러면 편집기에 수식이 들어갈 겁니다.(이렇게 그림을 끌어서 넣는 경우, 편집기가 WYSIWYG 모드이어야 합니다.)
드래그 앤 드롭으로 수식을 넣기가 어려울 경우, 편집기에서 그림 밑에 있는 HTML 코드를 복사해서 티스토리 편집기에 붙여넣으세요. 단, 이때는 HTML 모드에서 삽입하여야 합니다.

(수식 그림이 잘려서 안 보이면 창의 크기를 크게 하거나, 웹 브라우저의 전체 화면 모드에서 편집하면 됩니다.)




방법 3. img 태그로 간단하게 수식 입력하기(모든 블로그)

<img src="http://latex.codecogs.com/gif.latex?수식" />
위의 태그를 복사해서 빨간 색으로 수식이라고 되어 있는 부분에 LaTeX 수식을 입력하면 됩니다.



방법 4. 스프링노트에서 글 써서 티스토리로 보내기(티스토리(태터툴즈, 이글루스, 다음, 워드프레스, 블로거도 비슷한 방법으로 가능))

다음 글을 참조하세요.