markdown-it 是一個 markdown parser。

官方 Demo

因為個人很喜歡寫 markdown，
所以當然部落格也要可以用 markdown 編輯。

安裝所需套件

• markdown-it
• markdown-it-attrs: 可讓 markdown 新增 css classes, ids, attributes 等。

例如：

# header {.style-me}
paragraph {data-toggle=modal}

• markdown-it-playground: 擴充指令，可引入 codepen, jsfiddle 等 iframe。

例如：

@[jsfiddle](http://jsfiddle.net/rykeller/y4848ak7/8/embedded/html,css,result/)
 
@[codepen](http://codepen.io/Yakudoo/embed/YXxmYR/?height=265&theme-id=0&default-tab=js,result&embed-version=2)

npm 安裝

npm i markdown-it markdown-it-attrs markdown-it-playground

版本：

"markdown-it": "^8.4.2", 
"markdown-it-attrs": "^2.3.2",
"markdown-it-playground": "0.0.5",

新增 markdown-it 的 vue plugin

• ./plugin/markdown-it/index.js

注意：以下程式碼中的 langPrefix 一定要換，
因為 storybook 已經將預設的 language- 設定用掉了，
如果不換掉，樣式會有錯誤。

import Vue from 'vue'

import MarkdownIt from 'markdown-it'
import markdownItAttrs from 'markdown-it-attrs'
import markdownItPlayground from 'markdown-it-playground'

const md = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  langPrefix: 'ht-' // 預設為 'language-'
})

md.use(markdownItAttrs)
md.use(markdownItPlayground)

Vue.use({
  install (Vue, options) {
    Vue.prototype.$md = md
  }
})

• ./nuxt.config.js

在 nuxt.config.js 中新增寫好的 markdown-it 套件。

plugins: [
  '@/plugins/vuetify',
  '@/plugins/markdown-it'
]

程式碼放在以下 branch：

目前還只是片斷程式碼，無法看到畫面。

014-add-markdown-it

指令：

git clone -b 014-add-markdown-it --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install