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.效果圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/262870.html
標籤：其他
上一篇：JavaScriptBOM操作