如何在vue中渲染markdown内容？

引言

在现代 Web 开发中，Markdown 作为一种轻量级的标记语言，广泛用于文档编写、内容管理以及富文本编辑器中。markdown-it 是一个非常流行的 JavaScript 库，用于解析和渲染 Markdown 内容。本文将详细介绍如何在 Vue 项目中使用 markdown-it 插件来渲染 Markdown 内容，并提供一些实用的配置和优化建议。

---

什么是 markdown-it？

markdown-it 是一个高度可配置的 Markdown 解析器，支持扩展和插件机制。它具有以下特点：

• 高性能：快速解析和渲染 Markdown 内容。
• 可扩展性：支持通过插件扩展功能。
• 兼容性：支持 CommonMark 规范，并可配置以支持其他 Markdown 扩展。
• 灵活性：可以轻松集成到各种 JavaScript 框架中，如 Vue、React 等。

---

安装 markdown-it

首先，我们需要在 Vue 项目中安装 markdown-it。你可以使用 npm 或 yarn 来安装：

npm install markdown-it

或者

yarn add markdown-it

---

基本用法

安装完成后，我们可以在 Vue 组件中使用 markdown-it 来解析和渲染 Markdown 内容。以下是一个简单的示例：

<template><div><h1>Markdown 渲染示例</h1><div class="markdown-body" v-html="markdownContent"></div></div>
</template><script lang="ts" setup>
import markdownit from 'markdown-it'; const md = markdownit();const markdownText = `# 标题这是一个简单的 Markdown 示例。- 列表项 1- 列表项 2- 列表项 3**粗体文本** 和 *斜体文本*\`\`\`javascriptconst hello = 'world';console.log(hello);\`\`\``;const markdownContent =  md.render(markdownText );   
</script><style>
/* 添加一些基本样式 */
.markdown-body {font-size: 16px;line-height: 1.6;color: #333;
}.markdown-body h1 {font-size: 24px;margin-bottom: 10px;
}.markdown-body ul {margin-left: 20px;
}.markdown-body li {margin-bottom: 5px;
}.markdown-body strong {font-weight: bold;
}.markdown-body em {font-style: italic;
}.markdown-body a {color: #007bff;text-decoration: none;
}.markdown-body a:hover {text-decoration: underline;
}.markdown-body pre {background-color: #f4f4f4;border-radius: 5px;padding: 10px;overflow-x: auto;
}.markdown-body code {font-family: "Courier New", Courier, monospace;background-color: #f1f1f1;padding: 2px 6px;border-radius: 3px;
}
</style>

样式失效？

当在Vue的style标签中设置了scope属性，你会发现.markdown-body后面设置样式并不会生效，原因如下：

当你在 Vue 组件中使用 scoped 样式时，样式会被限制在当前组件内，以避免样式冲突。然而，使用 v-html 渲染的内容不会受到 scoped 样式的限制，因为 v-html 插入的内容是动态生成的，并且不会被 Vue 的作用域样式处理。这会导致 v-html 渲染的内容样式失效。

解决方法

有几种方法可以解决这个问题：

1. 移除 scoped 样式：

   • 如果你希望样式对整个应用生效，可以移除 scoped 属性。

2. 使用深度选择器：

   • 如果你必须使用 scoped 样式，vue3中可以使用深度选择器 :deep() 或 ::v-deep 来确保样式应用到 v-html 内容。

3. 全局样式：

   • 将样式放在全局样式文件中，而不是组件的 style 部分。

---

高级配置

语法高亮

为了支持代码块的语法高亮，我们可以使用 markdown-it-highlightjs 插件。

1. 安装插件：

   npm install markdown-it-highlightjs highlight.js
   

2. 配置插件：

   <template><div><h1>Markdown 渲染示例</h1><div class="markdown-body" v-html="markdownContent"></div></div>
   </template><script>
   import markdownit from 'markdown-it';
   import hljs from 'highlight.js';
   import 'highlight.js/styles/default.css'; // 你可以选择其他样式const md = markdownit({highlight: function (str, lang) {if (lang && hljs.getLanguage(lang)) {try {return '<pre class="hljs"><code>' +hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +'</code></pre>';} catch (__) {}}return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';}});
   </script> 
   

3. 安装 markdown-it-highlightjs 和 highlight.js：

   npm install markdown-it-highlightjs highlight.js
   

4. 引入 highlight.js 样式：

   import 'highlight.js/styles/default.css'; // 你可以选择其他样式
   

5. 配置 markdown-it 使用 highlight.js：

   const md = markdownit({highlight: function (str, lang) {if (lang && hljs.getLanguage(lang)) {try {return '<pre class="hljs"><code>' +hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +'</code></pre>';} catch (__) {}}return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';}
   });
   

6. 添加 highlight.js 样式：

   .markdown-body .hljs {background: #f4f4f4;border-radius: 5px;padding: 10px;overflow-x: auto;
   }.markdown-body .hljs code {background: none;padding: 0;
   }
   

效果展示