Math

Temml 을 써서 HTML 페이지에 품질 좋은 LaTeX 수식을 렌더링합니다. 네이티브 MathML 로 곧장 컴파일합니다.

이럴 때 쓰세요. HTML 페이지 안에서 LaTeX 수식을 블록 수식으로 렌더링해야 할 때. <r-math>는 latex 어트리뷰트의 식을 Temml로 조판합니다. Temml 은 LaTeX 을 MathML 로 컴파일하고, 배치는 브라우저가 직접 합니다 (canvas 도 SVG 도, KaTeX 런타임도 없습니다).

빠른 시작

기본 사용법

<r-math latex="\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1 \quad (a > b > 0)"></r-math>

API 레퍼런스

프로퍼티

프로퍼티	타입	기본값	설명
latex	string	''	렌더링할 LaTeX 식. 슬롯 텍스트가 아니라 이 어트리뷰트로 줍니다.
display	string	'block'	block(블록 수식) 또는 inline(인라인 수식).
font	string	''	system으로 두면 내장 Latin Modern Math 대신 사용자의 시스템 수식 글꼴을 씁니다.
macros	string	''	Temml 매크로를 담은 JSON 객체. 잘못된 JSON 은 조용히 무시됩니다.
wrap	string	''	Temml 의 부드러운 줄바꿈: none, tex, =.
copy	boolean	false	복사 버튼을 보입니다. copy만 쓰면 LaTeX 원본을, copy="mathml"은 MathML 을 복사합니다.
download	boolean	false	원본 (.tex) 이나 MathML(.mml) 을 내려받는 버튼·메뉴를 보입니다.
sheet	string	''	컴포넌트의 섀도 DOM 에 주입할 CSS.

💡 참고: latex 프로퍼티의 게터는 값을 decodeURIComponent로 디코딩하므로, URI 인코딩된 식은 렌더링 전에 디코딩됩니다. 식을 슬롯 텍스트로 넣어도 아무 효과가 없습니다. 렌더링되는 것은 latex 어트리뷰트뿐입니다.

식 latex

<r-math latex="x = {-b \pm \sqrt{b^2-4ac} \over 2a}"></r-math>

외부 스타일 sheet

<r-math latex="e^{i\pi} + 1 = 0" sheet=".ran-math { justify-content: flex-start; }"></r-math>

이벤트

이벤트	detail	발생 시점
render	{ ok: true }	식이 성공적으로 렌더링되었을 때.
error	{ message: string }	Temml 이 식을 파싱하지 못했을 때 (잘못된 LaTeX 등).
copied	{ kind: 'source' | 'mathml' }	복사 버튼이 원본이나 MathML 을 클립보드에 복사했을 때.
download	{ format: 'source' | 'mathml' }	다운로드 버튼이 .tex나 .mml 파일을 저장했을 때.

스타일

<r-math>는 자체 CSS 커스텀 프로퍼티 16 개와 테마에서 읽어 오는 의미 토큰을 공개합니다. 상속이 닿는 곳이면 어디에나 지정하세요 — :root, 바깥 컨테이너, 또는 엘리먼트 자체.

r-math {
  --ran-math-error-background: var(--ran-color-bg-subtle);
}

Part: button · error · math · menu · render · toolbar

전체 목록은 스타일 토큰에, 어떤 토큰을 쓸지는 디자인 시스템에 있습니다.

권장 사항

• 식은 latex로 주세요: 식은 latex 어트리뷰트에 지정합니다. 슬롯 텍스트는 렌더링되지 않습니다.
• JavaScript 에서는 역슬래시를 이스케이프하세요: JS 문자열 리터럴로 latex를 대입할 때 \는 이스케이프해야 합니다 (예: '\\frac{1}{2}').
• 파싱 실패에 대비하세요: 모든 식이 올바른 LaTeX 이라고 가정하지 말고 error를 구독하세요 (또는 렌더링된 ::part(error) 상자를 확인하세요).
• sheet로 배치를 바꾸세요: 내부 .ran-math 배치를 덮어써야 할 때 sheet 어트리뷰트를 쓰세요.