주요 내용으로 건너뛰기

CKEditor에서 MathJax 수식입력

디스플레이모드, 인라인모드를 선택적으로 작성하기 위한 패치


해외 학술관련 사이트를 돌아다니다 보면 수식이 미려하게 잘 나와 있는 사이트를 많이 볼 수 있습니다. 우리나라 사이트에서는 그렇게 미려한 수식을 사용하는 사이트를 자주 접하기 힘든데요. 대표적인 예로 네이버에서 연재한 수학산책 시리즈 중에 박석재 박사님이 진행하신 시리즈가 있습니다. 그중 천체물리학 편에 아래 그림을 캡쳐해보았는데요.....(http://navercast.naver.com/contents.nhn?rid=22&contents_id=61191&leafId=22) 


네이버 수학산책 천체물리학편에서


그림으로는 큰 차이를 느끼지 못하지만 그림에 보이는 저 수식은 전체가 이미지 입니다. 브라우저가 랜더링한것이 아니라 통으로 이미지를 집어넣은 것입니다. 아무래도 보기도 좋지 않고 내용을 입력할 때도 다른데서 랜더링된 수식을 이미지로 캡쳐해서 문서에 넣어야하므로 불편한 것이 사실입니다.


블로그를 운영하거나 사이트를 구축할 때 위지윅 에디터에서 수식 입력을 가능하게 하려고 좀 조사를 해보면  브라우저에서 수식을 랜더링할 수 있게 해주는 MathJax 라는 Javascript 엔진이 있는 것을 알 수 있습니다.(https://www.mathjax.org/) 그리고 대중적인 위지윅 에디터에서 이 MathJax 를 사용할 수 있도록 플러그인을 제공해주고 있습니다.(http://ckeditor.com/addon/mathjax)


CKEditor에서 제공하는 MathJax 플러그인은 그 자체로 매우 훌륭하며 쓰기에 그렇게 불편하지 않습니다. 다이얼로그에 있는 위키 링크를 누르면 자세한 LaTeX 편집 명령도 볼 수 있어서 꽤 편리하게 수식을 입력할 수 있습니다. 결과 또한 좋습니다. 하지만 한가지 단점이 있는데 이렇게 삽입한 수식이 무조건 인라인 모드로 들어간다는 것입니다. 인라인 모드와 디스플레이 모드 수식은 아래에서 확인 할 수 있습니다.



LaTeX 수식 디스플레이모드와 인라인모드


수식이 있는 글을 작성할 때 주로 디스플레이 모드를 사용하는데 (물론 인라인 모드도 꼭 필요하긴 합니다.) 무조건 인라인모드로 들어가기 때문에 문단을 바꿔서 수식만 입력하고자할때 모양이 어색해 집니다. 특히!!! 적분기호는 아주 보기 좋지 않습니다. 그래서 수식을 입력하는 다이얼로그에서 이 두가지 모드를 선택할 수 있도록 간단하게 패치를 해보는 것이 본 글의 목적입니다.


여기서 CKEditor에 MathJax 플러그인을 설치하는 부분은 건너뛰도록 하겠습니다. (크게 어렵지 않고 CKEditor 웹사이트에서 시키는대로 하면 됩니다.) 우리가 수정할 파일은 ckeditor.js, mathjax.js 이 두 파일입니다. 제대로 설치가 되었다면 /ckeditor  폴더 아래 CKEditor를 동작하게 해주는 ckeditor.js 파일이 있습니다. 그리고 /ckeditor/plugins/mathjax/dialogs 폴더에 mathjax.js 파일이 있습니다.


mathjax.js 파일은 에디터에서 수식 버튼을 눌렀을 때 팝업되는 다이얼로그를 정의하는 파일입니다. ckeditor.js는 CKEditor를 작동시키는 javascript 파일인데 CKEditor 사이트에서 MathJax 플러그인을 포함시켜서 다운 받았다면 이 파일 안에 MathJax에 관한 내용이 들어 있게 됩니다.


우선 인라인 모드와 디스플레이모드를 결정 짖는 요소는 LaTeX 수식을 알리는 문자 \[, \( 입니다. \[ 수식 \] 라고 되면 디스플레이모드로 랜더링되고, \( 수식 \) 로 되면 인라인모드로 랜더링됩니다. 그래서 우리 목적을 달성하기 위해 주로 해야할 일은 \[, \( 가 있는 곳을 중심으로 적당히 조작을 하는 것입니다. 


1. mathJax.js 고치기

mathjax.js 파일 내용을 보면 미니멀 버전으로 줄바꿈이 전혀 없으므로 알아보기가 불가능합니다. 아래는 제가 일부러 줄바꿈을 해 본 것입니다.return {} 내부에 contents:[] 안에 다이얼로그의 내용이 들어 갑니다. 실제로 tab을 먹이고 줄바꿈을 하면 에러가 나기때문에 미니멀 버전으로 그대로 편집을 합니다. 전체적인 구조만 아래 코드를 보고 가늠하면 되겠습니다.


1.1. 제일 먼저 다이얼로그의 내용에 체크박스 하나를 추가 합니다.  

{id:"equation",type:"textarea", ... 라는 부분이 있습니다. 이 객체 리터럴 ({} 로 둘러쌓인 부분} 바로 아래 체크박스를 정의하는 객체 리터럴을 추가해주면 됩니다. 물론 한줄로 죽 적어야 합니다.


다음으로 "keyup" 이벤트에 등록된 함수도 아래와 같이 수정합니다. 다이얼로그에서 수식을 입력할때 실시간으로 아래쪽에 랜더링된 모습읍 보여주기 위한 함수입니다. 그래서 그때 그때 모드에 따라 적절한 문자를 삽입해주기 위해 함수를 수정합니다. (하지만 어차피 본문에 삽입될 때만 \[, \(을 구별하면 되니까 꼭 이 함수는 수정안해도 될 것같습니다.)


comment에 해당하는 함수도 아래와 같이 수정합니다. 이 함수는 확인 버튼을 눌러서 본문에 수식을 삽입할 때 실행되는 함수입니다.


수정한 전체적인 내용은 간단합니다. 우리가 제일 처음에 id:inline으로 추가했던 체크박스의 체크 여부를 판단해서 '\[',  '\(' 를 바꿔 주는 것입니다. 위에 원래 소스와 비교해보세요. 원래 소스는 '\(' 으로만 작성되어 있습니다. 체크박스의 체크여부를 알기 위해 dialog.getContentElement( 'info', 'inline' ).getValue() 로 해당 체크박스의 값을 조회하고 있습니다. 'info' 와 'inline' 어디에 어떤의미로 정의되었는지는 전체 코드를 보면 대강 알 수 있습니다. 'info'는 다이어로그의 아이디이고, 'inline'은 체크박스의 아이디입니다.

이렇게 해서 수식을 입력하는 부분의 수정은 모두 끝이 났습니다. 다음은 작성한 수식을 수정하기 위해 수식을 더블클릭했을 때 다이얼로그가 열리면서 해당 수식을 잘 불러올 수 있도록 하는 부분입니다.


2. ckeditor.js 고치기

ckeditor.js 도 모두 한줄로 되어 있어서 수정하기가 쉽지 않은데....(생각해보니 읽기 편하게 줄바꿈 된 버전으로 다운받을 수도 있을것같네요. 혹시 있으면 댓글로 알려주세요.) 에디터 찾기 기능으로 "CKEDITOR.plugins.mathjax.trim" 을 찾습니다. 그리고 이 trim함수 부분을 아래 코드로 바꿔주세요.


위 코드 역시 내용은 별것없습니다. 해당 수식을 trim하기 위해 \[ 을 한번 찾아보고 없으면 \( 을 찾아보도록 고친것 뿐입니다. 원래 함수는 \(만 찾으려고 하겠죠. 이렇게 하고 수식 입력기를 불러 오면 아래 그림처럼 인라인 체크 박스가 보이게 됩니다.


인라인모드 체크박스가 삽입된 MathJax 다이얼로그


지금까지 소스는 https://github.com/metamath1/mathjax_dialog_disin 에서 확인하고 다운 받아서 적용 할 수 있습니다.

조준우 님의 창작활동을 응원하고 싶으세요?

댓글

SNS 계정으로 간편하게 로그인하고 댓글을 남겨주세요.