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

<code>npm install marked --save

2、引入

这里不多哔哔，直接上代码，我的版本是0.8.0，版本不同配置项也不同，需要根据自己的版本确定配置项。

<template>

<div>

<div id="content" class="api-content" v-html="markdownContent"></div>code>

</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、常用配置项