vue显示markdown文件
vue显示md文件
环境搭建
<1>安装依赖库
cnpm i markdown-loader html-loader --save
cnpm i showdown --save
<2>build/webpack.base.conf.js添加
{
test: /\.md$/,
use: [
{ loader: 'html-loader' },
{ loader: 'markdown-loader', options: {} }
]
}
<3>main.js添加函数
import showdown from 'showdown'
Vue.prototype.md2html = (md)=> {
let converter = new showdown.Converter()
let text = md.toString()
let html = converter.makeHtml(text)
return html
}
页面中显示md文件
<1>导入需要的md文件, 注意需要添加后缀名
import readme from '../../README.md'
<2>data定义变量
data(){
return {
readme:this.md2html(readme)
}
}
<3>在模板中显示md文件
<div v-html="readme">
如何实现语法高亮
核心: showdown-highlight, highlight.js
<1> 导入几个库
cnpm install showdown-highlight --save
cnpm install highlight.js --save
<2> 处理代码区域
showdown改成这个样子, 做的操作 先导入showdownHighlight, 在给showdown初始化添加扩展
//showdown
import showdown from 'showdown'
var showdownHighlight = require("showdown-highlight")
Vue.prototype.md2html = (md)=> {
let converter = new showdown.Converter({
extensions:[showdownHighlight]
})
let text = md.toString()
let html = converter.makeHtml(text)
return html
}
<3>应用样式
//main.js
import hljs from 'highlight.js/lib/highlight';
import 'highlight.js/styles/monokai-sublime.css';
//具体样式参考官网: https://highlightjs.org/
如何在md文件中添加资源文件
显示图片
<img src="/static/images/5-vue/test.jpg" width="300" />
显示视频
<video src="/static/images/5-vue/20190509_191927.mp4" controls width="300" ></video>
显示能下载文件
源代码: <a href="/static/images/5-vue/test.rar" >下载</a> html文件: <a href="/static/images/5-vue/test.html" download>下载</a> js文件: <a href="/static/images/5-vue/test.js" >下载</a>