欢迎光临
我的个人博客网站

vue 中 用showdown预览markdown文件,并用highlight.js 实现代码高亮

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

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

1.安装showdown
npm install showdown --save

2.在组建中引入showdown
import showdown from "showdown"; ​ var converter = new showdown.Converter(); ​ //显示table converter.setOption("tables", true);

3.在methods中创建方法
methods: {     //转换markdown为html语言     compileMarkDown(val) {       return converter.makeHtml(val);     },  }

4.请求后端接口中的数据,并使用。
<div v-html="compileMarkDown(content)"></div>

5.实现代码高亮
// 安装highlight.js npm install highlight.js ​ // 引入文件 import hljs from "highlight.js"; import "highlight.js/styles/default.css"; //样式文件 // 注册局部指令 或全局指令 // 局部 定义自定义指令 v-highlight 代码高亮 directives: {
    highlight: {
      update(el) {
        let blocks = el.querySelectorAll("pre code");
        blocks.forEach((block) => {
          hljs.highlightBlock(block);
        });
      },
    },
  },
// 在main.js中创建全局指令 // 定义自定义指令 v-highlight 代码高亮 Vue.directive('highlight',function (el) { let blocks = el.querySelectorAll('pre code'); blocks.forEach((block)=>{ hljs.highlightBlock(block) }) }), // 在html中使用 v-highlight 代码高亮指令 <div v-html="compileMarkDown(content)" v-highlight></div>ID=?xoyzlub.html

6.完整代码
<template>     <div       class="content-markdwon"       v-html="compileMarkDown(content)"       v-highlight     >     </div> </template>  <script> import { lookDoc } from "@/api/filelist"; import showdown from "showdown"; import hljs from "highlight.js" import 'highlight.js/styles/default.css'; var converter = new showdown.Converter(); //表格显示 converter.setOption("tables", true); export default {    // 定义自定义指令 v-highlight 代码高亮   directives: {     highlight: {       update(el) {         let blocks = el.querySelectorAll("pre code");         blocks.forEach((block) => {           hljs.highlightBlock(block);         });       },     },   },   data() {     return {       content: "",     };   },   methods: {     getDocment(val) {        // 请求接口       lookDoc({ id: val }).then((res) => {         this.content = res.data.info[0].content;       });     },      // 转换markdown语法为html语法     compileMarkDown(val) {       return converter.makeHtml(val);     },   }, }; </script>  <style> </style>

6.效果图

vue 中 用showdown预览markdown文件,并用highlight.js 实现代码高亮

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » vue 中 用showdown预览markdown文件,并用highlight.js 实现代码高亮
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏