依存関係ゼロ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;

md()とfile()関数を使ってTypeScript、ESM、またはJSONディクショナリ内でMarkdownを直接宣言し、型安全に翻訳を統合できます。

ファイル構造の例：

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

依存関係なし

MDXコンポーネント

型付きフロントマター

未使用なら削除

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プラグインの連鎖なしで設定非対応

型付きのフロントマターメタデータ

Intlayer型付きのフロントマターメタデータ対応

markdown-to-jsx型付きのフロントマターメタデータ非対応

marked型付きのフロントマターメタデータ非対応

remark / rehype型付きのフロントマターメタデータ部分的、または追加パッケージ経由

@mdx-js型付きのフロントマターメタデータ部分的、または追加パッケージ経由

実行時依存関係ゼロ

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に手を伸ばせる同等品はありません。
いずれも型付きのフロントマターは渡してくれません。コンテンツレイヤーを重ねるか、自分でメタデータを解析することになります。

同じノードを、あらゆるフレームワークで

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} />;}

一度設定し、ノード単位で微調整

プロバイダーにコンポーネントを宣言すれば、アプリ内のすべての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()はプロバイダーより優先され、プロバイダーは既定のレンダラーより優先されます。

型付きフロントマター、コンテンツレイヤー不要

Markdownファイルのフロントマターは本文とともに解析され、型付きのメタデータオブジェクトとしてノードに公開されます。コンテンツレイヤーを入れてまで欲しかった編集用フィールドが、補完付きでそのまま使えます。

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