經過了前面兩篇新增了 markdown-it 和 highlight.js，
今天來開發 TheMarkdown 元件，
因為所需要的套件和設定都已經在前兩篇完成，
所以可以專注在開發自己偏好的樣式。

TheMarkdown 目的為將 markdown 轉換為 html，
為了避免太過頻繁的渲染畫面，引入 lodash 的時候到了，
如果不知道 lodash 是什麼的，
這邊推薦我去年挑戰失敗的鐵人賽系列文: 每天學一個 Lodash.js 的函式。

npm 安裝 lodash

這篇只會用到 debounce，之後的章節也會處理 lodash 的 tree-shaking。
在元件 TheMarkdown 中適時的使用了 lodash 的 debounce，為避免太頻繁的渲染。

npm i lodash

使用 plop 新建元件 TheMarkdown

npm run plop
# 輸入 TheMarkdown

截圖：

這樣就輕鬆建立好一個新的元件了。

開始開發 TheMarkdown 元件

template(pug):

template 這個部分非常簡單，基本上就是透過 v-html，
並將 markdown 編譯過後的 html(這邊是變數 md) 放入。

script:

先於第一行引入 lodash/debounce，
只接受一個 props 為 markdownText，
每當 markdownText 改變時會執行 updateMarkdown 更新畫面，
但仔細看 updateMarkdown 為一個 debounce 的函式，
且將 delay 設定為 1000 毫秒，
意思是說需要等到 markdownText 停止改變後 1000 毫秒，
畫面才會真正被渲染。
這有什麼好處？
好處是不會在我們打文章時，每輸入一個字就渲染一次，可以節省一些沒必要的運算。

注意：this.updateMarkdown 不能寫在 methods 中。

style(stylus):

以下是將 markdwon 產出的 html 加上客制樣式。

第一行引入了 vuetify 的 color，可以直接使用定義好的顏色變數。

分別設定了：

• 連結(a)的顏色
• 標題(h1, h2, h3, h4, h5, h6)，設定斷行和字體大小及顏色
• 段落(p)，字體大小及顏色

...等等。

storybook 截圖：

接連兩天的黑畫面後，終於有可以 demo 的畫面啦！
以下是用 storybook demo 的元件 TheMarkdown 可以有的樣子。
當然也可以在文章最後 clone 這個 branch，就可以看到完整的 demo。

程式碼放在以下 branch：

016-TheMarkdown

指令：

git clone -b 016-TheMarkdown --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install
npm run storybook