[javascript] Marked를 사용하여 마크다운에 수식(Markdown Math)을 표기하는 방법은?

30 Nov 2023

javascript

Marked는 JavaScript로 작성된 마크다운 파서입니다. 다양한 마크다운 확장 기능을 지원하며, 수식을 표현할 수 있는 기능도 포함되어 있습니다.

마크다운에서 수식을 표기하기 위해서는 일반적으로 수식을 감싸는 $나 $$ 기호를 사용합니다. $ 기호는 인라인으로 수식을 표기할 때 사용하고, $$ 기호는 수식을 블록 형태로 표기할 때 사용합니다.

아래는 Marked를 사용하여 마크다운에 수식을 표기하는 예제입니다.

const marked = require('marked');

const markdown = `
# 제곱근

인라인 수식: $\\sqrt{4}$
블록 수식:

$$
\\int_{0}^{\\infty} x^2 dx
$$
`;

const renderer = new marked.Renderer();
renderer.math = function (expression) {
  return `<span class="math">${expression}</span>`;
};

const html = marked(markdown, { renderer: renderer });
console.log(html);

위의 예제에서는 marked.Renderer를 사용하여 math 메서드를 구현하였습니다. math 메서드는 수식 표현식을 전달받아 특정 클래스를 감싸는 HTML 문자열을 반환합니다. 이렇게 구현함으로써 Marked는 $나 $$로 감싸진 수식을 변환하여 마크다운을 HTML로 렌더링할 때 해당 수식을 표현할 수 있게 됩니다.

위 예제를 실행하면 다음과 같은 HTML 코드가 출력됩니다.

<h1>제곱근</h1>
<p>인라인 수식: <span class="math">\sqrt{4}</span></p>
<p>블록 수식:</p>
<p><span class="math">
\int_{0}^{\infty} x^2 dx
</span></p>

마크다운에 수식을 표기하는 방법은 이렇게 간단하게 가능합니다. Marked를 사용하면 마크다운에서 수식을 표현하는데 편리한 기능을 사용할 수 있습니다.