经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
vue 中 用showdown预览markdown文件,并用highlight.js 实现代码高亮
来源:cnblogs  作者:Ananiah  时间:2021/3/1 9:14:00  对本文有异议

showdownGithub地址: https://github.com/showdownjs/showdown

在vue项目中,通过showdown 实现markdown文件的预览,highlight.js实现代码块的高亮。

1.安装showdown
  1. npm install showdown --save
2.在组建中引入showdown
  1. import showdown from "showdown";
  2. ?
  3. var converter = new showdown.Converter();
  4. ?
  5. //显示table
  6. converter.setOption("tables", true);
3.在methods中创建方法
  1. methods: {
  2. //转换markdown为html语言
  3. compileMarkDown(val) {
  4. return converter.makeHtml(val);
  5. },
  6. }
4.请求后端接口中的数据,并使用。
  1. <div v-html="compileMarkDown(content)"></div>
5.实现代码高亮
  1. // 安装highlight.js
  2. npm install highlight.js
  3. ?
  4. // 引入文件
  5. import hljs from "highlight.js";
  6. import "highlight.js/styles/default.css"; //样式文件
  7. ?
  8. // 注册局部指令 或全局指令
  9. // 局部 定义自定义指令 v-highlight 代码高亮
  10. directives: {
        highlight: {
          update(el) {
            let blocks = el.querySelectorAll("pre code");
            blocks.forEach((block) => {
              hljs.highlightBlock(block);
            });
          },
        },
      },
  11. // 在main.js中创建全局指令
  12. // 定义自定义指令 v-highlight 代码高亮
  13. Vue.directive('highlight',function (el) {
  14. let blocks = el.querySelectorAll('pre code');
  15. blocks.forEach((block)=>{
  16. hljs.highlightBlock(block)
  17. })
  18. }),
  19. // 在html中使用 v-highlight 代码高亮指令
  20. <div v-html="compileMarkDown(content)" v-highlight></div>ID=?xoyzlub.html
6.完整代码
  1. <template>
  2. <div
  3. class="content-markdwon"
  4. v-html="compileMarkDown(content)"
  5. v-highlight
  6. >
  7. </div>
  8. </template>
  9.  
  10. <script>
  11. import { lookDoc } from "@/api/filelist";
  12. import showdown from "showdown";
  13. import hljs from "highlight.js"
  14. import 'highlight.js/styles/default.css';
  15. var converter = new showdown.Converter();
  16. //表格显示
  17. converter.setOption("tables", true);
  18. export default {
  19. // 定义自定义指令 v-highlight 代码高亮
  20. directives: {
  21. highlight: {
  22. update(el) {
  23. let blocks = el.querySelectorAll("pre code");
  24. blocks.forEach((block) => {
  25. hljs.highlightBlock(block);
  26. });
  27. },
  28. },
  29. },
  30. data() {
  31. return {
  32. content: "",
  33. };
  34. },
  35. methods: {
  36. getDocment(val) {
  37. // 请求接口
  38. lookDoc({ id: val }).then((res) => {
  39. this.content = res.data.info[0].content;
  40. });
  41. },
  42. // 转换markdown语法为html语法
  43. compileMarkDown(val) {
  44. return converter.makeHtml(val);
  45. },
  46. },
  47. };
  48. </script>
  49.  
  50. <style>
  51. </style>
6.效果图

 

原文链接:http://www.cnblogs.com/Ananiah/p/14437092.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号