Zero zależnościGotowe na MDXStworzone dla SSRWieloframeworkowe

Markdown renderowany 5× szybciej.

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

Intlayer dostarcza własny silnik Markdown. Bez zależności, z MDX, parsowany na serwerze i renderowany natywnie w React, Next.js, Vue, Svelte, Solid, Preact i Angular. Nigdy więcej nie musisz wybierać renderera.

Przeczytaj dokumentację Zobacz liczby

markdown-file.content.md

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

Gdy pole frontmatter locale zostanie pominięte, Intlayer użyje skonfigurowanego języka domyślnego. Możesz przechowywać całą treść w jednym pliku markdown bez prefiksów językowych.

Przykład struktury plików:

content
└── markdown-file.content.md

markdown-file.en.content.md

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

Pole frontmatter locale definiuje język treści. Jest opcjonalne. Jeśli nie zostanie podane, Intlayer użyje domyślnego języka, który służy również jako język zapasowy w przypadku braku tłumaczenia.

Przykład struktury plików:

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;

Deklaruj Markdown bezpośrednio w słowniku TypeScript, ESM lub JSON za pomocą funkcji md() i file(), łącząc tłumaczenia z pełnym bezpieczeństwem typów.

Przykład struktury plików:

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

Bez zależności

Komponenty MDX

Typowany frontmatter

Usuwany, gdy nieużywany

5× większa przepustowość niż markdown-to-jsx

Parser przepisano wokół buforowanej kolejności reguł i przyrostowego lookbehind, więc dokument jest przechodzony raz zamiast skanowany reguła po regule. Ten sam Markdown, ten sam wynik, ułamek pracy.

Intlayer5×

markdown-to-jsx1×

Względna przepustowość parsowania i renderowania — im więcej, tym lepiej.

0 kB

wysyłane, gdy aplikacja nie deklaruje żadnego węzła Markdown — renderer jest usuwany podczas budowania.

~55 kB

chunku parsera ładowanego leniwie za Suspense, który nigdy nie blokuje pierwszego renderowania.

zależności w czasie działania — nic do audytu, nic do synchronizowania.

Jeden silnik zamiast listy zakupów

Każdy projekt kończy się tym samym obowiązkiem: porównać markdown-to-jsx z marked, remark i MDX, podłączyć zwycięzcę, a potem odkryć, że nie obsługuje MDX, że typy są nieprecyzyjne albo że łańcuch wtyczek psuje się po stronie klienta. Intlayer dokonuje tego wyboru za Ciebie.

Możliwość

Intlayer

markdown-to-jsx

marked

remark / rehype

@mdx-js

Komponenty MDX

IntlayerKomponenty MDXObsługiwane

markdown-to-jsxKomponenty MDXNieobsługiwane

markedKomponenty MDXNieobsługiwane

remark / rehypeKomponenty MDXCzęściowo lub przez dodatkowe pakiety

@mdx-jsKomponenty MDXObsługiwane

Bezpieczne typowo węzły i nadpisania

IntlayerBezpieczne typowo węzły i nadpisaniaObsługiwane

markdown-to-jsxBezpieczne typowo węzły i nadpisaniaNieobsługiwane

markedBezpieczne typowo węzły i nadpisaniaCzęściowo lub przez dodatkowe pakiety

remark / rehypeBezpieczne typowo węzły i nadpisaniaCzęściowo lub przez dodatkowe pakiety

@mdx-jsBezpieczne typowo węzły i nadpisaniaCzęściowo lub przez dodatkowe pakiety

Wyjście dla React i Next.js

IntlayerWyjście dla React i Next.jsObsługiwane

markdown-to-jsxWyjście dla React i Next.jsObsługiwane

markedWyjście dla React i Next.jsNieobsługiwane

remark / rehypeWyjście dla React i Next.jsCzęściowo lub przez dodatkowe pakiety

@mdx-jsWyjście dla React i Next.jsObsługiwane

Vue, Svelte, Solid, Preact, Angular

IntlayerVue, Svelte, Solid, Preact, AngularObsługiwane

markdown-to-jsxVue, Svelte, Solid, Preact, AngularNieobsługiwane

markedVue, Svelte, Solid, Preact, AngularCzęściowo lub przez dodatkowe pakiety

remark / rehypeVue, Svelte, Solid, Preact, AngularCzęściowo lub przez dodatkowe pakiety

@mdx-jsVue, Svelte, Solid, Preact, AngularCzęściowo lub przez dodatkowe pakiety

Parsowanie na serwerze, render na kliencie, bez ponownego parsowania

IntlayerParsowanie na serwerze, render na kliencie, bez ponownego parsowaniaObsługiwane

markdown-to-jsxParsowanie na serwerze, render na kliencie, bez ponownego parsowaniaNieobsługiwane

markedParsowanie na serwerze, render na kliencie, bez ponownego parsowaniaCzęściowo lub przez dodatkowe pakiety

remark / rehypeParsowanie na serwerze, render na kliencie, bez ponownego parsowaniaObsługiwane

@mdx-jsParsowanie na serwerze, render na kliencie, bez ponownego parsowaniaCzęściowo lub przez dodatkowe pakiety

Konfiguracja bez łańcucha wtyczek

IntlayerKonfiguracja bez łańcucha wtyczekObsługiwane

markdown-to-jsxKonfiguracja bez łańcucha wtyczekObsługiwane

markedKonfiguracja bez łańcucha wtyczekCzęściowo lub przez dodatkowe pakiety

remark / rehypeKonfiguracja bez łańcucha wtyczekNieobsługiwane

@mdx-jsKonfiguracja bez łańcucha wtyczekNieobsługiwane

Typowane metadane frontmatter

IntlayerTypowane metadane frontmatterObsługiwane

markdown-to-jsxTypowane metadane frontmatterNieobsługiwane

markedTypowane metadane frontmatterNieobsługiwane

remark / rehypeTypowane metadane frontmatterCzęściowo lub przez dodatkowe pakiety

@mdx-jsTypowane metadane frontmatterCzęściowo lub przez dodatkowe pakiety

Zero zależności w czasie działania

IntlayerZero zależności w czasie działaniaObsługiwane

markdown-to-jsxZero zależności w czasie działaniaObsługiwane

markedZero zależności w czasie działaniaObsługiwane

remark / rehypeZero zależności w czasie działaniaNieobsługiwane

@mdx-jsZero zależności w czasie działaniaNieobsługiwane

Usuwany z bundla, gdy nieużywany

IntlayerUsuwany z bundla, gdy nieużywanyObsługiwane

markdown-to-jsxUsuwany z bundla, gdy nieużywanyNieobsługiwane

markedUsuwany z bundla, gdy nieużywanyNieobsługiwane

remark / rehypeUsuwany z bundla, gdy nieużywanyNieobsługiwane

@mdx-jsUsuwany z bundla, gdy nieużywanyNieobsługiwane

ObsługiwaneCzęściowo lub przez dodatkowe pakietyNieobsługiwane

remark i rehype potrafią większość z tego, ale przez łańcuch wtyczek, który sam składasz — i który w przeglądarce nie zawsze zachowuje się tak jak na serwerze.
markdown-to-jsx renderuje tylko React, a marked zwraca ciąg HTML. Dla Vue, Svelte, Solid czy Angulara nie ma odpowiednika, po który można sięgnąć.
Żaden z nich nie daje typowanego frontmattera: albo dokładasz warstwę treści, albo sam parsujesz metadane.

Ten sam węzeł w każdym frameworku

Węzeł Markdown zamienia się w natywne wyjście frameworka, w którym się znajduje — JSX, VNode albo ciąg HTML. Svelte, Solid i Angular są pełnoprawne, a nie doklejone na końcu.

ReactRenderuje jako JSX

Next.jsRenderuje jako JSX

VueRenderuje jako VNode

NuxtRenderuje jako VNode

SvelteRenderuje jako HTML

SolidRenderuje jako JSX

PreactRenderuje jako JSX

AngularRenderuje jako HTML

Parsuj na serwerze, renderuj na kliencie

Parsowanie i renderowanie to dwa osobne kroki. parseMarkdown tworzy na serwerze serializowalny AST, przeglądarka otrzymuje go jako JSON, a każdy renderer przyjmuje go bez zmian — dokument nigdy nie jest przechodzony dwa razy.

Na serwerze

Dokument jest parsowany raz do JSON-a, który możesz buforować, strumieniować lub przechować.

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

Na kliencie

Renderery przyjmują surowy ciąg albo AST, więc przeglądarka tylko rysuje.

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

Ustaw raz, dopracuj na węzeł

Zadeklaruj komponenty w providerze, a każdy węzeł Markdown w aplikacji je przejmie. Gdy jeden węzeł ma być inny, use() nadpisuje tylko jego — bez łańcucha wtyczek i bez osobnego kroku budowania.

Globalnie, dla całej aplikacji

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>);

Lokalnie, dla jednego węzła

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() ma pierwszeństwo przed providerem, a provider przed domyślnym rendererem.

Typowany frontmatter, bez warstwy treści

Frontmatter pliku Markdown jest parsowany razem z dokumentem i udostępniany na węźle jako typowany obiekt metadanych. Pola redakcyjne, dla których instalowałeś warstwę treści, są po prostu tam — z podpowiedziami.

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

Ten sam silnik parsuje też HTML

Węzły html() przechodzą tym samym potokiem: znaczniki są mapowane na Twoje komponenty, z tym samym typowaniem i tymi samymi regułami nadpisań.

Zobacz treść HTML

i18n oparte na kodzie

Bezpieczne typowo tłumaczenia w Twoim repozytorium.

Deklaruj treści obok komponentów w TypeScript lub JavaScript. Intlayer automatycznie generuje typy, zapewniając autouzupełnianie, walidację i natychmiastową informację zwrotną. Koniec z brakującymi kluczami.

Zacznij kodować

AI CLI Tool

Automatyzuj tłumaczenia ze swojego terminala.

CLI do audytu, uzupełniania i tłumaczenia JSON i Markdown za pomocą AI.

Uruchom `npx intlayer fill`, aby wykryć brakujące klucze i wygenerować tłumaczenia za pomocą OpenAI, Claude lub modeli lokalnych. Czysta historia Git i bezpieczne typy.

Wypróbuj CLI

Intlayer TMS

Przestań płacić za słowo. Automatyzuj za pomocą AI.

Alternatywa open-source i self-hosted dla Crowdin i Lokalise. Zbudowana dla nowoczesnych przepływów pracy deweloperów.

Zarządzaj tłumaczeniami bezpośrednio w kodzie lub za pomocą edytora wizualnego. Wykorzystaj AI do natychmiastowego tłumaczenia. Współpracuj z zespołem bez limitów miejsc.

Zobacz TMS

Headless CMS

Połącz lokalny kod z treściami zdalnymi.

Zarządzaj wielojęzycznymi treściami bez narzutu. Intlayer pozwala łączyć lokalne słowniki ze zdalnym zarządzaniem, umożliwiając Live Sync dla aktualizacji "na gorąco" bez przebudowy. Używaj webhooków do CI/CD i zarządzaj flagami funkcji.

Zobacz CMS

Flagi funkcji

Przełączaj funkcje natychmiast. Bez wdrażania.

Słowniki Intlayer to coś więcej niż tekst. Używaj ich do deklarowania logiki, stylów i konfiguracji. Dzięki Live Sync możesz włączać/wyłączać funkcje, zmieniać motywy UI i aktualizować zachowanie aplikacji w czasie rzeczywistym bezpośrednio z CMS.

Wypróbuj funkcje

Testy A/B

Twoje pole do eksperymentów produktowych.

Bądź pierwszym, który wypróbuje nową wersję beta AI-driven A/B Testing od Intlayera — stworzoną, aby zwiększyć odkrywalność i wspierać mądrzejsze decyzje produktowe. Testuj wszystko w czasie rzeczywistym: od treści i projektu po całe funkcje, i pozwól danym pokazać, co naprawdę działa.

Zobacz test A/B

Poprzedni slajd←

Następny slajd→