【凤凰社】 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.效果图

 


0 评论

回复