本文详细介绍在Vue3项目中集成marked库进行Markdown解析，并结合highlight.js实现代码语法高亮的完整流程。涵盖依赖安装、全局指令配置、组件应用及样式自定义，帮助开发者快速构建支持富文本与代码展示的博客前端。
在Vue前端开发中，实现Markdown解析功能并针对代码块进行语法高亮是常见需求。目前Vue生态中可用的Markdown解析库较多，例如markdown-it、vue-markdown-loader、marked以及vue-markdown等，它们的功能基本相似。本文方案选定使用marked进行Markdown转HTML处理，并搭配highlight.js库来实现代码的高亮显示。
具体实现步骤如下：
一、安装依赖库
在Vue项目目录下打开终端或命令窗口，执行以下安装命令：
npm install marked -save // marked 用于将markdown转换成html
npm install highlight.js -save //用于代码高亮显示
命令执行成功后，可通过控制台输出或查看package.json文件确认已安装的依赖版本号。
二、在main.js文件中引入highlight.js及样式并创建一个自定义的全局指令
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css' //样式
//创建v-highlight全局指令
Vue.directive('highlight',function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block)=>{
hljs.highlightBlock(block)
})
})
完成上述配置后，即可在Vue组件中通过v-highlight指令调用代码高亮功能。
三、在Vue组件中应用marked解析及实现代码高亮
具体代码示例如下：
<!-- 正文输出 -->
<div class="entry-content">
<div v-highlight v-html="article" id="content"></div>
</div><script>
// 将marked 引入
import { marked }from 'marked';
export default {
name: 'articles',
data(){
return{
article:''
}
},
methods: {
getPostDetail() {
console.log('getPostDetail()'+this.id)
fetchPostDetail(this.id).then(res => {
this.postdetail=res.data
// 调用marked()方法，将markdown转换成html
this.article= marked(this.postdetail.content);
console.log(res.data)
}).catch(err => {
console.log(err)
})
},
created() {
//调用获取文章内容的接口方法
this.getPostDetail()
},
}
</script>
四、显示效果
Markdown解析及代码高亮显示效果
示例中引用的样式是 import 'highlight.js/styles/atom-one-dark.css' 。实际上，highlight.js/styles目录下提供了多种主题样式，开发者可根据个人喜好进行选用。
到此这篇关于Vue3解析markdown并实现代码高亮显示的文章就介绍到这了,更多相关Vue3解析markdown内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！