@nuxtjs/markdownit을 사용하여 마크다운 기사를 HTML로 출력

마지막으로, nuxt.js와 contentful을 사용하여 블로그 사이트를 환경 구축했습니다.
이번에는 markdownit이라는 npm module을 사용하여 Contentful로 작성한 마크 다운 기사를 HTML로 출력하고 싶습니다.

설정해 간다

설치

공식 사이트 을 보면서 이번은 @nuxtjs/markdownit 를 사용해 갑니다.

$ npm install @nuxtjs/markdownit

크리스마스 사양・・・?

명령을 실행하면 크리스마스 같은 배너가 흘러 왔습니다 🎅 < Hello

nuxt.config.js에 설정 추가

nuxt.config.js

modules: [
  '@nuxtjs/axios',
  '@nuxt/content',
  '@nuxtjs/markdownit' //この１行追加
],
// ~~~~~~省略~~~~~~~

// 追加
markdownit: {
    injected: true,   // $mdを使ってどこからでも使えるようになる
    breaks: true      // 改行を<br>に変換してくれる
  }
}

vue 파일에 $ md 추가

template의 일부를 교체

v-html을 사용하여 HTML을 출력합니다.

이중 중괄호 mustaches는 데이터를 HTML이 아닌 일반 텍스트로 취급합니다. 실제 HTML로 출력하려면 v-html 지시문을 사용해야 합니다. 인용구 : Vue.js - 원시 HTML

_slug.vue

<!-- before -->
<div>
  {{ article.fields.body }}
</div>

<!-- after -->
<div v-html="$md.render(article.fields.body)"></div>

HTML로 출력 가능

검증 화면



사이트 화면

npm의 범위

@ 가 붙어 있는 패키지 ( @nuxtjs/markdownit 라든지)는 scope 첨부 패키지라고 합니다.
같은 이름의 패키지는 존재할 수 없기 때문에 @nuxtjs/markdownit 나 @hoge/markdownit 와 같이 scope 를 사용하는 것으로 다른 유저나 조직이 작성한 패키지와 충돌하지 않고 작성을 할 수 있습니다.

공식 사이트의 범위에 대한 설명

끝에

npm을 추가했을 뿐이므로 짧지만 이상이됩니다.
이번 기사를 쓰면서 구현했습니다만, 그 때에 버그를 찾아 버렸기 때문에 노력해 고치자고 생각합니다. . .