iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 14
2

markdown-it 是一個 markdown parser。

官方 Demo

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

安裝所需套件

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

例如:

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

例如:

@[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

上一篇
#13 元件開發: TheTags
下一篇
#15 套件安裝及設定: highlight.js 使用與 markdown-it-highlightjs 自定義套件撰寫
系列文
用 Nuxt.js 2.0, Vuetify, Storybook, Firebase 建一個 Blog30

尚未有邦友留言

立即登入留言