MathML Getting Started

MathML 공식문서 가이드 바로가기
MDN MathML 바로가기

🐤 Beginner's Guide

• HTML5 에서 사용 가능
• 기본적인 수학적 구조는 mathml.css 로 충분
• 헤더에 mathml.css 삽입

<script src="[https://fred-wang.github.io/mathml.css/mspace.js](https://fred-wang.github.io/mathml.css/mspace.js)"></script>

• 더 복잡한 구조가 필요한 경우 MathJax 라이브러리를 MathML 폴리필로 사용한다.
  • 스타일 속성 사용하기 위해서 필요!

<script src="[https://fred-wang.github.io/mathjax.js/mpadded-min.js](https://fred-wang.github.io/mathjax.js/mpadded-min.js)"></script>

• MathML의 루트 요소는 <math>

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mi>z</mi>
    <mo>=</mo>
    <mn>2</mn>
    <mo>-</mo>
    <mn>3</mn>
  </math>

Token Elements

• mn : number token

  • 부호 없는 정수 또는 실수 포함
  • 2, 3.04
  • 음수는 포함하지 않으며, -(마이너스)는 연산자에 포함된다.

• mi : identifier token

  • 함수 이름 및 기호, 상수 포함
  • x, sin, π

• mo : operator token

  • 수학 연산자 포함
  • +, -, ∑

Styling

• mathvariant : font style

  • normal, bold, italic, bold-italic, script

• mathsize : font size

  • small, normal, big, 12px

• mathcolor : font color

• mathbackground

<math>
    <mi>y</mi>

    <mo>=</mo>

    <mi mathbackground="red">m</mi><mi>x</mi>
    <mo>+</mo>
    <mi mathcolor="blue">c</mi>

    <mo>=</mo>

    <mstyle mathbackground="red">
      <mn>3</mn><mo>t</mo>
    </mstyle>
    <mi>x</mi>
    <mo>+</mo>
    <mn mathcolor="blue" mathvariant="bold">4</mn>
</math>