Marked 开源项目教程

2024-08-16 18:02:49作者：范靓好Udolf

Marked是一款轻量级且高效的Markdown解析器，适用于浏览器、服务器及命令行环境。它专为速度优化，采用底层编译技术，避免长时间阻塞或缓存，确保快速响应。支持多种Markdown特性及规范，完美适应现代开发需求。无论你是要构建动态网站、编写文档还是简单地命令行转换文本，Marked都能轻松应对。请注意，它不负责HTML输出的自动净化，请手动集成如DOMPurify等库保障安全性。想体验其强大功能？不妨一试其在线演示，或通过NPM轻松集成到你的项目中，让文档创作与呈现既快捷又灵活。

项目地址：https://gitcode.com/gh_mirrors/mar/marked

项目介绍

Marked 是一个用于解析 Markdown 的低级编译器，旨在快速且轻量级地实现所有支持的 Markdown 风格和规范。它可以在浏览器、服务器或命令行接口（CLI）中运行。Marked 不使用缓存，也不会长时间阻塞，确保了高效的解析性能。

项目快速启动

安装

通过 npm 安装

npm install -g marked

在浏览器中使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
</head>
<body>
  <div id="content"></div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    document.getElementById('content').innerHTML = marked.parse('# Marked in the browser\n\nRendered by **marked**');
  </script>
</body>
</html>

使用 CLI

# 示例：使用标准输入
$ marked -o hello.html
hello world
^D
$ cat hello.html
<p>hello world</p>

应用案例和最佳实践

案例一：静态博客生成器

使用 Marked 可以轻松地将 Markdown 文件转换为 HTML，适用于构建静态博客。以下是一个简单的示例：

const fs = require('fs');
const marked = require('marked');

fs.readFile('post.md', 'utf8', (err, data) => {
  if (err) throw err;
  const html = marked.parse(data);
  fs.writeFile('post.html', html, (err) => {
    if (err) throw err;
    console.log('Post has been converted to HTML!');
  });
});

最佳实践

安全使用：由于 Marked 不 sanitize 输出 HTML，建议使用 DOMPurify 等库来处理输出，以防止 XSS 攻击。

const DOMPurify = require('dompurify');
const marked = require('marked');

const dirty = marked.parse(`<img src="x" onerror="alert('not happening')">`);
const clean = DOMPurify.sanitize(dirty);

典型生态项目

1. Gatsby

Gatsby 是一个基于 React 的静态站点生成器，可以使用 Marked 作为其 Markdown 解析器，提供快速且高效的静态站点构建体验。

2. Hexo

Hexo 是一个快速、简洁且高效的博客框架，支持使用 Marked 进行 Markdown 解析，适用于快速搭建个人博客。

3. VuePress

VuePress 是一个基于 Vue 的静态站点生成器，特别适合构建文档网站。它可以集成 Marked 来处理 Markdown 内容，提供流畅的阅读体验。

通过以上教程，您可以快速上手并深入了解 Marked 开源项目的使用和生态。希望这些内容对您有所帮助！

marked