在封装组件库的路上 碰到了一个问题,展示md文档! 网上很多办法只是单纯的将md文件转成了html,找了很多资料。最后发现很简单!

<>1.webpack.base.conf.js 中加入
{ test:/\.md$/, loader:'vue-markdown-loader', // options:vueMarkdown, },
vue3.0 vue.config.js module.exports = { chainWebpack: config => { config.module
.rule('md') .test(/\.md$/) .use('vue-loader') .loader('vue-loader') .end()
.use('vue-markdown-loader')
.loader('vue-markdown-loader/lib/markdown-compiler') .options({ raw: true }) }
<>2.cnpm i vue-markdown-loader -D

安装插件。

<>3.cnpm install github-markdown-css

这时候md文件只是转成了vue得组件 缺少相应的样式 网上找了很久 github-markdown-css
并且引入样式
import 'github-markdown-css/github-markdown.css'
<>4.容器

问题:最后发现代码的高亮无法显示。

找到对应的css 手动在项目的commong.less中添加

这是一个笨的方法,如果有好的支持高亮,麻烦分享下哈

技术
今日推荐
PPT
阅读数 121
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信