如何在 Vue 中解析和渲染 Markdown

作者：前端小智 2021-09-13 09:01:02

Markdown 在我們程序界也是一個(gè)必備的技能。我們可以使用 makrdown來(lái)渲染文本，它實(shí)際上是一種更快的寫(xiě)作方式，因?yàn)樗鼘W(xué)習(xí)成本很低，不需要掌握很多知識(shí)就可以開(kāi)始。

[[423406]]

HTML是超文本標(biāo)記語(yǔ)言的縮寫(xiě)，可能是當(dāng)今網(wǎng)絡(luò)上使用最多的標(biāo)記語(yǔ)言。Markdown 在我們程序界也是一個(gè)必備的技能。我們可以使用 makrdown來(lái)渲染文本，它實(shí)際上是一種更快的寫(xiě)作方式，因?yàn)樗鼘W(xué)習(xí)成本很低，不需要掌握很多知識(shí)就可以開(kāi)始。如果你的想寫(xiě)博客，甚至想作為技術(shù)作家寫(xiě)作時(shí)，Markdown 是你首先的寫(xiě)作工具。

本文主要介紹如果在 Vue 中使用 Markdown，廢話說(shuō)了很多了，我們就這開(kāi)始按摩。

為什么使用 Marked.js 庫(kù)

Vue 沒(méi)有像React 那么多 MD 的插件。如 markdown-it、Remark.js、marked.js。希望在未來(lái)，會(huì)有更多好用的庫(kù)來(lái)支持我們的 Vue ，經(jīng)過(guò)一番調(diào)研，我選擇了marked.js，因?yàn)樗男切亲疃?，bug 少。

創(chuàng)建項(xiàng)目

我們使用 vue-cli 來(lái)創(chuàng)建項(xiàng)目，運(yùn)行如下命令：

vue create marked-example

這里我們選擇最簡(jiǎn)單的 Vue2 模板創(chuàng)建項(xiàng)目，創(chuàng)建完后的項(xiàng)目結(jié)構(gòu)如下：

+-- src/i 
|   +-- assets/ 
|   +-- components 
|       +-- HelloWorld.vue 
|       +-- App.vue 
|   +-- main.js

現(xiàn)在我們?cè)?MD 語(yǔ)法寫(xiě)個(gè)標(biāo)題

<template> 
  <div> 
   {{ markdown }} 
  </div> 
</template> 
<script> 
export default { 
  name: "App", 
  data() { 
    return { 
      markdown: " # hello world ", 
    }; 
  }, 
}; 
</script> 
<style> 
#app { 
  font-family: Avenir, Helvetica, Arial, sans-serif; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  text-align: center; 
  color: #2c3e50; 
  margin-top: 60px; 
} 
</style>

運(yùn)行：

基于上面的代碼，我們希望# hello world MD 語(yǔ)法能在 Vue 渲染成標(biāo)題。要怎么做呢，這就需要借助 Marked.js 庫(kù)。

安裝 Marked.jsMarked 或 marked.js 是一個(gè)低級(jí)別的編譯器，幫助我們將 Markdowns 轉(zhuǎn)換成HTML。安裝一波試試水：

npm install marked

然后，在 app.vue 中引入：

import marked from 'marked';

渲染 markdown

渲染方法很簡(jiǎn)單就是把我們的文本傳入 marked，結(jié)果返回是帶了標(biāo)簽的文本內(nèi)容，我們?cè)谟?v-html 渲染即可。

<template> 
<!-- {{ markdown }} --> 
  <textarea v-model="markdown"></textarea> 
  <div v-html="markdownToHtml"></div> 
 
</template> 
<script> 
import marked from 'marked'; 
export default { 
  name: 'App', 
 data(){ 
   return { 
     markdown:  "# Hello World", 
   }; 
 }, 
 computed: { 
   markdownToHtml(){ 
     return marked(this.markdown); 
   } 
 } 
} 
</script> 
<style> 
#app { 
  font-family: Avenir, Helvetica, Arial, sans-serif; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
  text-align: center; 
  color: #2c3e50; 
  margin-top: 60px; 
} 
</style>

這里我們多寫(xiě)了一個(gè) textarea 標(biāo)簽，然后用了計(jì)算屬性來(lái)實(shí)時(shí)的渲染 markdowns。運(yùn)行后的結(jié)果如下

然后，多輸入一些 MD 語(yǔ)法驗(yàn)證一下：

全局引入

當(dāng)我們不想每個(gè)組件都引入一次時(shí)，就可以聲明成全局的。怎么做?

實(shí)現(xiàn) marked 庫(kù)全局化的方法是使用 Mixins。Mixins 只是Vue組件中可重復(fù)使用的功能的一個(gè)分布。

重構(gòu)一下我們的 main.js 代碼，如下所示：

import {createApp} from 'vue'; 
import App from './App.vue'; 
import marked from 'marked'; 
const markedMixin = { 
    methods: { 
         md: function (input) { 
            return marked (input); 
        }, 
    }, 
}; 
 
 
 
createApp(App).mixin(markedMixin).mount('#app')