[nuxt] Markdown-It에 Highlight.js 적용하는 법

Nuxt를 사용하여 블로그와 같은 콘텐츠를 제공하기 위해 정적으로 생성된 웹사이트를 만드는 경우 마크다운 문법을 처리해야할 경우가 생깁니다. 저같은 경우 마크다운 문법과 같은 경우 Markdown-it을 통해 처리하고 있습니다. 하지만 Markdown-it 만으로 처리하기에는 부족한 감이 있습니다. (code syntax highlighting과 같은 경우 지원하지 않음)

그래서 Markdown-it에 추가적으로 적용할 패키지가 highlight.js입니다.

• Markdown-it은 마크다운 문법을 처리하기 위한 패키지
• highlight.js는 syntax highlighting을 처리하기 위한 패키지

1. Install the Packages

yarn add @nuxtjs/markdownit
yarn add markdown-it-highlightjs

or

npm i --save @nuxtjs/markdownit
npm i --save markdown-it-highlightjs

2. nuxt.config.js의 modules속성에 markdownit 추가

module.exports = {
  modules: [
    '@nuxtjs/markdownit'
  ],
}

3. nuxt.config.js에 markdownit config 추가

markdown-it 모듈 설정을 적용할 때, 앞서 우리가 설치한 highlight.js 패키지를 적용시킵니다.

module.exports = {
  modules: [
    '@nuxtjs/markdownit'
  ],
  markdownit: {
    injected: true,
    use: [
      'markdown-it-highlightjs'
    ]
  }
}

4. 원하는 테마를 사용하기 위한 CSS import

마지막으로 ~/node_modules/highlight.js/styles 폴더에 원하는 테마의 스타일을 직접 가져옵니다.

module.exports = {
  css: [
    { src: '~/node_modules/highlight.js/styles/atom-one-dark.css', lang: 'css' }
  ],
  modules: [
    '@nuxtjs/markdownit'
  ],
  markdownit: {
    injected: true,
    use: [
      'markdown-it-highlightjs'
    ]
  }
}