Marked 开源项目教程

2024-08-16 15:26:04作者：范靓好Udolf

项目介绍

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 开源项目教程

项目介绍

项目快速启动

安装

通过 npm 安装

在浏览器中使用

使用 CLI

应用案例和最佳实践

案例一：静态博客生成器

最佳实践

典型生态项目

1. Gatsby

2. Hexo

3. VuePress

热门内容推荐

最新内容推荐

项目优选

Marked 开源项目教程

项目介绍

项目快速启动

安装

通过 npm 安装

在浏览器中使用

使用 CLI

应用案例和最佳实践

案例一：静态博客生成器

最佳实践

典型生态项目

1. Gatsby

2. Hexo

3. VuePress

相关内容推荐

热门内容推荐

最新内容推荐

项目优选