[javascript] Marked를 사용하여 마크다운 문서에 수학 식을 추가하는 방법은?

30 Nov 2023

javascript

Marked는 JavaScript 기반의 마크다운 파서이며, 수학식을 추가하는 기능을 지원하지 않습니다. 하지만, KaTeX라는 수학식 렌더링 라이브러리를 Marked와 함께 사용하여 수학식을 마크다운 문서에 삽입할 수 있습니다.

다음은 Marked와 KaTeX를 사용하여 수학식을 추가하는 예제입니다.

먼저, Marked와 KaTeX를 설치합니다.
```
npm install marked katex
```
다음과 같이 JavaScript 코드를 작성하여 수학식을 마크다운 문서에 추가합니다.

const marked = require('marked');
const katex = require('katex');

// 마크다운 문서
const markdown = `
# 수식 예제

이것은 인라인 수식입니다: $\\alpha + \\beta = \\gamma$

이것은 디스플레이 수식입니다:
\\[
\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}
\\]
`;

// 마크다운을 HTML로 변환
const html = marked(markdown, {
  renderer: new marked.Renderer(), // 기본 렌더러 사용
  highlight: function (code) { return code; } // 문법 강조 기능 끄기
});

// HTML에 수식 렌더링
const renderedHtml = html.replace(/\$\$(.*?)\$\$/g, (_, math) => {
  return katex.renderToString(math, { displayMode: true });
}).replace(/\$(.*?)\$/g, (_, math) => {
  return katex.renderToString(math, { displayMode: false });
});

console.log(renderedHtml);

위 코드는 Marked를 사용하여 마크다운 문서를 HTML로 변환한 뒤, 수학식에 해당하는 부분을 KaTeX를 이용하여 렌더링합니다. 인라인 수식은 $...$ 로 표현하고, 디스플레이 수식은 $$...$$로 표현합니다.

위 코드를 실행하면 콘솔에 렌더링된 HTML이 출력됩니다. 이 HTML을 필요한 곳에 삽입하면, 마크다운 문서에 수학식이 포함된 HTML을 얻을 수 있습니다.

참고 문서: