建站
咨詢
售后
建站咨詢
新聞中心
HTML是超文本標(biāo)記語言的縮寫，可能是當(dāng)今網(wǎng)絡(luò)上使用最多的標(biāo)記語言。Markdown 在我們程序界也是一個(gè)必備的技能。我們可以使用 makrdown來渲染文本，它實(shí)際上是一種更快的寫作方式，因?yàn)樗鼘W(xué)習(xí)成本很低，不需要掌握很多知識(shí)就可以開始。如果你的想寫博客，甚至想作為技術(shù)作家寫作時(shí)，Markdown 是你首先的寫作工具。
本文主要介紹如果在 Vue 中使用 Markdown，廢話說了很多了，我們就這開始按摩。
為什么使用 Marked.js 庫
Vue 沒有像React 那么多 MD 的插件。如 markdown-it、Remark.js、marked.js。希望在未來，會(huì)有更多好用的庫來支持我們的 Vue ，經(jīng)過一番調(diào)研，我選擇了marked.js，因?yàn)樗男切亲疃?，bug 少。
創(chuàng)建項(xiàng)目
我們使用 vue-cli 來創(chuàng)建項(xiàng)目，運(yùn)行如下命令：
- vue create marked-example
這里我們選擇最簡單的 Vue2 模板創(chuàng)建項(xiàng)目，創(chuàng)建完后的項(xiàng)目結(jié)構(gòu)如下：
- +-- src/i
- | +-- assets/
- | +-- components
- | +-- HelloWorld.vue
- | +-- App.vue
- | +-- main.js
現(xiàn)在我們在 MD 語法寫個(gè)標(biāo)題
- {{ markdown }}
運(yùn)行：
基于上面的代碼，我們希望# hello world MD 語法能在 Vue 渲染成標(biāo)題。要怎么做呢，這就需要借助 Marked.js 庫。
安裝 Marked.jsMarked 或 marked.js 是一個(gè)低級別的編譯器，幫助我們將 Markdowns 轉(zhuǎn)換成HTML。安裝一波試試水：
- npm install marked
然后，在 app.vue 中引入：
- import marked from 'marked';
渲染 markdown
渲染方法很簡單就是把我們的文本傳入 marked，結(jié)果返回是帶了標(biāo)簽的文本內(nèi)容，我們在用 v-html 渲染即可。
這里我們多寫了一個(gè) textarea 標(biāo)簽，然后用了計(jì)算屬性來實(shí)時(shí)的渲染 markdowns。運(yùn)行后的結(jié)果如下
然后，多輸入 一些 MD 語法驗(yàn)證一下：
全局引入
當(dāng)我們不想每個(gè)組件都 引入一次時(shí)，就可以聲明成全局的。怎么做?
實(shí)現(xiàn) marked 庫全局化的方法是使用 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')
當(dāng)想轉(zhuǎn)換 md時(shí)，直接在組件中調(diào)用 this.md 就可以將 md 轉(zhuǎn)成 html 了。
~完，本文內(nèi)容很簡單，因?yàn)樽罱灿玫筋愃频墓δ?，搜索這個(gè)庫，所以就分享一下，我們下期再見!
作者：Dmitri Pavlutin 譯者：前端小智
來源：blog.openreplay 原文：https://blog.openreplay.com/how-parse-and-render-markdown-in-vuejs
當(dāng)前名稱：如何在Vue中解析和渲染Markdown
URL鏈接：http://www.dlmjj.cn/article/cdjgsep.html
