워드프레스에서 수식을 삽입하기 위한 코드

By | June 18, 2017

워드프레스에 수식을 삽입하는 방법은 여러 가지가 있으나 가장 권장하는 방법은 MathJax를 이용하는 것이다. MathJax는 HTML 문서에서 TeX 문법에 따라 수식을 손쉽게 입력할 수 있도록 해주는 스크립트이다. 자바스크립트이므로 서버에 CGI를 설치하는 부담 없이 블로그에 적용할 수 있다. (MathJax 공식 홈페이지)

수학이나 물리학을 주제로 블로그를 운영하는 사람들에게 도움이 되기를 바라며 이 블로그에서 사용하는 MathJax 삽입 코드와 스타일시트 코드를 공개한다.

테마 실행파일에 삽입하는 코드

테마의 [function.php] 파일에 다음 코드를 삽입한다. '<?'와 '?>' 사이에 삽입하되 '?>' 바로 윗줄에 삽입하는 것이 좋다.

/* *** 헤더에 추가할 내용 설정 *** */
function my_head_func() {

   /* P 태그와 BR 태그가 자동으로 삽입되지 않도록 함. */
   remove_filter('the_content', 'wpautop');
   remove_filter('the_excerpt', 'wpautop');

   /* 따옴표, 대시 등등 자동으로 변환하지 않도록 함. */
   remove_filter('the_content', 'wptexturize');
   remove_filter('the_excerpt', 'wptexturize');
   remove_filter('comment_text', 'wptexturize');

   /* MathJax 삽입 */
   echo '<script type="text/x-mathjax-config">' . "\n";
   echo 'MathJax.Hub.Config({' . "\n";
   echo '   CommonHTML: {' . "\n";
   echo '      scale: 88' . "\n";
   echo '   }' . "\n";
   echo '});' . "\n";
   echo '</script>' . "\n";
   echo '   <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">' . "\n";
   echo '   </script>' . "\n";
}

/* *** 헤더에 내용 추가 *** */
add_action( 'wp_head', 'my_head_func' );

스타일 파일에 삽입하는 코드

테마의 [style.css] 파일에 다음 코드를 추가한다. 위치는 어디든 좋으나 되도록 가장 끝에 삽입하는 것을 권장한다.

/* ### 수학 문서 작성을 위한 스타일시트 (c) Blue-Haired Anne ### */

/* *** 정리, 따름정리, 정의, 가설, 명제, 보조정리 상자 모양 설정 *** */
div.theorem, div.corollary, div.definition, div.conjecture, div.proposition, div.lemma {
   border: 1px solid rgb(210,210,210); padding: 9px 14px; margin: 22px 0px;
}

/* *** 정리는 상자 바탕색을 다르게 설정 *** */
div.theorem {
   background-color: rgb(244,244,244);
}

/* *** 정리 상자 내에서 마지막 P 태그의 아래 여백을 0으로 설정 *** */
div.theorem p:last-child, div.corollary p:last-child, div.definition p:last-child, div.conjecture p:last-child, div.proposition p:last-child, div.lemma p:last-child {
   margin-bottom: 0;
}

/* *** 정리 첫 줄에 '정리'라는 글자를 넣기 위한 글자 스타일 *** */
span.theorem, span.corollary, span.definition, span.conjecture, span.proposition, span.lemma, span.example {
   font-weight: bold; padding-right: 5px; color: rgb(64,64,64);
}

/* *** 증명 문단의 왼쪽 여백을 설정 *** */
p.proof, p.sketch, ol.proof, ul.proof {
   padding-left: 20px;
}

/* *** 증명의 첫 번째 문단은 내어쓰기 적용 *** */
p.prooffirst, p.sketchfirst, p.proofbegin, p.sketchbegin {
   padding-left: 20px; text-indent: -20px;
}

/* *** 증명 첫 줄에 '증명'이라는 글자를 넣기 위한 글자 스타일 *** */
span.proof, span.sketch, span.construction {
   font-weight: bold; padding-right: 12px; color: rgb(96,96,96);
}

/* *** 증명 문단을 DIV 태그로 삽입하는 경우를 위한 스타일 *** */
div.proof, div.sketch {
   margin-left: 20px;
}

/* *** 증명 내에서 리스트를 만드는 경우 *** */
ol.proof, ul.proof {
   padding-bottom: 0; margin-bottom: 1em;
}

/* *** 증명 끝에 QED에 해당하는 사각형 삽입 *** */
span.qed {
   float: right; width: 12px; height: 12px; margin-top: 7px;
   border: 0px solid rgb(128,128,128); background-color: rgb(128,128,128);
}

/* *** 문단 내에서 정의할 때 정의하는 글자를 진하게 만듦 *** */
span.definitioninline {
   font-weight: bold; color: rgb(64,64,64);
}

수식이 삽입된 문서 작성 예

MathJax로 수식이 삽입된 문서를 작성한 예는 다음과 같다.

해당 페이지를 열어본 뒤 브라우저의 [소스보기] 기능을 이용하여 HTML 소스를 확인하기 바란다.

Leave a Reply

Your email address will not be published. Required fields are marked *