[javascript] Marked를 사용하여 코드 블록에 색상 테마를 적용하는 방법은?

30 Nov 2023

javascript

Marked 설치하기: 먼저, Marked를 프로젝트에 설치해야 합니다. 다음 명령어를 사용하여 Marked를 설치하세요:
```
npm install marked
```
스타일시트 추가하기: 색상 테마를 적용하기 위해 스타일시트를 추가해야 합니다. 예를 들어, Prism.js를 사용하는 경우 prism.css 스타일시트를 HTML 파일에 포함시켜야 합니다: ```html

3. 코드 블록에 테마 적용하기: Marked는 Highlight.js와 Prism.js 두 가지 코드 하이라이팅 라이브러리를 지원합니다. 사용하려는 라이브러리를 선택한 후, 해당 라이브러리를 사용하여 코드 블록에 색상 테마를 적용할 수 있습니다.

Highlight.js를 사용하는 경우, 다음과 같이 Marked를 설정할 수 있습니다:
```javascript
const marked = require('marked');
const hljs = require('highlight.js');

marked.setOptions({
  highlight: function(code, lang) {
    if (hljs.getLanguage(lang)) {
      return hljs.highlight(lang, code).value;
    } else {
      return hljs.highlightAuto(code).value;
    }
  }
});

const markdown = '```javascript\nconsole.log("Hello, World!");\n```';
const html = marked(markdown);
document.getElementById('output').innerHTML = html;

Prism.js를 사용하는 경우, 다음과 같이 Marked를 설정할 수 있습니다:

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

marked.setOptions({
  highlight: function(code, lang) {
    return Prism.highlight(code, Prism.languages[lang], lang);
  }
});

const markdown = '```javascript\nconsole.log("Hello, World!");\n```';
const html = marked(markdown);
document.getElementById('output').innerHTML = html;

위의 예시 코드에서 highlight 옵션을 통해 코드 하이라이팅 로직을 정의하고 있습니다. 이 옵션은 코드 블록의 언어(lang)를 인식하여 적절한 하이라이팅을 적용합니다.

이제 Marked를 사용하여 코드 블록에 색상 테마를 적용할 수 있습니다.