互联网技术 · 2024年2月14日 0

在nuxt+vue项目中展示markdown文件的实现方式

1、安装依赖

npm i markdown-loader html-loader –save

npm i showdown –save

2、配置nuxt.config.js文件

build: {

transpile: [/^element-ui/],

extend (config, { isDev, isClient }) {

config.module.rules.push({

test: /.md$/,

use: [

{loader: html-loader},

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

],

})

}

},

3、markdown文件引入并转换

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

}

调用:this.md2html(readme);

本博主想把代码全部拷过来,但是又觉得那样别人会直接不懂脑筋的抄袭,所以最后一步留了一点点,只要稍微用心一下就能看懂的哦。

文章来源:田珊珊个人博客

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