vue中使用Marked实现预览md文件（base64编码图片）
在上一篇vue-markdown实现预览md文件时，后端返回的图片格式是base64格式的，试了很多方法都不能显示，因此换成了marked插件进行预览，同时也支持显示大纲目录。
上一篇传送门：https://blog.csdn.net/m0_59415345/article/details/140495057?spm=1001.2014.3001.5501
marked 介绍
- Marked 是一个高性能的 Markdown 解析器和编译器，专为速度优化而设计；
- 它是一个底层的 Markdown 编译器，能够在不依赖缓存或长时间阻塞的情况下解析 Markdown 文档；
- Marked仍然保持轻量级，使其既适用于浏览器环境，也适用于服务器端或通过命令行界面（CLI）运行；
- 广泛兼容性：实现了来自支持的Markdown风格和规范的所有特性，包括原始Markdown、CommonMark和GitHub Flavored Markdown等。
- 安全性注意事项：Marked生成的HTML输出不包含自动净化功能，因此在处理不可信的Markdown输入时，建议使用DOMPurify、sanitize-html等库来防止XSS攻击。
marked官方文档：https://marked.js.org/
marked的在线示例：https://spec.commonmark.org/dingus/
如果不确定md内容能否展示的，可以先在这上面试运行一下，如果可以显示再使用该插件，不然就换插件，节省开发时间。
一、实现预览
1、安装marked
npm install marked --save
2、引入
这里不多哔哔，直接上代码，我的版本是0.8.0，版本不同配置项也不同，需要根据自己的版本确定配置项。
<template>
<div>
<div id="content" class="api-content" v-html="markdownContent"></div>
</div>
</template>
<script>
import { marked } from "marked";
export default {
data() {
return {
markDownSrc：'',//后端获取的md文件链接
markdownContent: '',
};
},
mounted() {
this.loadMarkdownFile();
},
methods: {
async loadMarkdownFile() {
try {
//从链接中获取md文件内容
const response = await fetch(this.markDownSrc);
const markdownText = await response.text();
var rendererMD = new marked.Renderer();
//进行配置
marked.setOptions({
renderer: rendererMD,
pedantic: false,
gfm: true,
tables: true,
breaks: false,
sanitize: false,
smartLists: true,
smartypants: false,
xhtml: false
});
this.markdownContent = marked(markdownText); // 将markdown内容解析
} catch (error) {
console.error('Failed to load the Markdown file:', error);
this.$message.error('文档解析错误！');
}
},
}
};
</script>
<style></style>
3、常用配置项
| 配置名 | 类型 | 默认值 | 版本 | 说明 |
|---|---|---|---|---|
| async | boolean |
false |
4.1.0 | 如果为 true，则函数可以是异步的，并将返回一个 promise，当所有遍历令牌函数解析时，该 promise 将解析。walkTokens``marked.parse |
| breaks | boolean |
false |
0.2.7 版 | 如果为 true，则添加单个换行符（复制注释的 GitHub 行为，但不复制呈现的 Markdown 文件）。要求是 .<br>``gfm``true |
| gfm | boolean |
true |
0.2.1 版 | 如果为 true，请使用已批准的 GitHub Flavored Markdown （GFM） 规范。 |
| pedantic | boolean |
false |
0.2.1 版 | 如果为真，则尽可能符合原文。不要修复原始的 Markdown 错误或行为。关闭并覆盖 。markdown.pl``gfm |
| renderer | object |
new Renderer() |
0.3.0 版 | 一个对象，包含用于将标记呈现为 HTML 的函数。有关详细信息，请参阅扩展性。 |
| silent | boolean |
false |
0.2.7 版 | 如果为 true，则分析器不会引发任何异常或记录任何警告。任何错误都将以字符串形式返回。 |
| tokenizer | object |
new Tokenizer() |
1.0.0 版 | 一个对象，包含用于从 Markdown 创建令牌的函数。有关详细信息，请参阅扩展性。 |
| walkTokens | function |
null |
1.1.0 版 | 为每个令牌调用的函数。有关详细信息，请参阅扩展性。 |
旧配置项
| 配置名 | 类型 | 默认值 | 版本 | 说明 |
|---|---|---|---|---|
| smartLists（已删除) | boolean |
false |
0.2.8 版 | 在 v3.0.0 中删除。 |
| baseUrl（已删除) | string |
null |
0.3.9 版 | 在 v8.0.0 中删除了使用 marked-base-url 为任何相对链接添加前缀 url。 |
| headerIds（已删除) | boolean |
true |
0.4.0 版 | 在 v8.0.0 中删除了在发出标题（h1、h2、h3 等）时使用 marked-gfm-heading-id 包含属性。id |
| headerPrefix（已删除) | string |
'' |
0.3.0 版 | 在 v8.0.0 中删除了在发出标题（h1、h2、h3 等）时使用 marked-gfm-heading-id 添加字符串作为属性的前缀。id |
| 突出显示（已删除) | function |
null |
0.3.0 版 | 在 v8.0.0 中删除了使用 marked-highlight 向代码块添加高亮显示。 |
| langPrefix（已删除) | string |
'language-' |
0.3.0 版 | 在 v8.0.0 中删除了使用 marked-highlight 在块中为 className 添加前缀。对于语法突出显示很有用。<code> |
| mangle（已删除）) | boolean |
true |
0.3.4 版 | 在 v8.0.0 中移除了使用 marked-mangle 来修改电子邮件地址。 |
| sanitize（已删除) | boolean |
false |
0.2.1 版 | 在 v8.0.0 中删除了使用清理库，例如 DOMPurify（推荐）、sanitize-html 或输出 HTML！ |
| sanitizer（已删除) | function |
null |
0.3.4 版 | 在 v8.0.0 中删除了使用清理库，例如 DOMPurify（推荐）、sanitize-html 或输出 HTML！ |
| SmartyPants（已删除) | boolean |
false |
0.2.9 版 | 在 v8.0.0 中删除了使用 marked-smartypants 对引号和破折号等内容使用“智能”排版标点符号。 |
| xhtml（已删除) | boolean |
false |
0.3.2 版 | 在 v8.0.0 中删除了使用 marked-xhtml 为 void 元素（、 等）发出带有 XHTML 要求的带有“/”的自闭 HTML 标记。 |
4、扩展插件
可以使用自定义扩展来扩展标记。这是可与 一起使用的扩展列表marked.use(extension)。具体插件的使用请看插件使用的方式说明。
二、代码高亮
如果需要配置代码高亮，需要安装highlight.js，下面介绍一下如何使用。
1、安装highlight.js
npm install highlight.js --save
2、在配置项中引入
import highlight from 'highlight.js'; // 引入 highlight.js
//在marked.setOptions中添加该项配置
highlight: function (code) {
return highlight.highlightAuto(code).value;
},
注意：
如果marked的版本太高，运行时会出现Bable异常的情况，我导入了很多loader都没用。如果出现这个情况，可以通过降低marked的版本解决，需要注意的是，有些配置根据版本已删除。安装插件时，请关注marked的版本与插件版本是否适配，如果不适配项目也会报错。
三、效果展示
注意：
如果marked的版本太高，运行时会出现Bable异常的情况，我导入了很多loader都没用。如果出现这个情况，可以通过降低marked的版本解决，需要注意的是，有些配置根据版本已删除。安装插件时，请关注marked的版本与插件版本是否适配，如果不适配项目也会报错。
三、效果展示
