[javascript] Marked를 사용하여 마크다운 문서에 코드 실행 결과를 포함하는 방법은?

30 Nov 2023

javascript

첫 번째로, Marked를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.

npm install marked

다음으로, Marked를 사용하여 마크다운 문서를 HTML로 변환하는 코드를 작성합니다.

const marked = require('marked');

const markdownText = `
# 제목

\`\`\`javascript
console.log('Hello, world!');
\`\`\`
`;

const renderedHtml = marked(markdownText);
console.log(renderedHtml);

위의 코드에서는 markdownText 변수에 마크다운 문서를 정의하고, marked 함수를 사용하여 renderedHtml에 HTML로 변환한 결과를 저장합니다. renderedHtml을 콘솔에 출력하면 마크다운 문서가 HTML로 변환된 결과를 확인할 수 있습니다.

마크다운 문서에서 코드 블록을 실행 가능하게 만들려면, Marked에 highlight 옵션을 설정하여 코드 블록에 실행 결과가 포함된 HTML을 생성할 수 있습니다. 이때, highlight 옵션에는 highlight.js와 같은 코드 하이라이팅 라이브러리를 사용할 수 있습니다.

아래는 Marked에서 highlight 옵션을 사용하여 코드 실행 결과를 포함하는 코드의 예시입니다.

const marked = require('marked');
const highlight = require('highlight.js');

const markdownText = `
# 제목

\`\`\`javascript
console.log('Hello, world!');
\`\`\`
`;

const renderer = new marked.Renderer();
renderer.code = function(code, lang) {
    const highlightedCode = highlight.highlightAuto(code).value;
    return `<pre><code class="hljs ${lang}">${highlightedCode}</code></pre>`;
};

const markedOptions = {
    renderer: renderer
};

const renderedHtml = marked(markdownText, markedOptions);
console.log(renderedHtml);

위의 코드에서는 marked.Renderer를 사용하여 커스텀 렌더러를 생성하고, renderer.code 함수를 오버라이드하여 코드 블록을 처리하는 방식을 변경합니다. highlight 라이브러리를 사용하여 코드를 하이라이팅한 뒤, <pre><code> 태그로 감싸서 반환합니다. 이렇게 하면 코드 블록에 실행 결과가 포함된 HTML이 생성됩니다.

마크다운 문서에서 코드 실행 결과를 포함하려면 위의 예시 코드를 참고하여 Marked를 사용하면 됩니다.