Vue3如何实现Markdown解析及代码高亮显示的详细操作流程？

本文共计510个文字，预计阅读时间需要3分钟。

目录+整体实现步骤如下：

1.安装依赖库

2.在main.js文件中引入highlight.js并创建自定义全局指令

3.在Vue组件中使用marked解析并实现代码高亮

4.展示效果：Vue实现博客

目录

• 具体实现步骤如下：
• 一、安装依赖库
• 二、在main.js文件中引入highlight.js及样式并创建一个自定义的全局指令
• 三、在Vue组件中应用marked解析及实现代码高亮
• 四、显示效果

Vue实现博客前端，需要实现markdown的解析，如果有代码则需要实现代码的高亮。
Vue的markdown解析库有很多，如markdown-it、vue-markdown-loader、marked、vue-markdown等。这些库都大同小异。这里选用的是marked，代码高亮的库选用的是highlight.js。