Vue3 实现解析markdown字段以及文件

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;
}