在Vue中将MarkDown转换成HTML显示,代码块高亮显示，最近博主在写自己的项目时遇到了个问题就是，如果后端存储的markdown形式的文章内容怎么以HTML的形式展现到页面上，这就引入出了我们的marked。
文章目录
- marked highlight 安装
- 安装中常见的error处理
- marked配置
- 代码块高亮:
marked highlight 安装
我这里用的npm
marked ：将MarkDown转换成HTML显示
highlight: 将代码块根据语言进行高亮显示
npm install marked --save
npm install highlight.js
安装中常见的error处理
在安装markdown的时候可能会出现安装失败的error，大致的错误信息中可能会有
node >= 18 的字样 这里就是表示要安装marked，你的node版本必须大于等于18，可以检查自己的node是否大于18，如果小于18，要更换到18以上的版本。
marked配置
导入marked
import { marked } from "marked";
配置marked的选项
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
pedantic: false,
sanitize: false,
});
渲染markdown
data(){
return{
Article:"", //这里接收的后端传过来，未经过渲染的文章
blog:"", // 这里用来接收经过marked渲染过的文章
}
}
methods: {
async getArticalById(ArticleId) {
const res = await Api.articleApi.getArticleById(ArticleId);
console.log(res);
this.Article = res.data;
//关键在这里,我们将将文章通过marked方法进行渲染
this.blog = marked(this.Article.content);
},
},
我们将要放置的内容的位置上加入 v-html 用vue进行html的解析,
其中的markdown-body是渲染后的样式，大家可以自己去设置自己的样式。
<div v-html="blog" class="markdown-body"></div>
这里我们去查看一下页面就发现我们的代码区域都有了，即便是在图床中的图片也出现了。证明我们的解析没有错误。
原数据库存储:
当前页展示
代码块高亮:
在我们的main.js中引入highlight：
hljs: 我们的highlight渲染
‘highlight.js/styles/atom-one-dark.css’ ：highlight的主题样式
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css'
在new Vue()的上方添加
Vue.directive('highlight',function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block)=>{
hljs.highlightBlock(block)
})
})
接着我们的highlight配置基本完毕，我们只需要添加v-highlight在我们的内容上即可
<div v-html="blog" class="markdown-body" v-highlight></div>
再次检查我们的页面会发现我们的代码区域已经变亮了
我们通过F12去检查我们的代码区域会发现它已经帮我们自动识别了语言的类型:
再换一种语言，也是一样。
到这里我们的基本配置也完成，成功的从MarkDown转换成HTML。
