<think>我们在
Vue2中
展示Markdown内容，通常需要以下步骤：
1. 将
Markdown文本转换为HTML字符串。
2. 在
Vue组件中安全地渲染HTML字符串（避免XSS攻击）。
3. 如果需要代码高亮，则引入代码高亮库。
我们可以使用第三方库如`marked`或`
markdown-it`来解析
Markdown，然后使用`
vue`的`v-html`指令来渲染HTML内容。但是，直接使用`v-html`会有XSS风险，所以我们需要对
Markdown内容进行清理（例如使用`DOMPurify`）或者确保内容来源可信。
另外，对于代码高亮，我们可以使用`highlight.js`。
以下是具体步骤：
步骤1：安装依赖
我们可以使用`
markdown-it`（或`marked`）和`highlight.js`，以及用于清理HTML的`DOMPurify`（可选，但推荐）。
安装：
```bash
npm install
markdown-it highlight.js dompurify --save
# 或者使用marked
# npm install marked highlight.js dompurify --save
```
步骤2：创建
Markdown解析工具
我们可以创建一个工具函数来解析
Markdown并高亮代码。
步骤3：在
Vue组件中使用
这里以`
markdown-it`为例：
1. 创建工具函数（例如`
markdownParser.js`）：
```javascript
import
MarkdownIt from '
markdown-it';
import hljs from 'highlight.js';
import DOMPurify from 'dompurify';
// 创建
markdown-it实例，并配置高亮
const md = new
MarkdownIt({
html: true, // 允许在
markdown中使用html标签
linkify: true, // 自动转换链接
typographer: true, // 优化排版
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(str, { language: lang }).value;
} catch (__) {}
}
return ''; // 使用默认的高亮处理
}
});
// 解析
Markdown并清理HTML
export function parse
Markdown(content) {
// 将
markdown内容转换为HTML
const html = md.render(content);
// 使用DOMPurify清理HTML，防止XSS攻击
return DOMPurify.sanitize(html);
}
```
2. 在
Vue组件中使用：
我们可以在组件中导入这个工具函数，然后使用`v-html`指令来渲染解析后的HTML。
```
vue
<template>
<div class="
markdown-content" v-html="parsed
Markdown"></div>
</template>
<script>
import { parse
Markdown } from './
markdownParser';
export default {
props: {
markdown: {
type: String,
default: ''
}
},
computed: {
parsed
Markdown() {
return parse
Markdown(this.
markdown);
}
}
};
</script>
<style>
/* 引入highlight.js的样式 */
@import 'highlight.js/styles/github.css';
/* 可以自定义一些
markdown样式 */
.
markdown-content {
/* 添加你需要的样式 */
}
</style>
```
注意：由于`DOMPurify`在Node.js环境中也可以运行，但在浏览器中更安全，所以这里我们直接使用。如果是在服务端渲染（SSR）中，需要确保`DOMPurify`在正确的环境中运行。
另外，我们也可以使用`marked`代替`
markdown-it`，方法类似。
如果不想使用`DOMPurify`，那么请确保你的
Markdown内容来源是可信的，否则直接使用`v-html`会有安全风险。
步骤4：代码高亮样式
我们引入了`highlight.js`的样式，你可以选择其他主题，只需替换`github.css`为其他主题名称即可。
优化：为了避免每次解析都重新创建解析器，我们可以将解析器实例放在模块作用域中（如上所示）。
另外，如果项目中有很多地方需要
展示Markdown，也可以将其封装为全局组件。
以上就是在
Vue2中
展示Markdown内容的基本方法。
相关问题：
1. 如何在
Vue2中安全地渲染HTML字符串？
2. 如何实现
Markdown中的代码高亮？
3. 在
Vue2中，如何将
Markdown解析为
Vue组件（而不是HTML字符串）以实现更灵活的交互？</think>在
Vue 2 中渲染
Markdown 内容，可以通过以下步骤实现：
### 解决方案步骤
1. **安装依赖**：
```bash
npm install marked dompurify highlight.js
# 或
yarn add marked dompurify highlight.js
```
2. **创建
Markdown 解析工具**（`
markdownParser.js`）：
```javascript
import marked from 'marked';
import DOMPurify from 'dompurify';
import hljs from 'highlight.js';
// 配置 marked
marked.setOptions({
highlight: (code, lang) => {
if (lang && hljs.getLanguage(lang)) {
return hljs.highlight(lang, code).value;
}
return hljs.highlightAuto(code).value;
},
langPrefix: 'hljs language-'
});
// 解析并清理
Markdown
export function parse
Markdown(content) {
const rawHtml = marked(content);
return DOMPurify.sanitize(rawHtml); // 防 XSS 攻击
}
```
3. **创建
Vue 组件**（`
MarkdownRenderer.
vue`）：
```
vue
<template>
<div class="
markdown-content" v-html="parsedContent"></div>
</template>
<script>
import { parse
Markdown } from './
markdownParser';
export default {
props: {
content: {
type: String,
required: true
}
},
computed: {
parsedContent() {
return parse
Markdown(this.content);
}
}
};
</script>
<style>
/* 引入代码高亮样式 */
@import 'highlight.js/styles/github.css';
/* 自定义
Markdown 样式 */
.
markdown-content {
line-height: 1.6;
}
.
markdown-content pre {
padding: 12px;
border-radius: 4px;
overflow: auto;
}
</style>
```
4. **在父组件中使用**：
```
vue
<template>
<div>
<
markdown-renderer :content="
markdownText" />
</div>
</template>
<script>
import
MarkdownRenderer from './components/
MarkdownRenderer';
export default {
components: {
MarkdownRenderer },
data() {
return {
markdownText: `
#
Vue 2
Markdown 渲染
## 代码示例
\`\`\`javascript
//
Vue 2 示例
new
Vue({
el: '#app',
data: { message: 'Hello
Markdown!' }
})
\`\`\`
[查看文档](https://
vuejs.org)
`
};
}
};
</script>
```
### 关键点说明
1. **安全处理**：
- 使用 `DOMPurify` 对 HTML 进行消毒，防止 XSS 攻击
- 避免直接使用 `v-html` 渲染未处理的原始内容
2. **代码高亮**：
- 通过 `highlight.js` 实现代码块高亮
- 支持 180+ 种编程语言的自动检测
3. **样式定制**：
- 通过 CSS 自定义
Markdown 元素的样式
- 可替换 `github.css` 为其他高亮主题（如 `monokai.css`）
### 备选方案
如果遇到 SSR 兼容性问题（如
Nuxt.js），可改用 `
markdown-it`：
```javascript
import
MarkdownIt from '
markdown-it';
import hljs from 'highlight.js';
const md = new
MarkdownIt({
highlight: (str, lang) => {
if (lang && hljs.getLanguage(lang)) {
return `<pre><code class="hljs">${hljs.highlight(lang, str).value}</code></pre>`;
}
return `<pre><code>${md.utils.escapeHtml(str)}</code></pre>`;
}
});
```
### 注意事项
1. 避免在服务端渲染中使用 `DOMPurify`（需替换为 `isomorphic-dompurify`）
2. 复杂交互需求（如自定义组件）可考虑 [
vue-
markdown](https://github.com/miaolz123/
vue-
markdown) 插件
3. 图片资源需额外处理相对路径转换
> 示例代码实现了安全的
Markdown 渲染方案，包含代码高亮和 XSS 防护[^1]
本文介绍了一款将Markdown语法转换为HTML的简洁工具——showdown。通过直接引用BootCDN上的链接，无需额外安装即可在项目中使用。文章详细展示了如何在Nuxt和Vue环境中引入并使用showdown，包括实例化转换器和将Markdown字符串转化为HTML的过程。
扫一扫
3797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
