零依赖支持 MDX为 SSR 而生跨框架

渲染速度快 5 倍的 Markdown。

Name: Intlayer Markdown
Rating: 4.92 (64 reviews)
Author: Intlayer

Intlayer 内置了自己的 Markdown 引擎。零依赖、支持 MDX、在服务端解析，并在 React、Next.js、Vue、Svelte、Solid、Preact 和 Angular 中原生渲染。你再也不用挑选渲染器了。

markdown-file.content.md

---key: my-markdown-contentdescription: My content---# My contentHere an example of markdown content

当省略 front-matter 中的 locale 字段时，Intlayer 将使用配置的默认语言。无需语言前缀即可在单个 Markdown 文件中管理全部内容。

文件结构示例：

content
└── markdown-file.content.md

markdown-file.en.content.md

---key: my-markdown-contentdescription: My contentlocale: en---# My contentHere an example of markdown content

front-matter 中的 locale 字段用于定义内容的语言。它是可选的。若未提供，Intlayer 将使用默认语言，若特定语言没有可用翻译，它也将用作后备语言。

文件结构示例：

content
├── markdown-file.en.content.md
├── markdown-file.fr.content.md
└── markdown-file.es.content.md

article.content.ts

import { md, file, t, type Dictionary } from 'intlayer';export default {  key: 'article',  content: {    body: t({      en: md(file('./article.en.md')),      fr: md(file('./article.fr.md')),    }),  },} satisfies Dictionary;

在 TypeScript、ESM 或 JSON 词典中直接使用 md() 和 file() 函数声明 Markdown，兼顾翻译与完整的类型安全性。

文件结构示例：

content
├── article.content.ts
├── article.en.md
└── article.fr.md

无依赖

MDX 组件

带类型的 frontmatter

未使用时被移除

吞吐量是 markdown-to-jsx 的 5 倍

解析器围绕缓存的规则优先级和增量回顾重写，文档只遍历一次，而不是逐条规则重新扫描。同样的 Markdown、同样的输出，工作量却只是一小部分。

Intlayer5×

markdown-to-jsx1×

解析与渲染的相对吞吐量，越高越好。

0 kB

当应用未声明任何 Markdown 节点时的下发体积——渲染器会在构建时被移除。

~55 kB

的解析器分包按需加载，位于 Suspense 之后，永不阻塞首次绘制。

个运行时依赖——无需审计，也无需保持同步。

一个引擎，而不是一张选型清单

每个项目都要做同一件苦差事：在 markdown-to-jsx、marked、remark 和 MDX 之间权衡，接入选中的那个，然后发现它不支持 MDX、类型很松散，或者插件链在客户端崩掉。Intlayer 替你做出这个选择。

能力

Intlayer

markdown-to-jsx

marked

remark / rehype

@mdx-js

MDX 组件

IntlayerMDX 组件支持

markdown-to-jsxMDX 组件不支持

markedMDX 组件不支持

remark / rehypeMDX 组件部分支持，或需额外的包

@mdx-jsMDX 组件支持

类型安全的节点与覆盖项

Intlayer类型安全的节点与覆盖项支持

markdown-to-jsx类型安全的节点与覆盖项不支持

marked类型安全的节点与覆盖项部分支持，或需额外的包

remark / rehype类型安全的节点与覆盖项部分支持，或需额外的包

@mdx-js类型安全的节点与覆盖项部分支持，或需额外的包

React 与 Next.js 输出

IntlayerReact 与 Next.js 输出支持

markdown-to-jsxReact 与 Next.js 输出支持

markedReact 与 Next.js 输出不支持

remark / rehypeReact 与 Next.js 输出部分支持，或需额外的包

@mdx-jsReact 与 Next.js 输出支持

Vue、Svelte、Solid、Preact、Angular

IntlayerVue、Svelte、Solid、Preact、Angular支持

markdown-to-jsxVue、Svelte、Solid、Preact、Angular不支持

markedVue、Svelte、Solid、Preact、Angular部分支持，或需额外的包

remark / rehypeVue、Svelte、Solid、Preact、Angular部分支持，或需额外的包

@mdx-jsVue、Svelte、Solid、Preact、Angular部分支持，或需额外的包

服务端解析，客户端渲染，无需重新解析

Intlayer服务端解析，客户端渲染，无需重新解析支持

markdown-to-jsx服务端解析，客户端渲染，无需重新解析不支持

marked服务端解析，客户端渲染，无需重新解析部分支持，或需额外的包

remark / rehype服务端解析，客户端渲染，无需重新解析支持

@mdx-js服务端解析，客户端渲染，无需重新解析部分支持，或需额外的包

无需插件链即可配置

Intlayer无需插件链即可配置支持

markdown-to-jsx无需插件链即可配置支持

marked无需插件链即可配置部分支持，或需额外的包

remark / rehype无需插件链即可配置不支持

@mdx-js无需插件链即可配置不支持

带类型的 frontmatter 元数据

Intlayer带类型的 frontmatter 元数据支持

markdown-to-jsx带类型的 frontmatter 元数据不支持

marked带类型的 frontmatter 元数据不支持

remark / rehype带类型的 frontmatter 元数据部分支持，或需额外的包

@mdx-js带类型的 frontmatter 元数据部分支持，或需额外的包

零运行时依赖

Intlayer零运行时依赖支持

markdown-to-jsx零运行时依赖支持

marked零运行时依赖支持

remark / rehype零运行时依赖不支持

@mdx-js零运行时依赖不支持

未使用时从打包结果中移除

Intlayer未使用时从打包结果中移除支持

markdown-to-jsx未使用时从打包结果中移除不支持

marked未使用时从打包结果中移除不支持

remark / rehype未使用时从打包结果中移除不支持

@mdx-js未使用时从打包结果中移除不支持

支持部分支持，或需额外的包不支持

remark 和 rehype 大多能做到，但要靠你自己拼装的插件链，而它在浏览器和服务端的行为并不总是一致。
markdown-to-jsx 只渲染 React，marked 只给你一段 HTML 字符串。对 Vue、Svelte、Solid 或 Angular 来说，根本没有可用的对应方案。
它们都不会给你带类型的 frontmatter：你要么再叠一层内容层，要么自己解析元数据。

同一个节点，适用于每个框架

Markdown 节点会转换成所在框架的原生输出——JSX、VNode 或 HTML 字符串。Svelte、Solid 和 Angular 都是一等公民，而非事后补丁。

在服务端解析，在客户端渲染

解析与渲染是两个独立步骤。parseMarkdown 在服务端生成可序列化的 AST，浏览器以 JSON 形式接收，所有渲染器都直接接受它——文档永远不会被遍历两次。

在服务端

文档只解析一次，得到可缓存、可流式传输、可存储的 JSON。

route.server.ts

import { parseMarkdown } from 'react-intlayer/markdown';export const loader = async () => {  // Walked once, on the server  const ast = parseMarkdown('## My title\n\nLorem Ipsum');  return Response.json({ content: ast });};

在客户端

渲染器既接受原始字符串也接受 AST，浏览器只负责绘制。

Page.tsx

import { useLoaderData } from 'react-router';import { MarkdownRenderer } from 'react-intlayer/markdown';export default function Page() {  const { content } = useLoaderData();  // No re-parsing in the browser  return <MarkdownRenderer content={content} />;}

设置一次，按节点微调

在 provider 上声明组件，应用中的每个 Markdown 节点都会采用它们。当某个节点需要不同表现时，use() 只覆盖那一个节点——没有插件链，也没有额外的构建步骤。

全局，作用于整个应用

AppProvider.tsx

import { MarkdownProvider } from 'react-intlayer/markdown';export const AppProvider = ({ children }) => (  <MarkdownProvider    components={{      h1: ({ children }) => <h1 className="text-3xl">{children}</h1>,      MyButton: (props) => <button {...props} />, // MDX component    }}  >    {children}  </MarkdownProvider>);

局部，作用于单个节点

Article.tsx

import { useIntlayer } from 'react-intlayer';const Article = () => {  const { body } = useIntlayer('article');  // Overrides the provider, for this node only  return body.use({    h1: ({ children }) => <h1 className="text-primary">{children}</h1>,  });};

use() 优先于 provider，provider 优先于默认渲染器。

带类型的 frontmatter，无需内容层

Markdown 文件的 frontmatter 会与正文一起被解析，并以带类型的元数据对象暴露在节点上。你以前要靠内容层才能拿到的编辑字段，现在直接就在那里，还有自动补全。

article.en.content.md

---key: articlelocale: entitle: Shipping i18n Markdownauthor: aymericzip---# Shipping i18n MarkdownHere an example of markdown content.

Article.tsx

const { body } = useIntlayer('article');body.metadata.title; // 'Shipping i18n Markdown'body.metadata.author; // 'aymericzip'body.value; // the raw Markdown string

同一个引擎也能解析 HTML

html() 节点走的是同一条流水线：标签被映射到你自己的组件，类型与覆盖规则完全一致。

查看 HTML 内容

基于代码的 i18n