Vue实现博客前端，需要实现markdown的解析，如果有代码则需要实现代码的高亮。
Vue的markdown解析库有很多，如markdown-it、vue-markdown-loader、marked、vue-markdown等。这些库都大同小异。这里选用的是marked。
一、安装依赖库
在vue项目下打开命令窗口，并输入以下命令
npm install marked -save
其marked官网地址
- 为速度而生
- 低级编译器，用于解析无缓存或长时间阻塞的标记
- 轻量级，同时实现所有的降价功能从支持的口味和规格
- 在浏览器、服务器或命令行界面(CLI)中工作
二、在Vue组件中应用marked解析
<template>
<div
v-html="
marked(
'### 代办事项\n - 事项1\n - 事项2'
)
"
></div>
</template>
<script setup>
import { marked }from 'marked';
</script>
三、在文件中引用md文件解析
安装axios，使用请求回来的数据来进行解析。
1、安装axios
npm install axios --save
2、axios使用
<template>
<div v-html="compiledMarkdown"></div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { marked }from 'marked';
const compiledMarkdown = ref('');
onMounted(async () => {
const response = await axios.get('./demo.md');
compiledMarkdown.value = marked(response.data);
})
</script>
四、实现代码高亮并创建自定义全局指令
安装highlight.js，用于代码高亮显示。
只针对markdown文件里的代码块进行代码高亮
1、安装axios
npm install highlight.js --save
2、在main.js文件
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css' //样式
const app = createApp(App);
//创建v-highlight全局指令
app.directive('highlight',function (el) {
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block)=>{
hljs.highlightBlock(block)
})
})
3、效果图
五、实现常规markdown解析样式
marked只是帮你把md标签解析成html标签而已，样式可以自己写或者搭配插件使用
/* 引用块的样式 */
:deep(blockquote) {
display: block;
padding-left: 16px;
padding-right: 16px;
margin: 0 0 24px;
border-left: 8px solid #dddfe4;
background-color: #eef0f4;
overflow: auto;
word-break: normal;
}
/** 代码引用 */
:deep(code:not(.hljs)) {
padding: 2px 4px;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 2px;
}
