이 블로그의 특성 상 코드가 많이 작성되게 되는데. 현재는 그냥 코드 블럭으로만 되어있다.

위와 같은 이미지로 되어 있는데. 아무래도 색상을 입히면 읽는데 있어서 편리하고 있어보인다(...)

그래서 이를 작업하려고 찾아보니 기존에 사용하고 있던 markdown-it 패키지 README 파일에 이미 방법이 소개되어 있었다.

이를 참고하여 작업을 하였다.

환경

• Node.js v17.2.0

• NPM 8.1.4

• markdown-it ^12.2.0

• typescript ^4.4.3

패키지 설치

사용하는 패키지는 highlight.js를 사용한다.

패키지 링크 : https://www.npmjs.com/package/highlight.js?activeTab=readme

Github : https://github.com/highlightjs/highlight.js

npm i highlight.js

코드에 적용

해당 패키지 npm 페이지에 가면 이를 적용하는 소스코드가 간단히 있다.

그대로 참고해서 사용하니 아주 잘된다. 아래는 예시

import MarkdownIt from "markdown-it";
import Highlight from "highlight.js";

/* 생략 */

const md = new MarkdownIt({
    html: true,
    highlight: function(str, lang) {
        if(lang && Highlight.getLanguage(lang)) {
            try {
                return Highlight.highlight(str, {language: lang}).value;
            } catch {}
        }
        return '';
    }
});

스타일 선택

이제 코드를 어떤 스타일로 적용할지 정하여야 한다.

Github에 가면 여러 스타일이 있으니 이를 추가해주기만 하면 된다.

https://github.com/highlightjs/highlight.js/tree/main/src/styles

여기서는 Github 스타일을 사용해보겠다.

해당 파일을 받아 위치에 두고 그저 스타일을 링크하기만 하면 된다.

<link rel="stylesheet" href="/static/highlight.css">

끝

로컬에서 블로그를 빌드하여 사용해보았다. 정상적으로 적용된다.