注

https://www.npmjs.com/package/marked

marked 是一个非常流行的 JavaScript Markdown 解析器，可以将 Markdown 语法转换为 HTML，适用于前端和 Node.js 环境。它性能高、体积小、支持扩展，常用于博客系统、文档系统、Markdown 编辑器等项目中。

---

🏷️ Demo

# hello

hello

<script setup lang="ts">
import { ref, computed } from "vue";
import { marked } from "marked";

const input = ref("# hello");

const compiledMarkdown = computed(() => {
  return marked(input.value);
});
</script>

<template>
  <div id="editor">
    <textarea v-model="input" rows="10" cols="30"></textarea>
    <div v-html="compiledMarkdown"></div>
  </div>
</template>

<style lang="scss" scoped>
#editor {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  textarea {
    resize: none;
    border: none;
    outline: none;
    padding: 10px;
    border: 1px solid #ccc;
  }

  :deep(h2) {
    padding: 0;
    margin: 0;
  }

  :deep(p) {
    padding: 0;
    margin: 0;
    line-height: 1.5;
  }

  :deep(ul) {
    margin: 0;
  }
}
</style>

🌟 基本介绍

• 官网：https://marked.js.org/
• GitHub：https://github.com/markedjs/marked
• 安装方式：

  npm install marked
  # 或者
  pnpm add marked

---

📌 基本用法

import { marked } from "marked";

const markdownString = "# Hello\n\nThis is **Markdown** text!";
const html = marked(markdownString);

console.log(html);
// 输出：<h1>Hello</h1><p>This is <strong>Markdown</strong> text!</p>

---

⚙️ 配置项（options）

marked 提供了很多配置选项用于自定义 Markdown 的解析行为：

marked.setOptions({
  gfm: true, // 支持 GitHub Flavored Markdown
  breaks: true, // 支持换行
  smartypants: true, // 更漂亮的引号等排版
  headerIds: false, // 是否为标题生成 id
});

---

🧩 自定义渲染器（Renderer）

你可以使用 Renderer 来定制不同 Markdown 语法生成的 HTML，比如想修改 link 的打开方式：

const renderer = {
  link(href, title, text) {
    return `<a href="${href}" target="_blank">${text}</a>`;
  },
};

marked.use({ renderer });

---

🧪 支持语法高亮

marked 本身不带语法高亮功能，但你可以结合 highlight.js 一起用：

import hljs from "highlight.js";
import "highlight.js/styles/github.css";

marked.setOptions({
  highlight: (code, lang) => {
    return hljs.highlightAuto(code).value;
  },
});

---

✅ 优点

• 支持 CommonMark 和 GFM（GitHub Flavored Markdown）
• 性能强劲（比很多解析器都快）
• 可扩展性强（可自定义渲染器）
• 兼容性好，可用于浏览器和 Node.js

---

🚫 注意事项

• marked 只负责解析，不负责 DOM 渲染。
• 解析后的 HTML 若直接插入页面，要注意 XSS 安全问题，可以配合 DOMPurify 进行 HTML 消毒。

import DOMPurify from "dompurify";

const safeHtml = DOMPurify.sanitize(marked(mdText));

---

如果你有具体使用场景（比如 Nuxt / Vue / React），我也可以给你配合方案 😄