jqMath

blog

블로그에 각종 수식을 예쁘게 표현하고 싶을 때가 있다.

수식을 자주 사용하는 블로거가 아니라면 다른 수식 표현 도구를 활용하여 수식을 작성한 후 이미지 캡쳐하여 해당 이미지 파일을 올리면 그만이다. 하지만, 수식을 자주 사용하는 블로거라면 매번 이미지를 캡쳐하고 파일을 올리는 작업이 여간 귀찮은게 아니다.

단 한 번의 간단한 초기 설정만으로 수식을 예쁘게 표현해주는 방법이 있어서 소개한다.

웹 표준을 따르는 대부분의 브라우저에서 사용할 수 있는 두가지 라이브러리가 있다.

그 주인공은 바로 MathJax 와 jqMath 다. 둘 다 JavaScript 와 특별한 Font 들을 활용하여 브라우저에 수식을 그럴싸하게 표현해준다.

MathJax

MathJax 는 수식 표시기의 끝판왕이라고 보면 되겠다. 거의 모든 수식과 기호들을 표현 가능하고 Web 뿐만 아니라 Android, iOS 등에도 활용할 수 있다. 물론 해당 운영체제에서도 브라우저를 띄워서 표현해야 한다.

Tex 와 MathML 이라는 수식 표현용 언어를 사용한다.

관심있으신 분은 다음 GitHub 저장소에 관련 source code 와 설명들을 참고하면 되겠다.

https://github.com/mathjax

다만, 기능이 많다보니 처리속도가 다소 느리다.

jqMath

jqMath 는 MathJax 보다 기능은 조금 떨어지지만, 대부분의 수식 표현이 가능하고 가볍다. jqMath 홈페이지의 설명에 따르면 MathJax 보다 어림잡아 5배 정도 빠르다고 한다.

가벼운만큼 설정하기도 아주 간단해서 이번 포스트에서는 jqMath 를 설정하는 방법을 소개하고자 한다.

jqMath 설정하기

jqMath 라이브러리 Download

우선 jqMath 페이지의 중간 부분에서 download jqMath 링크를 찾아 jqMath 라이브러리를 다운로드 받자.

라이브러리라고 표현했지만 사실은 JavaScript 파일들이다.

압축을 풀고 COPY-ME.html 파일을 브라우저로 열어 보면 다음과 같은 화면이 보일 것이다.

그림1. COPY-ME.html

jqMath 라이브러리 Upload

위와 같은 화면을 보았다면 벌써 반은 성공이다.

각자 자신이 운영하는 블로그에도 똑같은 환경을 만들어주면 끝이다.

아까 다운 받은 mathscribe 폴더를 통째로 본인이 사용하는 호스팅 서버에 업로드한다.

TiStory 를 사용한다면 관리->HTML/CSS 편집->파일업로드 메뉴를 차례대로 클릭하면 된다.

html 수정

이제 아까 브라우저에서 열어보았던 COPY-ME.html 파일을 문서 편집기로 열어보자.

$ vi COPY-ME.html

<!DOCTYPE html>
<html lang="en" xmlns:m="http://www.w3.org/1998/Math/MathML">

<head>
    <meta charset="utf-8">
    
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=UnifrakturMaguntia">
    <link rel="stylesheet" href="../mathscribe/jqmath-0.4.3.css">
    
    <script src="../mathscribe/jquery-1.4.3.min.js"></script>
    <script src="../mathscribe/jqmath-etc-0.4.3.min.js" charset="utf-8"></script>

<link> 태그 2줄과 <script> 태그 2줄, 총 4줄을 본인의 웹페이지에 <head> 태그 사이에 복사하여 붙여넣기 한다.

이때, 아까 업로드했던 경로를 참고하여 <link> 태그와 <script> 태그의 경로를 적절히 수정해 준다.

TiStory 를 이용한다면 images 디렉토리에 업로드되었을테니 관리->HTML/CSS 편집->HTML 메뉴를 선택한 후 다음과 같이 수정하면 되겠다.

<head>
	......
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=UnifrakturMaguntia">
	<link rel="stylesheet" href="./images/jqmath-0.4.3.css">

	<script src="./images/jquery-1.4.3.min.js"></script>
	<script src="./images/jqmath-etc-0.4.3.min.js" charset="utf-8"></script>
	......
</head>

Tex-Like Syntax

이제 실제 수식을 작성해 보자.

아까의 COPY-ME.html 에 들어 있던 예제를 복사해 보았다. 근의 공식이 깔끔하게 보인다.

<p>If \$ax^2+bx+c=0\$ with \$a≠0\$, then:
\$\$x={-b±√{b^2-4ac}}/{2a}\$\$
</p>

If $ax^2+bx+c=0$ with $a≠0$, then: $$x={-b±√{b^2-4ac}}/{2a}$$

Tex 와 아주 유사한 문법을 사용하여 수식을 표현하고 있다.

수식 표현방법이 궁금하다면 다음 문서의 HTML Source 예제들을 참고하자.

http://mathscribe.com/author/jqmath.html

MathML

역시 COPY-ME.html 의 예제 코드를 복사해 보았다.

<math display="block">
  <mrow>
    <mi mathvariant="normal">&pi;</mi>
    <mo>≈</mo>
    <mfrac>
      <mn>355</mn>
      <mn>113</mn>
    </mfrac>
  </mrow>
</math>
π ≈ 355 113

MathML 역시 깔끔하게 잘 보인다.

MathML 은 수식을 표현하는 W3C 표준이다. 자세한 내용은 다음 웹페이지를 참고하자.

W3C Math

대부분의 수식편집 소프트웨어가 MathML 을 지원하고 위와 같은 <math> 태그로 시작하는 수식 코드를 생성해 준다. 해당 코드를 복사해서 붙여 넣어 주면 해당 소프트웨어와 거의 동일한 모양으로 수식을 웹 브라우저에 표현해 줄 것이다.

이 글을 다 작성하고 티스토리 블로그에 발행 버튼을 클릭하고 나서야 알게된 사실이 하나 있다. 수식들이 티스토리앱에서는 제대로 보이지 않는다는 것이다. ㅠㅠ; 브라우저(크롬, 사파리, 익스플로러)에서는 제대로 보이는데 티스토리앱에서만 엉망으로 보인다. 난감하다.