JS - Mathjax - 웹페이지에서 수학 수식 표현하기

반응형

 

Mathjax

  • 웹 브라우저에 수학 수식을 표현하는 JavaScript 라이브러리
  • 서버 뿐만 아니라 로컬에서도 HTML문서의 헤더(head)에 삽입하면 웹 브라우저로 작동

라이브러리 호출

  • <head> 안의 스크립트에서 MathJax 라이브러리 호출
/* Javascript */
/* MathJax 라이브러리 특정 버전으로 고정(3.0.1) */
<script src=
  "https://polyfill.io/v3/polyfill.min.js?features=es6">
</script>
<script id="MathJax-script" async src=
  "https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js">
</script>

사용 방법

  • $$로 시작하여 $$로 종료
  • LaTeX 문법을 따르며, 해당 문법으로 수학 수식 표현
  • HTML 문서 내에서 사용
<!-- HTML -->
<!-- $$로 시작하여 $$로 종료 -->
<!-- LaTex 문법을 따름 -->
<p> $$ \sqrt(x) $$ </p>


사용 예시 (근의 공식 출력)

  • HTML 소스
<!-- mathjax_test.html -->
<html>
  <head>
    <!-- MathJax 특정 버전으로 고정(3.0.1) -->
    <script src=
      "https://polyfill.io/v3/polyfill.min.js?features=es6">
    </script>
    <script id="MathJax-script" async src=
      "https://cdn.jsdelivr.net/npm/mathjax@3.0.1/es5/tex-mml-chtml.js">
    </script>
  </head>

  <body>
    <p>$$ x = \frac{-b \pm \sqrt{b^2-4ac}}{2a} $$</p>
  </body>
</html>

 

  • 실행 화면


참고

mathjax.org - gettingstarted

반응형