vue中使用Marked实现预览md文件（base64编码图片）

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)。具体插件的使用请看插件使用的方式说明。

名字	软件包名称	描述
Admonition	marked-admonition-extension	告诫扩展
Alert	marked-alert	启用 GFM 警报
Base URL	marked-base-url	在相对 URL 前加上基本 URL。
Bidi	marked-bidi	向 HTML 添加双向文本支持
Code Format	marked-code-format	使用 Prettier 格式化代码块
Code JSX Renderer	marked-code-jsx-renderer	使用自定义渲染器和组件渲染 JSX 代码块
Code Preview	marked-code-preview	将代码块转换为代码预览
Custom Heading ID	marked-custom-heading-id	使用 Markdown 扩展语法在标题中指定自定义标题 ID # heading {#custom-id}
Directive	marked-directive	支持指令语法
Emoji	marked-emoji	添加表情符号支持，就像在 GitHub 上一样
Extended Tables	marked-extended-tables	扩展标准 Github-Flavored 表以支持高级功能：列跨、行跨、多行标题
Footnote	marked-footnote	启用 GFM 脚注
GFM Heading ID	marked-gfm-heading-id	使用 github-slugger 创建标题 ID 并允许自定义前缀。
Highlight	marked-highlight	突出显示代码块
Katex Code	marked-katex-extension	渲染 katex 代码
LinkifyIt	marked-linkify-it	将 linkify-it 用于 urls
Mangle	marked-mangle	带有 HTML 字符引用的 Mangle mailto 链接
Misskey-flavored Markdown	marked-mfm	Misskey 风味 Markdown 的自定义扩展。
Plaintify	marked-plaintify	将 Markdown 转换为明文
Shiki	marked-shiki	集成 Shiki 语法高亮
Sequential Hooks	marked-sequential-hooks	在顺序钩子中启用顺序预处理和后处理
Smartypants	marked-smartypants	使用 smartypants 对引号和破折号等内容使用“智能”排版标点符号。
Smartypants lite	marked-smartypants-lite	一个更快、更轻量级的标记智能裤子版本，它不使用任何外部依赖项来为引号和破折号等内容创建“智能”排版标点符号。
XHTML	marked-xhtml	根据 XHTML 的要求，为 void 元素（ 、 等）发出带有“/”的自闭合 HTML 标记。

二、代码高亮

如果需要配置代码高亮，需要安装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的版本与插件版本是否适配，如果不适配项目也会报错。

三、效果展示