[javascript] Marked를 사용하여 마크다운 문서에 차트를 추가하는 방법은?

30 Nov 2023

javascript

마크다운에 차트를 추가하려면 먼저 차트를 생성하는 JavaScript 라이브러리를 사용해야 합니다. 예를 들어, Chart.js는 사용하기 쉬운 차트 라이브러리 중 하나입니다.

Chart.js를 마크다운에 추가하기 위해 다음과 같은 단계를 따를 수 있습니다.

먼저, Marked와 Chart.js를 HTML 파일에 추가합니다.

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

HTML 파일에 마크다운을 렌더링할 엘리먼트를 추가합니다.

<div id="markdown-container"></div>

JavaScript 코드에서 Marked를 사용하여 마크다운을 렌더링하고, Chart.js를 사용하여 차트를 생성합니다.

const markdownContainer = document.getElementById("markdown-container");
const markdown = `# Markdown 문서

이곳에 차트를 추가합니다.

\`\`\`chart
{
  "type": "bar",
  "data": {
    "labels": ["사과", "바나나", "오렌지"],
    "datasets": [{
      "data": [12, 19, 7]
    }]
  },
  "options": {}
}
\`\`\``;

const renderer = new marked.Renderer();
renderer.code = function (code, language) {
  if (language === 'chart') {
    const chartData = JSON.parse(code);
    const canvas = document.createElement('canvas');
    markdownContainer.appendChild(canvas);
    new Chart(canvas, chartData);
  }
}

markdownContainer.innerHTML = marked(markdown, {
  renderer: renderer
});

위의 코드에서 마크다운 문서에 차트를 추가하는 방법을 보여줍니다. 마크다운 코드 블록에 chart라는 언어를 사용하면, 이 블록의 내용이 차트 데이터로 간주되고 이를 사용하여 Chart.js를 통해 차트를 생성합니다. 생성된 차트는 HTML 파일의 markdown-container 엘리먼트에 추가됩니다.

이렇게 하면 Marked를 사용하여 마크다운 문서에 차트를 추가할 수 있습니다. 위의 예제 코드를 수정하여 원하는 차트 형태와 데이터로 적용할 수 있습니다.