當(dāng)前位置:首頁 >  站長 >  編程技術(shù) >  正文

nuxt+vue項目中要實現(xiàn)展示markdown文件

 2020-11-05 14:23  來源: 田珊珊個人博客   我來投稿 撤稿糾錯

  域名預(yù)訂/競價,好“米”不錯過

1、安裝依賴

npm i markdown-loader html-loader --save

npm i showdown --save

2、配置nuxt.config.js文件

build: {

transpile: [/^element-ui/],

/*

** You can extend webpack config here

*/

extend (config, { isDev, isClient }) {

config.module.rules.push({

test: /\.md$/,

use: [

{loader: 'html-loader'},

{loader: 'markdown-loader', options: {}}

],

})

}

},

3、markdown文件引入并轉(zhuǎn)換

import readme from '~/static/api.md';

Vue.prototype.md2html = (md)=> {

let converter = new showdown.Converter()

let text = md.toString()

let html = converter.makeHtml(text)

return html

}

調(diào)用:this.md2html(readme);

本博主想把代碼全部拷過來,但是又覺得那樣別人會直接不懂腦筋的抄襲,所以最后一步留了一點(diǎn)點(diǎn),只要稍微用心一下就能看懂的哦。

文章來源:田珊珊個人博客

來源地址:http://www.tianshan277.com/836.html

申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)文章

熱門排行

信息推薦