【GHS】vue 导入.md文件(markdown转HTML)

编程开发   © 文章版权由 admin 解释,禁止匿名转载

#楼主# 2020-12-30

需求  vue项目中可以良好展示markdown(只是展示功能 没有编辑功能)痛点问题.md文件类型,直接模块加载(只有字符串,这得多难受,怎么维护呢),还是一个文件一个文件的好维护并且好修改复用用第三方插件,只是md转HTML,不带样式的(重点强调 没有样式没有样式)解决方案一、vue需要有markdown这样良好的展示效果,什么样的插件是最好的?  货比三家,我推荐以下方式复制代码//安装npm install --save html-loader;npm install -- save markdown-loader;//webpack { test: /\.md$/, loader: "html-loader", }, { test: /\.md$/, loader: "markdown-loader" }复制代码  大坑预警:我不知道在哪里抄的配置,一定不要配置option(配置了的话表格 代码 都不能好好转化)  以上真的就完成了转化了。是不是so easy !!! 再来换个皮肤(穿上衣服) 二、一定要引用CSS,找了很多样式真的都特别的丑(当然可以自己写,但是费时间啊)  强烈推荐复制代码npm install github-markdown-cssimport 'github-markdown-css'; //哪里用markdown 就在哪里引用 可以放在min.js//自己也可以再调整调整 (贡献一版 我们调整的一版样式).markdown-body { padding: 20px; min-width: 200px; max-width: 900px; font-size: 12px; h2 { font-size: 18px; margin: 1em 0 15px; padding-top: 0.8em; padding-bottom: 0.8em; } h3 { font-size: 14px; margin: 22px 0 16px; } h4 { font-size: 13px; margin: 20px 0 16px; } h5 { font-size: 12px; margin: 16px 0 16px; font-weight: 700; } p { font-size: 12px; line-height: 24px; color: #666666; margin-top: 0px; margin: 8px 0; margin: 14px 0 14px; } pre { background-color: #eee; margin-bottom: 8px; margin-top: 8px; margin: 12px 0 12px; } blockquote { margin-bottom: 8px; margin-top: 8px; margin: 14px 0 14px; background-color: #eee; padding: 16px 16px; } tr { background-color: #f5f5f5; } code { background-color: #eee; } ul, ol, li { list-style: unset; font-size: 12px; line-height: 20px; color: #666666; margin-top: 0px; margin: 8px 0; } blockquote { border-color: #48b6e2; } table { display: table; width: 100%; max-width: 100%; margin-bottom: 20px; }}

成为第一个回答人

评论

登录后才可发表内容
  • 主题

    10

  • 帖子

    48

  • 关注者

    0

Copyright © 2019 凯特网.   Powered by HYBBS 2.3.4  

Runtime:0.0926s Mem:2048Kb