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

npminstall 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)

。具体插件的使用请看插件使用的方式说明。
名字软件包名称描述Admonitionmarked-admonition-extension告诫扩展Alertmarked-alert启用 GFM 警报Base URLmarked-base-url在相对 URL 前加上基本 URL。Bidimarked-bidi向 HTML 添加双向文本支持Code Formatmarked-code-format使用 Prettier 格式化代码块Code JSX Renderermarked-code-jsx-renderer使用自定义渲染器和组件渲染 JSX 代码块Code Previewmarked-code-preview将代码块转换为代码预览Custom Heading IDmarked-custom-heading-id使用 Markdown 扩展语法在标题中指定自定义标题 ID

# heading {#custom-id}

Directivemarked-directive支持指令语法Emojimarked-emoji添加表情符号支持，就像在 GitHub 上一样Extended Tablesmarked-extended-tables扩展标准 Github-Flavored 表以支持高级功能：列跨、行跨、多行标题Footnotemarked-footnote启用 GFM 脚注GFM Heading IDmarked-gfm-heading-id使用 github-slugger 创建标题 ID 并允许自定义前缀。Highlightmarked-highlight突出显示代码块Katex Codemarked-katex-extension渲染 katex 代码LinkifyItmarked-linkify-it将 linkify-it 用于 urlsManglemarked-mangle带有 HTML 字符引用的 Mangle mailto 链接Misskey-flavored Markdownmarked-mfmMisskey 风味 Markdown 的自定义扩展。Plaintifymarked-plaintify将 Markdown 转换为明文Shikimarked-shiki集成 Shiki 语法高亮Sequential Hooksmarked-sequential-hooks在顺序钩子中启用顺序预处理和后处理Smartypantsmarked-smartypants使用 smartypants 对引号和破折号等内容使用“智能”排版标点符号。Smartypants litemarked-smartypants-lite一个更快、更轻量级的标记智能裤子版本，它不使用任何外部依赖项来为引号和破折号等内容创建“智能”排版标点符号。XHTMLmarked-xhtml根据 XHTML 的要求，为 void 元素（
、 等）发出带有“/”的自闭合 HTML 标记。

二、代码高亮

如果需要配置代码高亮，需要安装

highlight.js

，下面介绍一下如何使用。

1、安装highlight.js

npminstall 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的版本与插件版本是否适配，如果不适配项目也会报错。

三、效果展示