Без залежностейПідтримка MDXСтворено для SSRДля різних фреймворків

Markdown, що рендериться в 5 разів швидше.

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

Якщо поле frontmatter 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

Поле frontmatter 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;

Оголошуйте Markdown безпосередньо у словнику TypeScript, ESM або JSON за допомогою функцій md() та file(), поєднуючи переклади з повною типобезпекою.

Приклад структури файлів:

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

Без залежностей

MDX-компоненти

Типізований frontmatter

Вилучається, якщо не використовується

У 5 разів вища пропускна здатність, ніж у markdown-to-jsx

Парсер переписано навколо кешованого порядку правил та інкрементального lookbehind, тож документ обходиться один раз замість повторного сканування правило за правилом. Той самий 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

IntlayerВивід для React і Next.jsПідтримується

markdown-to-jsxВивід для React і Next.jsПідтримується

markedВивід для React і Next.jsНе підтримується

remark / rehypeВивід для React і Next.jsЧастково або через додаткові пакети

@mdx-jsВивід для React і 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 підтримані повноцінно, а не як додаток.

ReactРендериться як JSX

Next.jsРендериться як JSX

VueРендериться як VNode

NuxtРендериться як VNode

SvelteРендериться як HTML

SolidРендериться як JSX

PreactРендериться як JSX

AngularРендериться як HTML

Розбір на сервері, рендеринг на клієнті

Розбір і рендеринг — два окремі кроки. 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() має пріоритет над провайдером, а провайдер — над типовим рендерером.

Типізований frontmatter без шару контенту

Frontmatter файлу 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 на основі коду

Типобезпечні переклади, що зберігаються у вашому репозиторії.

Оголошуйте контент поруч із компонентами у TypeScript або JavaScript. Intlayer автоматично генерує типи, забезпечуючи вам автодоповнення, валідацію та миттєвий зворотний зв'язок. Більше ніяких відсутніх ключів, перемикань контексту або зламаних реалізацій.

Почати кодування

AI CLI Tool

Автоматизуйте переклади зі свого терміналу.

CLI для аудиту, заповнення та перекладу JSON і Markdown за допомогою ШІ.

Запустіть `npx intlayer fill`, щоб виявити відсутні ключі та згенерувати переклади за допомогою OpenAI, Claude або локальних моделей. Зберігайте історію Git чистою.

Спробувати CLI

Intlayer TMS

Припиніть платити за слово. Автоматизуйте за допомогою ШІ.

Альтернатива з відкритим кодом та self-hosted для Crowdin і Lokalise. Створено для сучасних робочих процесів розробників.

Керуйте перекладами безпосередньо в коді або через візуальний редактор. Використовуйте ШІ для миттєвого перекладу. Співпрацюйте з командою без обмежень щодо кількості користувачів.

Переглянути TMS

Безголовий CMS

Поєднайте локальний код з віддаленим вмістом.

Керуйте багатомовним вмістом без додаткових витрат. Intlayer дозволяє поєднувати локальні словники з віддаленим керуванням, забезпечуючи миттєву синхронізацію для гарячих оновлень без перезбирання. Використовуйте вебхуки для CI/CD, керуйте прапорцями функцій і дозвольте ШІ для автоматичного перекладу (у розробці) подбати про решту.

Переглянути CMS

Перемикачі функцій

Перемикайте функції миттєво — без розгортання.

Словники Intlayer — це не лише текст. Використовуйте їх, щоб задавати логіку, стилі та об'єкти конфігурації. Завдяки Live Sync ви можете вмикати та вимикати функції, змінювати теми інтерфейсу та оновлювати поведінку застосунку в реальному часі безпосередньо з CMS.

Спробувати функції

A/B-тестування

Ваш майданчик для продуктових експериментів.

Станьте першими, хто дослідить нову бета-версію Intlayer — A/B-тестування на базі ШІ, створену, щоб підвищити видимість і допомогти приймати розумніші продуктові рішення. Тестуйте будь-що в реальному часі — від текстів і дизайну до цілих функцій — і дозвольте даним показати, що справді працює.

Переглянути A/B-тест

Попередній слайд←

Наступний слайд→