[javascript] Marked에서 코드 블록 생성과 하이라이팅을 위해 외부 라이브러리를 사용할 수 있나요?

30 Nov 2023

javascript

다음은 Marked와 함께 사용할 수 있는 Prism을 예로 들어 보겠습니다. 먼저, Prism 라이브러리를 다운로드하고 HTML 문서에 추가합니다. 그런 다음, Marked의 renderer 옵션을 사용하여 코드 블록을 Prism으로 하이라이팅할 수 있습니다.

아래는 사용 예시입니다:

// Prism 라이브러리 다운로드 후 HTML 문서에 추가

const marked = require('marked');
const prism = require('prismjs');

// 마크다운 텍스트
const markdownText = `
\`\`\`javascript
const hello = '안녕하세요!';
console.log(hello);
\`\`\`
`;

// 하이라이트 된 HTML 가져오기
const highlight = (code, lang) => {
  const grammar = prism.languages[lang];
  if (!grammar) {
    return code;
  }
  return prism.highlight(code, grammar, lang);
};

// Marked 설정
const renderer = new marked.Renderer();
renderer.code = (code, lang) => {
  const highlightedCode = highlight(code, lang);
  return `<pre><code class="language-${lang}">${highlightedCode}</code></pre>`;
};

marked.setOptions({
  renderer: renderer
});

// 마크다운을 HTML로 변환
const html = marked(markdownText);

// 결과 출력
console.log(html);

위의 예제에서 marked 모듈을 사용하여 마크다운 텍스트를 HTML로 변환할 수 있습니다. renderer 객체를 사용하여 코드 블록을 하이라이팅하고, Prism의 highlight 함수를 사용하여 코드를 하이라이팅합니다. 이렇게 하면 마크다운 문서에서 코드 블록을 적절하게 하이라이팅된 HTML로 표시할 수 있습니다.

자세한 내용은 Marked와 함께 사용할 수 있는 다른 하이라이팅 라이브러리의 공식 문서를 참조하시기 바랍니다.