}>{markdownContent}\n );\n};\n```\n\n \n \n\nAngular не має API Suspense. Використовуйте відкладені представлення (`@defer`) в Angular для обробки вмісту Markdown із відкладеним завантаженням (потрібен Angular 17+).\n\n```typescript fileName=\"my.component.ts\"\nimport { Component } from \"@angular/core\";\nimport { useIntlayer } from \"angular-intlayer\";\n\n@Component({\n selector: \"app-my\",\n template: `\n @defer {\n

\n }\n `,\n})\nexport class MyComponent {\n content = useIntlayer(\"my-markdown\");\n}\n```\n\n \n\n\n---\n\n## Рендеринг на стороні сервера (SSR) та гідратація\n\nУ порівнянні з іншими парсерами Markdown, такими як remark / rehype, Intlayer Markdown не має залежностей і працює як на клієнті, так і на сервері.\n\nОднак Intlayer оптимізує синтаксичний аналіз для фреймворків серверного рендерингу (SSR) (таких як Next.js App Router, React Router, Nuxt, SvelteKit тощо).\n\nЗамість надсилання необроблених рядків Markdown клієнту та їх аналізу в браузері (що призводить до зниження продуктивності), Intlayer дозволяє попередньо проаналізувати Markdown в абстрактне синтаксичне дерево (AST) на сервері.\n\nВи можете використовувати функцію `parseMarkdown` з пакету Intlayer вашого фреймворку на стороні сервера для генерації серіалізованого AST (об'єкта `ParsedMarkdown`) і передачі його безпосередньо на фронтенд. Всі утиліти рендерингу Intlayer (такі як ``, `useMarkdownRenderer` тощо) автоматично приймають цей об'єкт AST і плавно рендерять його.\n\n### Приклад в архітектурі Сервер/Клієнт\n\n\n \n\n ```tsx fileName=\"server.ts\"\n import { parseMarkdown } from \"react-intlayer/markdown\";\n\n // 1. На сервері: перетворити markdown на серіалізоване AST\n export const loader = async () => {\n const markdownString = \"## My title \\n\\nLorem Ipsum\";\n const ast = parseMarkdown(markdownString);\n\n // Повернути AST клієнту у форматі JSON\n return Response.json({ content: ast });\n };\n ```\n\n ```tsx fileName=\"client.tsx\"\n import { useLoaderData } from \"react-router\";\n import { MarkdownRenderer } from \"react-intlayer/markdown\";\n\n // 2. На клієнті: відрендерити AST безпосередньо без повторного аналізу\n export default function Page() {\n const { content } = useLoaderData();\n\n // Рендерер приймає або необроблений рядок, або проаналізоване AST\n return ;\n }\n ```\n\n \n \n\n ```tsx fileName=\"app/page.tsx\"\n import { parseMarkdown } from \"next-intlayer/markdown\";\n import { MarkdownRenderer } from \"next-intlayer/markdown\";\n\n export default async function Page() {\n // 1. Перетворити markdown на серіалізоване AST на сервері\n const markdownString = \"## My title \\n\\nLorem Ipsum\";\n const ast = parseMarkdown(markdownString);\n\n // 2. Відрендерити AST безпосередньо\n // У серверному компоненті це працює безшовно і передає AST\n // безпосередньо в базові клієнтські компоненти, якщо це необхідно.\n return ;\n }\n ```\n\n \n \n\n ```vue fileName=\"pages/index.vue\"\n \n\n \n ```\n\n \n \n\n ```typescript fileName=\"+page.server.ts\"\n import { parseMarkdown } from \"svelte-intlayer/markdown\";\n\n // 1. На сервері: перетворити markdown на серіалізоване AST\n export const load = async () => {\n const markdownString = \"## My title \\n\\nLorem Ipsum\";\n const ast = parseMarkdown(markdownString);\n\n // Повернути AST клієнту\n return { content: ast };\n };\n ```\n\n ```svelte fileName=\"+page.svelte\"\n \n\n \n \n ```\n\n \n \n\n Angular SSR зазвичай отримує дані на сервері під час початкового завантаження та виконує гідратацію на клієнті. Ви можете використовувати резолвери для передачі AST.\n\n ```typescript fileName=\"app.resolver.ts\"\n import { Injectable } from \"@angular/core\";\n import { Resolve } from \"@angular/router\";\n import { parseMarkdown, type ParsedMarkdown } from \"angular-intlayer/markdown\";\n\n @Injectable({ providedIn: \"root\" })\n export class MarkdownResolver implements Resolve {\n resolve(): ParsedMarkdown {\n const markdownString = \"## My title \\n\\nLorem Ipsum\";\n // 1. На сервері: перетворити markdown на серіалізоване AST\n return parseMarkdown(markdownString);\n }\n }\n ```\n\n ```typescript fileName=\"app.component.ts\"\n import { Component } from \"@angular/core\";\n import { ActivatedRoute } from \"@angular/router\";\n import { IntlayerMarkdownService, type ParsedMarkdown } from \"angular-intlayer/markdown\";\n\n @Component({\n selector: \"app-root\",\n template: `

`,\n })\n export class AppComponent {\n renderedMarkdown: string = \"\";\n\n constructor(\n private route: ActivatedRoute,\n private markdownService: IntlayerMarkdownService\n ) {\n // 2. На клієнті: відрендерити AST безпосередньо без повторного аналізу\n this.route.data.subscribe((data) => {\n this.renderedMarkdown = this.markdownService.renderMarkdown(\n data.markdownAst\n ) as string;\n });\n }\n }\n ```\n\n \n\n\nЦей підхід гарантує, що логіка аналізу Markdown повністю виконується на сервері, що значно скорочує час виконання на стороні клієнта та підвищує швидкість початкової гідратації.\n\n## Довідник опцій\n\nЦі параметри можна передати до `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer` та `renderMarkdown`.\n\n| Option | Type | Default | Опис |\n| :-------------------- | :---------- | :------ | :------------------------------------------------------------------------------------------- |\n| `forceBlock` | `boolean` | `false` | Примушує вивід обгортатися блочним елементом (наприклад, `

`). |\n| `forceInline` | `boolean` | `false` | Примушує вивід обгортатися вбудованим елементом (наприклад, ``). |\n| `tagfilter` | `boolean` | `true` | Увімкнює фільтр тегів GitHub для підвищення безпеки шляхом видалення небезпечних тегів HTML. |\n| `preserveFrontmatter` | `boolean` | `false` | Якщо `true`, початкові метадані (frontmatter) на початку рядка Markdown не будуть видалені. |\n| `components` | `Overrides` | `{}` | Карта тегів HTML до власних компонентів (наприклад, `{ h1: MyHeading }`). |\n| `wrapper` | `Component` | `null` | Спеціальний компонент для обгортання відображеного Markdown. |\n| `renderMarkdown` | `Function` | `null` | Власна функція рендерингу для повної заміни компілятора Markdown за замовчуванням. |\n","about":"Дізнайтеся, як оголошувати та використовувати вміст Markdown на вашому багатомовному веб-сайті за допомогою Intlayer. Дотримуйтесь інструкцій у цій онлайн-документації, щоб безперешкодно інтегрувати Markdown у ваш проект.","url":"https://intlayer.org/uk/doc/concept/content/markdown","datePublished":"07-02-2025","dateModified":"19-05-2026","keywords":"Markdown, Інтернаціоналізація, Документація, Intlayer, Next.js, JavaScript, React","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Розробники, менеджери контенту"}}

Дата створення:2025-02-07Останнє оновлення:2026-05-19

Надішліть цей документ вашому улюбленому AI-асистенту

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Задайте питання та отримайте підсумок документа, вказавши цю сторінку та обраного вами постачальника штучного інтелекту

Історія версій

"Дозволити попередній синтаксичний аналіз AST Markdown для SSR / гідратації"
v8.11.028.05.2026
"Додано підтримку файлів `.content.md`"
v8.10.019.05.2026
"Додано об'єкт плагіна `intlayerMarkdown`; використовуйте `app.use(intlayerMarkdown)` замість `app.use(installIntlayerMarkdown)`"
v8.5.024.03.2026
"Імпорт переміщено з `{{framework}}-intlayer` до `{{framework}}-intlayer/markdown`"
v8.5.024.03.2026
"Додано утиліту MarkdownRenderer / useMarkdownRenderer / renderMarkdown та опцію forceInline"
v8.0.022.01.2026
"Автоматичне оформлення вмісту markdown, підтримка MDX та SSR"
v8.0.018.01.2026
"Ініціалізація історії"
v5.5.1029.06.2025

Вміст цієї сторінки перекладено за допомогою штучного інтелекту.

Переглянути останню версію оригінального вмісту англійською

Редагувати цей документ

Якщо у вас є ідея щодо покращення цієї документації, будь ласка, долучіться, надіславши pull request на GitHub.

Посилання на документацію на GitHub

Копіювати

Скопіювати документацію у форматі Markdown в буфер обміну

Markdown / Вміст форматованого тексту

Name: Intlayer
Author: Intlayer

Intlayer підтримує вміст форматованого тексту, визначений за допомогою синтаксису Markdown. Це дозволяє легко створювати та підтримувати форматований вміст, такий як блоги, статті тощо.

Оголошення вмісту Markdown

Ви можете оголосити вміст Markdown за допомогою функції md або просто як рядок (якщо він містить синтаксис Markdown).

Починаючи з версії 8.10.0, ви можете оголошувати вміст Markdown безпосередньо у файлах .content.md. Intlayer автоматично виявлятиме та аналізуватиме вміст Markdown.

markdown-file.en.content.md

Копіювати код

Скопіюйте код у буфер обміну

---key: my-markdown-contentdescription: Мій вмістlocale: en---# Мій вмістОсь приклад вмісту markdown

---key: my-markdown-contentdescription: Мій вмістlocale: en---# Мій вмістОсь приклад вмісту markdown

Поле front-matter locale визначає локаль вмісту. Воно є необов'язковим. Якщо його не вказано, Intlayer використовуватиме локаль за замовчуванням, яка також слугуватиме резервною, якщо переклад для конкретної локалі недоступний.

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

text

Копіювати код

Скопіюйте код у буфер обміну

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

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

У front-matter ви можете додати будь-які властивості, визначені у Визначенні словника

Використовуйте функцію md для явного оголошення вмісту Markdown. Це корисно, якщо ви хочете переконатися, що рядок обробляється як Markdown, навіть якщо він не містить очевидного синтаксису.

markdownDictionary.content.ts

Копіювати код

Скопіюйте код у буфер обміну

import { md, type Dictionary } from "intlayer";const markdownDictionary = {  key: "app",  content: {    myMarkdownContent: md("## Мій заголовок \n\nLorem Ipsum"),  },} satisfies Dictionary;export default markdownDictionary;

import { md, type Dictionary } from "intlayer";const markdownDictionary = {  key: "app",  content: {    myMarkdownContent: md("## Мій заголовок \n\nLorem Ipsum"),  },} satisfies Dictionary;export default markdownDictionary;

Імпортуйте файли .md безпосередньо за допомогою функції file.

markdownDictionary.content.ts

Копіювати код

Скопіюйте код у буфер обміну

import { md, file, t } from "intlayer";export default {  key: "app",  content: {    content: t({      en: md(file("./myMarkdown.en.md")),      uk: md(file("./myMarkdown.uk.md")),    }),  },};

import { md, file, t } from "intlayer";export default {  key: "app",  content: {    content: t({      en: md(file("./myMarkdown.en.md")),      uk: md(file("./myMarkdown.uk.md")),    }),  },};

Якщо рядок містить типові індикатори Markdown (наприклад, заголовки, списки, посилання тощо), Intlayer автоматично перетворить його.

markdownDictionary.content.ts

Копіювати код

Скопіюйте код у буфер обміну

export default {  key: "app",  contentAutoTransformation: true, // Увімкнути автоматичне виявлення вмісту Markdown - Можна налаштувати глобально в intlayer.config.ts  content: {    myMarkdownContent: "## Мій заголовок \n\nLorem Ipsum",  },};

export default {  key: "app",  contentAutoTransformation: true, // Увімкнути автоматичне виявлення вмісту Markdown - Можна налаштувати глобально в intlayer.config.ts  content: {    myMarkdownContent: "## Мій заголовок \n\nLorem Ipsum",  },};

Рендеринг Markdown

Intlayer надає два незалежні способи рендерингу Markdown:

Через useIntlayer — Intlayer автоматично перетворює вузол md у нативний вихідний формат фреймворку (JSX, VNode, HTML-рядок).
- Frontmatter аналізується та надається як .metadata. Ви можете перевизначити рендеринг на двох рівнях — глобально за допомогою MarkdownProvider (або еквівалента фреймворку) та локально для кожного вузла за допомогою .use(). Обидва підходи можна комбінувати; .use() має пріоритет над MarkdownProvider, який має пріоритет над поведінкою за замовчуванням.
Допоміжні утиліти — <MarkdownRenderer />, useMarkdownRenderer() та renderMarkdown() є самостійними інструментами, які приймають тільки необроблені рядки Markdown. Вони не залежать від useIntlayer і не працюють з оформленими вузлами, які він повертає.

Рендеринг Markdown підтримує MDX — використовуйте будь-який компонент JSX/фреймворку за назвою безпосередньо у вашому Markdown.

1. Автоматичний рендеринг (через `useIntlayer`)

Вузли Markdown можна рендерити безпосередньо як JSX.

App.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useIntlayer } from "react-intlayer";import { MarkdownProvider } from "react-intlayer/markdown";const AppContent = () => {  const { myMarkdownContent } = useIntlayer("app");  return <div>{myMarkdownContent}</div>;};const App = () => (  <MarkdownProvider    components={{      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,      MyButton: (props) => <button {...props} />, // MDX-компонент    }}  >    <AppContent />  </MarkdownProvider>);

import { useIntlayer } from "react-intlayer";import { MarkdownProvider } from "react-intlayer/markdown";const AppContent = () => {  const { myMarkdownContent } = useIntlayer("app");  return <div>{myMarkdownContent}</div>;};const App = () => (  <MarkdownProvider    components={{      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,      MyButton: (props) => <button {...props} />, // MDX-компонент    }}  >    <AppContent />  </MarkdownProvider>);

Якщо MarkdownProvider відсутній, Intlayer рендеритиме markdown, використовуючи стандартний парсер Markdown у JSX.

Ви також можете надати локальні перевизначення для конкретних вузлів за допомогою методу .use():

tsx

Копіювати код

Скопіюйте код у буфер обміну

{myMarkdownContent.use({  h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,})}

{myMarkdownContent.use({  h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,})}

Ви можете отримати Markdown як рядок:

tsx

Копіювати код

Скопіюйте код у буфер обміну

{myMarkdownContent.value}{String(myMarkdownContent)}{myMarkdownContent.toString()}

{myMarkdownContent.value}{String(myMarkdownContent)}{myMarkdownContent.toString()}

І ви можете отримати доступ до метаданих markdown наступним чином:

tsx

Копіювати код

Скопіюйте код у буфер обміну

{myMarkdownContent.metadata}{myMarkdownContent.metadata.title}

{myMarkdownContent.metadata}{myMarkdownContent.metadata.title}

Вузли Markdown можна рендерити безпосередньо як JSX.

App.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useIntlayer } from "next-intlayer";import { MarkdownProvider } from "next-intlayer/markdown";const AppContent = () => {  const { myMarkdownContent } = useIntlayer("app");  return <div>{myMarkdownContent}</div>;};const App = () => (  <MarkdownProvider    components={{      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,      MyButton: (props) => <button {...props} />, // MDX-компонент    }}  >    <AppContent />  </MarkdownProvider>);

import { useIntlayer } from "next-intlayer";import { MarkdownProvider } from "next-intlayer/markdown";const AppContent = () => {  const { myMarkdownContent } = useIntlayer("app");  return <div>{myMarkdownContent}</div>;};const App = () => (  <MarkdownProvider    components={{      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,      MyButton: (props) => <button {...props} />, // MDX-компонент    }}  >    <AppContent />  </MarkdownProvider>);

Якщо MarkdownProvider відсутній, Intlayer рендеритиме markdown, використовуючи стандартний парсер Markdown у JSX.

Ви також можете надати локальні перевизначення для конкретних вузлів за допомогою методу .use():

tsx

Копіювати код

Скопіюйте код у буфер обміну

{myMarkdownContent.use({  h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,})}

{myMarkdownContent.use({  h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,})}

Ви можете отримати Markdown як рядок:

tsx

Копіювати код

Скопіюйте код у буфер обміну

{myMarkdownContent.value}{String(myMarkdownContent)}{myMarkdownContent.toString()}

{myMarkdownContent.value}{String(myMarkdownContent)}{myMarkdownContent.toString()}

І ви можете отримати доступ до метаданих markdown наступним чином:

tsx

Копіювати код

Скопіюйте код у буфер обміну

{myMarkdownContent.metadata}{myMarkdownContent.metadata.title}

{myMarkdownContent.metadata}{myMarkdownContent.metadata.title}

У Vue вміст Markdown можна рендерити за допомогою вбудованого тегу component або безпосередньо як вузол.

App.vue

Копіювати код

Скопіюйте код у буфер обміну

<script setup>import { useIntlayer } from "vue-intlayer";const { myMarkdownContent } = useIntlayer("app");</script><template>  <component :is="myMarkdownContent" /></template>

<script setup>import { useIntlayer } from "vue-intlayer";const { myMarkdownContent } = useIntlayer("app");</script><template>  <component :is="myMarkdownContent" /></template>

Глобальне налаштування через плагін intlayerMarkdown (підтримує власні компоненти MDX):

main.ts

Копіювати код

Скопіюйте код у буфер обміну

import { intlayerMarkdown } from "vue-intlayer/markdown";app.use(intlayerMarkdown, {  components: {    h1: (props) => h('h1', { style: { color: 'green' } }, props.children),    MyButton: (props) => h('button', props), // MDX-компонент  },});

import { intlayerMarkdown } from "vue-intlayer/markdown";app.use(intlayerMarkdown, {  components: {    h1: (props) => h('h1', { style: { color: 'green' } }, props.children),    MyButton: (props) => h('button', props), // MDX-компонент  },});

Якщо плагін intlayerMarkdown не встановлено, Intlayer рендеритиме за допомогою компілятора за замовчуванням.

Ви також можете надати локальні перевизначення для конкретних вузлів за допомогою методу .use():

vue

Копіювати код

Скопіюйте код у буфер обміну

<component :is="myMarkdownContent.use({  h1: (props) => h('h1', { style: { color: 'red' } }, props.children),})" />

<component :is="myMarkdownContent.use({  h1: (props) => h('h1', { style: { color: 'red' } }, props.children),})" />

Ви можете отримати Markdown як рядок:

vue

Копіювати код

Скопіюйте код у буфер обміну

{{ myMarkdownContent.value }}{{ String(myMarkdownContent) }}{{ myMarkdownContent.toString() }}

{{ myMarkdownContent.value }}{{ String(myMarkdownContent) }}{{ myMarkdownContent.toString() }}

І ви можете отримати доступ до метаданих markdown наступним чином:

vue

Копіювати код

Скопіюйте код у буфер обміну

<component :is="myMarkdownContent.metadata" /><component :is="myMarkdownContent.metadata.title" />

<component :is="myMarkdownContent.metadata" /><component :is="myMarkdownContent.metadata.title" />

Svelte за замовчуванням рендерить Markdown як HTML-рядок. Використовуйте {@html}, щоб його відрендерити.

App.svelte

Копіювати код

Скопіюйте код у буфер обміну

<script lang="ts">import { useIntlayer } from "svelte-intlayer";import { MarkdownProvider } from "svelte-intlayer/markdown";import MyHeading from "./MyHeading.svelte";const content = useIntlayer("app");</script><MarkdownProvider components={{ h1: MyHeading }}>  {@html $content.myMarkdownContent}</MarkdownProvider>

<script lang="ts">import { useIntlayer } from "svelte-intlayer";import { MarkdownProvider } from "svelte-intlayer/markdown";import MyHeading from "./MyHeading.svelte";const content = useIntlayer("app");</script><MarkdownProvider components={{ h1: MyHeading }}>  {@html $content.myMarkdownContent}</MarkdownProvider>

Якщо MarkdownProvider відсутній, Intlayer рендеритиме markdown за допомогою компілятора за замовчуванням.

Ви також можете надати локальні перевизначення для конкретних вузлів за допомогою методу .use():

svelte

Копіювати код

Скопіюйте код у буфер обміну

{@html $content.myMarkdownContent.use({ ... })}

{@html $content.myMarkdownContent.use({ ... })}

Ви можете отримати Markdown як рядок:

svelte

Копіювати код

Скопіюйте код у буфер обміну

{$content.myMarkdownContent.value}{String($content.myMarkdownContent)}{$content.myMarkdownContent.toString()}

{$content.myMarkdownContent.value}{String($content.myMarkdownContent)}{$content.myMarkdownContent.toString()}

І ви можете отримати доступ до метаданих markdown наступним чином:

svelte

Копіювати код

Скопіюйте код у буфер обміну

{$content.myMarkdownContent.metadata}{$content.myMarkdownContent.metadata.title}

{$content.myMarkdownContent.metadata}{$content.myMarkdownContent.metadata.title}

Preact підтримує вузли Markdown безпосередньо у JSX.

App.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useIntlayer } from "preact-intlayer";import { MarkdownProvider } from "preact-intlayer/markdown";const AppContent = () => {  const { myMarkdownContent } = useIntlayer("app");  return <div>{myMarkdownContent}</div>;};const App = () => (  <MarkdownProvider    components={{      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,      MyButton: (props) => <button {...props} />, // MDX-компонент    }}  >    <AppContent />  </MarkdownProvider>);

import { useIntlayer } from "preact-intlayer";import { MarkdownProvider } from "preact-intlayer/markdown";const AppContent = () => {  const { myMarkdownContent } = useIntlayer("app");  return <div>{myMarkdownContent}</div>;};const App = () => (  <MarkdownProvider    components={{      h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,      MyButton: (props) => <button {...props} />, // MDX-компонент    }}  >    <AppContent />  </MarkdownProvider>);

Якщо MarkdownProvider відсутній, Intlayer рендеритиме markdown, використовуючи стандартний парсер Markdown у JSX.

Ви також можете надати локальні перевизначення для конкретних вузлів за допомогою методу .use():

tsx

Копіювати код

Скопіюйте код у буфер обміну

{myMarkdownContent.use({  h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,})}

{myMarkdownContent.use({  h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,})}

Ви можете отримати Markdown як рядок:

tsx

Копіювати код

Скопіюйте код у буфер обміну

{myMarkdownContent.value}{String(myMarkdownContent)}{myMarkdownContent.toString()}

{myMarkdownContent.value}{String(myMarkdownContent)}{myMarkdownContent.toString()}

І ви можете отримати доступ до метаданих markdown наступним чином:

tsx

Копіювати код

Скопіюйте код у буфер обміну

{myMarkdownContent.metadata}{myMarkdownContent.metadata.title}

{myMarkdownContent.metadata}{myMarkdownContent.metadata.title}

Solid підтримує вузли Markdown безпосередньо у JSX.

App.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useIntlayer } from "solid-intlayer";import { MarkdownProvider } from "solid-intlayer/markdown";const AppContent = () => {  const { myMarkdownContent } = useIntlayer("app");  return <div>{myMarkdownContent}</div>;};const App = () => (  <MarkdownProvider    components={{      h1: (props) => <h1 style={{ color: "red" }}>{props.children}</h1>,      MyButton: (props) => <button {...props} />, // MDX-компонент    }}  >    <AppContent />  </MarkdownProvider>);

import { useIntlayer } from "solid-intlayer";import { MarkdownProvider } from "solid-intlayer/markdown";const AppContent = () => {  const { myMarkdownContent } = useIntlayer("app");  return <div>{myMarkdownContent}</div>;};const App = () => (  <MarkdownProvider    components={{      h1: (props) => <h1 style={{ color: "red" }}>{props.children}</h1>,      MyButton: (props) => <button {...props} />, // MDX-компонент    }}  >    <AppContent />  </MarkdownProvider>);

Якщо MarkdownProvider відсутній, Intlayer рендеритиме markdown, використовуючи стандартний парсер Markdown у JSX.

Ви також можете надати локальні перевизначення для конкретних вузлів за допомогою методу .use():

tsx

Копіювати код

Скопіюйте код у буфер обміну

{myMarkdownContent.use({  h1: (props) => <h1 style={{ color: "red" }}>{props.children}</h1>,})}

{myMarkdownContent.use({  h1: (props) => <h1 style={{ color: "red" }}>{props.children}</h1>,})}

Ви можете отримати Markdown як рядок:

tsx

Копіювати код

Скопіюйте код у буфер обміну

{myMarkdownContent.value}{String(myMarkdownContent)}{myMarkdownContent.toString()}

{myMarkdownContent.value}{String(myMarkdownContent)}{myMarkdownContent.toString()}

І ви можете отримати доступ до метаданих markdown наступним чином:

tsx

Копіювати код

Скопіюйте код у буфер обміну

{myMarkdownContent.metadata}{myMarkdownContent.metadata.title}

{myMarkdownContent.metadata}{myMarkdownContent.metadata.title}

Angular використовує директиву [innerHTML] для рендерингу вмісту Markdown.

app.component.ts

Копіювати код

Скопіюйте код у буфер обміну

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-root",  template: `<div [innerHTML]="content().myMarkdownContent"></div>`,})export class AppComponent {  content = useIntlayer("app");}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({  selector: "app-root",  template: `<div [innerHTML]="content().myMarkdownContent"></div>`,})export class AppComponent {  content = useIntlayer("app");}

Якщо провайдер IntlayerMarkdown не налаштовано, Intlayer рендеритиме за допомогою компілятора за замовчуванням.

Ви також можете надати локальні перевизначення для конкретних вузлів за допомогою методу .use():

typescript

Копіювати код

Скопіюйте код у буфер обміну

content().myMarkdownContent.use({  h1: { class: "text-3xl font-bold" },})

content().myMarkdownContent.use({  h1: { class: "text-3xl font-bold" },})

Ви можете отримати Markdown як рядок:

typescript

Копіювати код

Скопіюйте код у буфер обміну

content().myMarkdownContent.valueString(content().myMarkdownContent)content().myMarkdownContent.toString()

content().myMarkdownContent.valueString(content().myMarkdownContent)content().myMarkdownContent.toString()

І ви можете отримати доступ до метаданих markdown наступним чином:

typescript

Копіювати код

Скопіюйте код у буфер обміну

content().myMarkdownContent.metadatacontent().myMarkdownContent.metadata.title

content().myMarkdownContent.metadatacontent().myMarkdownContent.metadata.title

2. Допоміжні утиліти (тільки рядки Markdown)

Ці утиліти рендерять тільки необроблені рядки Markdown і не залежать від useIntlayer. Використовуйте їх, коли вам потрібно відрендерити Markdown з джерел, відмінних від ваших словників.

Компонент `<MarkdownRenderer />`

Рендерить рядок Markdown з певними опціями.

tsx

Копіювати код

Скопіюйте код у буфер обміну

import { MarkdownRenderer } from "react-intlayer/markdown";<MarkdownRenderer forceBlock={true} tagfilter={true}>  {"# Мій Заголовок"}</MarkdownRenderer>

import { MarkdownRenderer } from "react-intlayer/markdown";<MarkdownRenderer forceBlock={true} tagfilter={true}>  {"# Мій Заголовок"}</MarkdownRenderer>

Хук `useMarkdownRenderer()`

Отримайте попередньо налаштовану функцію рендерингу.

tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useMarkdownRenderer } from "react-intlayer/markdown";const renderMarkdown = useMarkdownRenderer({  forceBlock: true,  components: { h1: (props) => <h1 {...props} className="custom" /> }});return renderMarkdown("# Мій Заголовок");

import { useMarkdownRenderer } from "react-intlayer/markdown";const renderMarkdown = useMarkdownRenderer({  forceBlock: true,  components: { h1: (props) => <h1 {...props} className="custom" /> }});return renderMarkdown("# Мій Заголовок");

Утиліта `renderMarkdown()`

Окрема утиліта для рендерингу поза компонентами.

tsx

Копіювати код

Скопіюйте код у буфер обміну

import { renderMarkdown } from "react-intlayer/markdown";const jsx = renderMarkdown("# Мій Заголовок", { forceBlock: true });

import { renderMarkdown } from "react-intlayer/markdown";const jsx = renderMarkdown("# Мій Заголовок", { forceBlock: true });

Компонент `<MarkdownRenderer />`

Рендерить рядок Markdown з певними опціями.

tsx

Копіювати код

Скопіюйте код у буфер обміну

import { MarkdownRenderer } from "next-intlayer/markdown";<MarkdownRenderer forceBlock={true} tagfilter={true}>  {"# Мій Заголовок"}</MarkdownRenderer>

import { MarkdownRenderer } from "next-intlayer/markdown";<MarkdownRenderer forceBlock={true} tagfilter={true}>  {"# Мій Заголовок"}</MarkdownRenderer>

Хук `useMarkdownRenderer()`

Отримайте попередньо налаштовану функцію рендерингу.

tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useMarkdownRenderer } from "next-intlayer/markdown";const renderMarkdown = useMarkdownRenderer({  forceBlock: true,  components: { h1: (props) => <h1 {...props} className="custom" /> }});return renderMarkdown("# Мій Заголовок");

import { useMarkdownRenderer } from "next-intlayer/markdown";const renderMarkdown = useMarkdownRenderer({  forceBlock: true,  components: { h1: (props) => <h1 {...props} className="custom" /> }});return renderMarkdown("# Мій Заголовок");

Утиліта `renderMarkdown()`

Окрема утиліта для рендерингу поза компонентами.

tsx

Копіювати код

Скопіюйте код у буфер обміну

import { renderMarkdown } from "next-intlayer/markdown";const jsx = renderMarkdown("# Мій Заголовок", { forceBlock: true });

import { renderMarkdown } from "next-intlayer/markdown";const jsx = renderMarkdown("# Мій Заголовок", { forceBlock: true });

Компонент `<MarkdownRenderer />`

vue

Копіювати код

Скопіюйте код у буфер обміну

<script setup>import { MarkdownRenderer } from "vue-intlayer/markdown";</script><template>  <MarkdownRenderer :forceBlock="true" content="# Мій Заголовок" /></template>

<script setup>import { MarkdownRenderer } from "vue-intlayer/markdown";</script><template>  <MarkdownRenderer :forceBlock="true" content="# Мій Заголовок" /></template>

Компонент `<MarkdownRenderer />`

svelte

Копіювати код

Скопіюйте код у буфер обміну

<script lang="ts">import { MarkdownRenderer } from "svelte-intlayer/markdown";</script><MarkdownRenderer forceBlock={true} value="# Мій Заголовок" />

<script lang="ts">import { MarkdownRenderer } from "svelte-intlayer/markdown";</script><MarkdownRenderer forceBlock={true} value="# Мій Заголовок" />

Хук `useMarkdownRenderer()`

svelte

Копіювати код

Скопіюйте код у буфер обміну

<script lang="ts">import { useMarkdownRenderer } from "svelte-intlayer/markdown";const render = useMarkdownRenderer();</script>{@html render("# Мій Заголовок")}

<script lang="ts">import { useMarkdownRenderer } from "svelte-intlayer/markdown";const render = useMarkdownRenderer();</script>{@html render("# Мій Заголовок")}

Утиліта `renderMarkdown()`

svelte

Копіювати код

Скопіюйте код у буфер обміну

<script lang="ts">import { renderMarkdown } from "svelte-intlayer/markdown";</script>{@html renderMarkdown("# Мій Заголовок")}

<script lang="ts">import { renderMarkdown } from "svelte-intlayer/markdown";</script>{@html renderMarkdown("# Мій Заголовок")}

Компонент `<MarkdownRenderer />`

tsx

Копіювати код

Скопіюйте код у буфер обміну

import { MarkdownRenderer } from "preact-intlayer/markdown";<MarkdownRenderer forceBlock={true}>  {"# Мій Заголовок"}</MarkdownRenderer>

import { MarkdownRenderer } from "preact-intlayer/markdown";<MarkdownRenderer forceBlock={true}>  {"# Мій Заголовок"}</MarkdownRenderer>

Хук `useMarkdownRenderer()`

tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useMarkdownRenderer } from "preact-intlayer/markdown";const render = useMarkdownRenderer();return <div>{render("# Мій Заголовок")}</div>;

import { useMarkdownRenderer } from "preact-intlayer/markdown";const render = useMarkdownRenderer();return <div>{render("# Мій Заголовок")}</div>;

Утиліта `renderMarkdown()`

tsx

Копіювати код

Скопіюйте код у буфер обміну

import { renderMarkdown } from "preact-intlayer/markdown";return <div>{renderMarkdown("# Мій Заголовок")}</div>;

import { renderMarkdown } from "preact-intlayer/markdown";return <div>{renderMarkdown("# Мій Заголовок")}</div>;

Компонент `<MarkdownRenderer />`

tsx

Копіювати код

Скопіюйте код у буфер обміну

import { MarkdownRenderer } from "solid-intlayer/markdown";<MarkdownRenderer forceBlock={true}>  {"# Мій Заголовок"}</MarkdownRenderer>

import { MarkdownRenderer } from "solid-intlayer/markdown";<MarkdownRenderer forceBlock={true}>  {"# Мій Заголовок"}</MarkdownRenderer>

Хук `useMarkdownRenderer()`

tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useMarkdownRenderer } from "solid-intlayer/markdown";const render = useMarkdownRenderer();return <div>{render("# Мій Заголовок")}</div>;

import { useMarkdownRenderer } from "solid-intlayer/markdown";const render = useMarkdownRenderer();return <div>{render("# Мій Заголовок")}</div>;

Утиліта `renderMarkdown()`

tsx

Копіювати код

Скопіюйте код у буфер обміну

import { renderMarkdown } from "solid-intlayer/markdown";return <div>{renderMarkdown("# Мій Заголовок")}</div>;

import { renderMarkdown } from "solid-intlayer/markdown";return <div>{renderMarkdown("# Мій Заголовок")}</div>;

Сервіс `IntlayerMarkdownService`

Рендерить рядок Markdown за допомогою сервісу.

typescript

Копіювати код

Скопіюйте код у буфер обміну

import { IntlayerMarkdownService } from "angular-intlayer/markdown";export class MyComponent {  constructor(private markdownService: IntlayerMarkdownService) {}  renderMarkdown(markdown: string) {    return this.markdownService.renderMarkdown(markdown);  }}

import { IntlayerMarkdownService } from "angular-intlayer/markdown";export class MyComponent {  constructor(private markdownService: IntlayerMarkdownService) {}  renderMarkdown(markdown: string) {    return this.markdownService.renderMarkdown(markdown);  }}

Глобальне налаштування за допомогою `MarkdownProvider`

MarkdownProvider (або його еквівалент у фреймворку) налаштовує конвеєр рендерингу Markdown для всього вашого додатку. Це стосується як автоматичного рендерингу useIntlayer, так і допоміжних утиліт. Налаштування, вказані тут, є значеннями за замовчуванням — .use() перевизначає їх на рівні вузла.

AppProvider.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { MarkdownProvider } from "react-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    components={{      h1: (props) => <h1 style={{color: 'green'}} {...props} />,      a: ({ href, ...props }) => <a style={{color: 'red'}} {...props} />,      MyCustomJSXComponent: (props) => <span style={{color: 'red'}} {...props} />,    }}  >    {children}  </MarkdownProvider>);

import { MarkdownProvider } from "react-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    components={{      h1: (props) => <h1 style={{color: 'green'}} {...props} />,      a: ({ href, ...props }) => <a style={{color: 'red'}} {...props} />,      MyCustomJSXComponent: (props) => <span style={{color: 'red'}} {...props} />,    }}  >    {children}  </MarkdownProvider>);

Підтримується MDX — будь-яка назва компонента, яка використовується всередині вашого Markdown (наприклад, <MyCustomJSXComponent />), розпізнається відповідно до карти components.

Ви також можете використовувати власний рендерер markdown:

AppProvider.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { MarkdownProvider } from "react-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    renderMarkdown={async (md) => {      // Use dynamic import to reduce the bundle size of your application      const { renderMarkdown } = await import('react-intlayer/markdown');      return renderMarkdown(md);    }}  >    {children}  </MarkdownProvider>);

import { MarkdownProvider } from "react-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    renderMarkdown={async (md) => {      // Use dynamic import to reduce the bundle size of your application      const { renderMarkdown } = await import('react-intlayer/markdown');      return renderMarkdown(md);    }}  >    {children}  </MarkdownProvider>);

Динамічний імпорт вашого рендерера Markdown — чудовий спосіб зменшити розмір бандлу вашого додатка.

AppProvider.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { MarkdownProvider } from "next-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    components={{      h1: (props) => <h1 style={{color: 'green'}} {...props} />,      a: ({ href, ...props }) => <a style={{color: 'red'}} {...props} />,      MyCustomJSXComponent: (props) => <span style={{color: 'red'}} {...props} />,    }}  >    {children}  </MarkdownProvider>);

import { MarkdownProvider } from "next-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    components={{      h1: (props) => <h1 style={{color: 'green'}} {...props} />,      a: ({ href, ...props }) => <a style={{color: 'red'}} {...props} />,      MyCustomJSXComponent: (props) => <span style={{color: 'red'}} {...props} />,    }}  >    {children}  </MarkdownProvider>);

Підтримується MDX — будь-яка назва компонента, яка використовується всередині вашого Markdown (наприклад, <MyCustomJSXComponent />), розпізнається відповідно до карти components.

Ви також можете використовувати власний рендерер markdown:

AppProvider.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { MarkdownProvider } from "next-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    renderMarkdown={async (md) => {      // Use dynamic import to reduce the bundle size of your application      const { renderMarkdown } = await import('next-intlayer/markdown');      return renderMarkdown(md);    }}  >    {children}  </MarkdownProvider>);

import { MarkdownProvider } from "next-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    renderMarkdown={async (md) => {      // Use dynamic import to reduce the bundle size of your application      const { renderMarkdown } = await import('next-intlayer/markdown');      return renderMarkdown(md);    }}  >    {children}  </MarkdownProvider>);

Динамічний імпорт вашого рендерера Markdown — чудовий спосіб зменшити розмір бандлу вашого додатка.

main.ts

Копіювати код

Скопіюйте код у буфер обміну

import { createApp } from "vue";import { intlayer } from "vue-intlayer";import { intlayerMarkdown } from "vue-intlayer/markdown";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerMarkdown, {  components: {    h1: (props) =>    h('h1', { style: { color: 'orange' }, ...props }, props.children),    ComponentDemo: () => h('div', { style: { background: 'grey' } }, 'DEMO'),    bold: (props) => h('strong', props),    code: (props) => h('code', props),  },});app.mount("#app");

import { createApp } from "vue";import { intlayer } from "vue-intlayer";import { intlayerMarkdown } from "vue-intlayer/markdown";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerMarkdown, {  components: {    h1: (props) =>    h('h1', { style: { color: 'orange' }, ...props }, props.children),    ComponentDemo: () => h('div', { style: { background: 'grey' } }, 'DEMO'),    bold: (props) => h('strong', props),    code: (props) => h('code', props),  },});app.mount("#app");

Підтримується MDX — будь-яка назва компонента, яка використовується всередині вашого Markdown (наприклад, <MyCustomJSXComponent />), розпізнається відповідно до карти components.

Ви також можете використовувати власний рендерер markdown:

main.ts

Копіювати код

Скопіюйте код у буфер обміну

import { createApp } from "vue";import { intlayer } from "vue-intlayer";import { intlayerMarkdown } from "vue-intlayer/markdown";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerMarkdown, {  renderMarkdown: async (md) => {    const { renderMarkdown } = await import('vue-intlayer/markdown');    return renderMarkdown(md);  },});app.mount("#app");

import { createApp } from "vue";import { intlayer } from "vue-intlayer";import { intlayerMarkdown } from "vue-intlayer/markdown";import App from "./App.vue";const app = createApp(App);app.use(intlayer);app.use(intlayerMarkdown, {  renderMarkdown: async (md) => {    const { renderMarkdown } = await import('vue-intlayer/markdown');    return renderMarkdown(md);  },});app.mount("#app");

Динамічний імпорт вашого рендерера Markdown — чудовий спосіб зменшити розмір бандлу вашого додатка.

App.svelte

Копіювати код

Скопіюйте код у буфер обміну

<script lang="ts">  import { MarkdownProvider } from "svelte-intlayer/markdown";  import MyHeading from "./MyHeading.svelte";</script><MarkdownProvider  components={{    h1: MyHeading,  }}>  <slot /></MarkdownProvider>

<script lang="ts">  import { MarkdownProvider } from "svelte-intlayer/markdown";  import MyHeading from "./MyHeading.svelte";</script><MarkdownProvider  components={{    h1: MyHeading,  }}>  <slot /></MarkdownProvider>

Підтримується MDX — будь-яка назва компонента, яка використовується всередині вашого Markdown (наприклад, <MyCustomJSXComponent />), розпізнається відповідно до карти components.

Ви також можете використовувати власний рендерер markdown:

App.svelte

Копіювати код

Скопіюйте код у буфер обміну

<script lang="ts">  import { MarkdownProvider } from "svelte-intlayer/markdown";</script><MarkdownProvider  renderMarkdown={async (md) => {    const { renderMarkdown } = await import('svelte-intlayer/markdown');    return renderMarkdown(md);  }}>  <slot /></MarkdownProvider>

<script lang="ts">  import { MarkdownProvider } from "svelte-intlayer/markdown";</script><MarkdownProvider  renderMarkdown={async (md) => {    const { renderMarkdown } = await import('svelte-intlayer/markdown');    return renderMarkdown(md);  }}>  <slot /></MarkdownProvider>

Динамічний імпорт вашого рендерера Markdown — чудовий спосіб зменшити розмір бандлу вашого додатка.

AppProvider.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { MarkdownProvider } from "preact-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    components={{      h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,    }}  >    {children}  </MarkdownProvider>);

import { MarkdownProvider } from "preact-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    components={{      h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,    }}  >    {children}  </MarkdownProvider>);

Підтримується MDX — будь-яка назва компонента, яка використовується всередині вашого Markdown (наприклад, <MyCustomJSXComponent />), розпізнається відповідно до карти components.

Ви також можете використовувати власний рендерер markdown:

AppProvider.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { MarkdownProvider } from "preact-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    renderMarkdown={async (md) => {      const { renderMarkdown } = await import('preact-intlayer/markdown');      return renderMarkdown(md);    }}  >    {children}  </MarkdownProvider>);

import { MarkdownProvider } from "preact-intlayer/markdown";export const AppProvider = ({ children }) => (  <MarkdownProvider    renderMarkdown={async (md) => {      const { renderMarkdown } = await import('preact-intlayer/markdown');      return renderMarkdown(md);    }}  >    {children}  </MarkdownProvider>);

Динамічний імпорт вашого рендерера Markdown — чудовий спосіб зменшити розмір бандлу вашого додатка.

AppProvider.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { MarkdownProvider } from "solid-intlayer/markdown";export const AppProvider = (props) => (  <MarkdownProvider    components={{      h1: (props) => <h1 className="text-2xl font-bold">{props.children}</h1>,    }}  >    {props.children}  </MarkdownProvider>);

import { MarkdownProvider } from "solid-intlayer/markdown";export const AppProvider = (props) => (  <MarkdownProvider    components={{      h1: (props) => <h1 className="text-2xl font-bold">{props.children}</h1>,    }}  >    {props.children}  </MarkdownProvider>);

Підтримується MDX — будь-яка назва компонента, яка використовується всередині вашого Markdown (наприклад, <MyCustomJSXComponent />), розпізнається відповідно до карти components.

Ви також можете використовувати власний рендерер markdown:

AppProvider.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { MarkdownProvider } from "solid-intlayer/markdown";export const AppProvider = (props) => (  <MarkdownProvider    renderMarkdown={async (md) => {      const { renderMarkdown } = await import('solid-intlayer/markdown');      return renderMarkdown(md);    }}  >    {props.children}  </MarkdownProvider>);

import { MarkdownProvider } from "solid-intlayer/markdown";export const AppProvider = (props) => (  <MarkdownProvider    renderMarkdown={async (md) => {      const { renderMarkdown } = await import('solid-intlayer/markdown');      return renderMarkdown(md);    }}  >    {props.children}  </MarkdownProvider>);

Динамічний імпорт вашого рендерера Markdown — чудовий спосіб зменшити розмір бандлу вашого додатка.

app.module.ts

Копіювати код

Скопіюйте код у буфер обміну

import { NgModule } from '@angular/core';import { IntlayerMarkdownModule } from 'angular-intlayer/markdown';@NgModule({  imports: [    IntlayerMarkdownModule.forRoot({      renderMarkdown: async (md) => {        const { renderMarkdown } = await import('angular-intlayer/markdown');        return renderMarkdown(md);      }    })  ]})export class AppModule {}

import { NgModule } from '@angular/core';import { IntlayerMarkdownModule } from 'angular-intlayer/markdown';@NgModule({  imports: [    IntlayerMarkdownModule.forRoot({      renderMarkdown: async (md) => {        const { renderMarkdown } = await import('angular-intlayer/markdown');        return renderMarkdown(md);      }    })  ]})export class AppModule {}

Динамічний імпорт вашого рендерера Markdown — чудовий спосіб зменшити розмір бандлу вашого додатка.

Suspense

Рендерер Markdown Intlayer завантажується динамічно. Хоча він оптимізований, базовий фрагмент аналізатора становить близько 55 кБ. Синхронне завантаження цього затримує початковий рендеринг сторінки та погіршує First Contentful Paint (FCP).

Щоб запобігти блокуванню інтерфейсу користувача, Intlayer інтегрується з API Suspense від React. Він завантажує аналізатор у фоновому режимі та створює Promise під час завантаження.

Оберніть будь-який компонент, що відображає Intlayer Markdown, у межу <Suspense>. Це показує локалізований резервний стан під час завантаження фрагмента, дозволяючи решті вашого DOM відображатися негайно.

Попередження: Якщо ви не надасте межу <Suspense>, React призупинить рендеринг на кореневому рівні або заблокує рендеринг всього дерева компонентів, доки фрагмент у 55 кБ не буде повністю завантажений.

У маршрутизаторі Next.js App Router ви можете використовувати або React Suspense для клієнтських компонентів, або файл loading.tsx для серверних компонентів.

Клієнтський компонент:

components/MyComponent.tsx

Копіювати код

Скопіюйте код у буфер обміну

"use client";import { useIntlayer } from "next-intlayer";import { Suspense } from "react";const MyComponent = () => {const markdownContent = useIntlayer("my-markdown");return (  <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>);};

"use client";import { useIntlayer } from "next-intlayer";import { Suspense } from "react";const MyComponent = () => {const markdownContent = useIntlayer("my-markdown");return (  <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>);};

Серверний компонент з loading.tsx:

app/loading.tsx

Копіювати код

Скопіюйте код у буфер обміну

export default function Loading() {return <div>Loading...</div>;}

export default function Loading() {return <div>Loading...</div>;}

app/page.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useIntlayer } from "next-intlayer/server";const MyPage = () => {const markdownContent = useIntlayer("my-markdown");return <div>{markdownContent}</div>;};export default MyPage;

import { useIntlayer } from "next-intlayer/server";const MyPage = () => {const markdownContent = useIntlayer("my-markdown");return <div>{markdownContent}</div>;};export default MyPage;

tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useIntlayer } from "react-intlayer";import { Suspense } from "react";const MyComponent = () => {const markdownContent = useIntlayer("my-markdown");return (  <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>);};

import { useIntlayer } from "react-intlayer";import { Suspense } from "react";const MyComponent = () => {const markdownContent = useIntlayer("my-markdown");return (  <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>);};

Vue має вбудований компонент <Suspense>. Оберніть компонент, який відображає вміст Markdown, у межу <Suspense>.

MyComponent.vue

Копіювати код

Скопіюйте код у буфер обміну

<script setup>import { useIntlayer } from "vue-intlayer";const { markdownContent } = useIntlayer("my-markdown");</script><template><Suspense>  <component :is="markdownContent" />  <template #fallback>    <div>Loading...</div>  </template></Suspense></template>

<script setup>import { useIntlayer } from "vue-intlayer";const { markdownContent } = useIntlayer("my-markdown");</script><template><Suspense>  <component :is="markdownContent" />  <template #fallback>    <div>Loading...</div>  </template></Suspense></template>

Svelte не має еквівалента API Suspense. Використовуйте блок {#await} для обробки асинхронного рендерингу вмісту Markdown.

MyComponent.svelte

Копіювати код

Скопіюйте код у буфер обміну

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("my-markdown");</script>{#await $content.markdownContent}<div>Loading...</div>{:then rendered}{@html rendered}{/await}

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("my-markdown");</script>{#await $content.markdownContent}<div>Loading...</div>{:then rendered}{@html rendered}{/await}

Preact підтримує API React Suspense через preact/compat.

MyComponent.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useIntlayer } from "preact-intlayer";import { Suspense } from "preact/compat";const MyComponent = () => {const markdownContent = useIntlayer("my-markdown");return (  <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>);};

import { useIntlayer } from "preact-intlayer";import { Suspense } from "preact/compat";const MyComponent = () => {const markdownContent = useIntlayer("my-markdown");return (  <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>);};

Solid має власний компонент <Suspense> від solid-js.

MyComponent.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useIntlayer } from "solid-intlayer";import { Suspense } from "solid-js";const MyComponent = () => {const { markdownContent } = useIntlayer("my-markdown");return (  <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>);};

import { useIntlayer } from "solid-intlayer";import { Suspense } from "solid-js";const MyComponent = () => {const { markdownContent } = useIntlayer("my-markdown");return (  <Suspense fallback={<div>Loading...</div>}>{markdownContent}</Suspense>);};

Angular не має API Suspense. Використовуйте відкладені представлення (@defer) в Angular для обробки вмісту Markdown із відкладеним завантаженням (потрібен Angular 17+).

my.component.ts

Копіювати код

Скопіюйте код у буфер обміну

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-my",template: `  @defer {    <div [innerHTML]="content().markdownContent"></div>  } @loading {    <div>Loading...</div>  }`,})export class MyComponent {content = useIntlayer("my-markdown");}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-my",template: `  @defer {    <div [innerHTML]="content().markdownContent"></div>  } @loading {    <div>Loading...</div>  }`,})export class MyComponent {content = useIntlayer("my-markdown");}

Рендеринг на стороні сервера (SSR) та гідратація

У порівнянні з іншими парсерами Markdown, такими як remark / rehype, Intlayer Markdown не має залежностей і працює як на клієнті, так і на сервері.

Однак Intlayer оптимізує синтаксичний аналіз для фреймворків серверного рендерингу (SSR) (таких як Next.js App Router, React Router, Nuxt, SvelteKit тощо).

Замість надсилання необроблених рядків Markdown клієнту та їх аналізу в браузері (що призводить до зниження продуктивності), Intlayer дозволяє попередньо проаналізувати Markdown в абстрактне синтаксичне дерево (AST) на сервері.

Ви можете використовувати функцію parseMarkdown з пакету Intlayer вашого фреймворку на стороні сервера для генерації серіалізованого AST (об'єкта ParsedMarkdown) і передачі його безпосередньо на фронтенд. Всі утиліти рендерингу Intlayer (такі як <MarkdownRenderer>, useMarkdownRenderer тощо) автоматично приймають цей об'єкт AST і плавно рендерять його.

Приклад в архітектурі Сервер/Клієнт

server.ts

Копіювати код

Скопіюйте код у буфер обміну

import { parseMarkdown } from "react-intlayer/markdown";// 1. На сервері: перетворити markdown на серіалізоване ASTexport const loader = async () => {  const markdownString = "## My title \n\nLorem Ipsum";  const ast = parseMarkdown(markdownString);  // Повернути AST клієнту у форматі JSON  return Response.json({ content: ast });};

import { parseMarkdown } from "react-intlayer/markdown";// 1. На сервері: перетворити markdown на серіалізоване ASTexport const loader = async () => {  const markdownString = "## My title \n\nLorem Ipsum";  const ast = parseMarkdown(markdownString);  // Повернути AST клієнту у форматі JSON  return Response.json({ content: ast });};

client.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { useLoaderData } from "react-router";import { MarkdownRenderer } from "react-intlayer/markdown";// 2. На клієнті: відрендерити AST безпосередньо без повторного аналізуexport default function Page() {  const { content } = useLoaderData();  // Рендерер приймає або необроблений рядок, або проаналізоване AST  return <MarkdownRenderer content={content} />;}

import { useLoaderData } from "react-router";import { MarkdownRenderer } from "react-intlayer/markdown";// 2. На клієнті: відрендерити AST безпосередньо без повторного аналізуexport default function Page() {  const { content } = useLoaderData();  // Рендерер приймає або необроблений рядок, або проаналізоване AST  return <MarkdownRenderer content={content} />;}

app/page.tsx

Копіювати код

Скопіюйте код у буфер обміну

import { parseMarkdown } from "next-intlayer/markdown";import { MarkdownRenderer } from "next-intlayer/markdown";export default async function Page() {  // 1. Перетворити markdown на серіалізоване AST на сервері  const markdownString = "## My title \n\nLorem Ipsum";  const ast = parseMarkdown(markdownString);  // 2. Відрендерити AST безпосередньо  // У серверному компоненті це працює безшовно і передає AST// безпосередньо в базові клієнтські компоненти, якщо це необхідно.  return <MarkdownRenderer content={ast} />;}

import { parseMarkdown } from "next-intlayer/markdown";import { MarkdownRenderer } from "next-intlayer/markdown";export default async function Page() {  // 1. Перетворити markdown на серіалізоване AST на сервері  const markdownString = "## My title \n\nLorem Ipsum";  const ast = parseMarkdown(markdownString);  // 2. Відрендерити AST безпосередньо  // У серверному компоненті це працює безшовно і передає AST// безпосередньо в базові клієнтські компоненти, якщо це необхідно.  return <MarkdownRenderer content={ast} />;}

pages/index.vue

Копіювати код

Скопіюйте код у буфер обміну

<script setup lang="ts">import { parseMarkdown } from "vue-intlayer/markdown";import { MarkdownRenderer } from "vue-intlayer/markdown";// 1. Отримати та перетворити markdown на AST на серверіconst { data: ast } = await useAsyncData('markdown', () => {  const markdownString = "## My title \n\nLorem Ipsum";  return parseMarkdown(markdownString);});</script><template>  <!-- 2. На клієнті: відрендерити AST безпосередньо без повторного аналізу -->  <MarkdownRenderer :content="ast" /></template>

<script setup lang="ts">import { parseMarkdown } from "vue-intlayer/markdown";import { MarkdownRenderer } from "vue-intlayer/markdown";// 1. Отримати та перетворити markdown на AST на серверіconst { data: ast } = await useAsyncData('markdown', () => {  const markdownString = "## My title \n\nLorem Ipsum";  return parseMarkdown(markdownString);});</script><template>  <!-- 2. На клієнті: відрендерити AST безпосередньо без повторного аналізу -->  <MarkdownRenderer :content="ast" /></template>

+page.server.ts

Копіювати код

Скопіюйте код у буфер обміну

import { parseMarkdown } from "svelte-intlayer/markdown";// 1. На сервері: перетворити markdown на серіалізоване ASTexport const load = async () => {  const markdownString = "## My title \n\nLorem Ipsum";  const ast = parseMarkdown(markdownString);  // Повернути AST клієнту  return { content: ast };};

import { parseMarkdown } from "svelte-intlayer/markdown";// 1. На сервері: перетворити markdown на серіалізоване ASTexport const load = async () => {  const markdownString = "## My title \n\nLorem Ipsum";  const ast = parseMarkdown(markdownString);  // Повернути AST клієнту  return { content: ast };};

+page.svelte

Копіювати код

Скопіюйте код у буфер обміну

<script lang="ts">  import { MarkdownRenderer } from "svelte-intlayer/markdown";  export let data;</script><!-- 2. На клієнті: відрендерити AST безпосередньо без повторного аналізу --><MarkdownRenderer value={data.content} />

<script lang="ts">  import { MarkdownRenderer } from "svelte-intlayer/markdown";  export let data;</script><!-- 2. На клієнті: відрендерити AST безпосередньо без повторного аналізу --><MarkdownRenderer value={data.content} />

Angular SSR зазвичай отримує дані на сервері під час початкового завантаження та виконує гідратацію на клієнті. Ви можете використовувати резолвери для передачі AST.

app.resolver.ts

Копіювати код

Скопіюйте код у буфер обміну

import { Injectable } from "@angular/core";import { Resolve } from "@angular/router";import { parseMarkdown, type ParsedMarkdown } from "angular-intlayer/markdown";@Injectable({ providedIn: "root" })export class MarkdownResolver implements Resolve<ParsedMarkdown> {  resolve(): ParsedMarkdown {    const markdownString = "## My title \n\nLorem Ipsum";    // 1. На сервері: перетворити markdown на серіалізоване AST    return parseMarkdown(markdownString);  }}

import { Injectable } from "@angular/core";import { Resolve } from "@angular/router";import { parseMarkdown, type ParsedMarkdown } from "angular-intlayer/markdown";@Injectable({ providedIn: "root" })export class MarkdownResolver implements Resolve<ParsedMarkdown> {  resolve(): ParsedMarkdown {    const markdownString = "## My title \n\nLorem Ipsum";    // 1. На сервері: перетворити markdown на серіалізоване AST    return parseMarkdown(markdownString);  }}

app.component.ts

Копіювати код

Скопіюйте код у буфер обміну

import { Component } from "@angular/core";import { ActivatedRoute } from "@angular/router";import { IntlayerMarkdownService, type ParsedMarkdown } from "angular-intlayer/markdown";@Component({  selector: "app-root",  template: `<div [innerHTML]="renderedMarkdown"></div>`,})export class AppComponent {  renderedMarkdown: string = "";  constructor(    private route: ActivatedRoute,    private markdownService: IntlayerMarkdownService  ) {    // 2. На клієнті: відрендерити AST безпосередньо без повторного аналізу    this.route.data.subscribe((data) => {      this.renderedMarkdown = this.markdownService.renderMarkdown(        data.markdownAst      ) as string;    });  }}

import { Component } from "@angular/core";import { ActivatedRoute } from "@angular/router";import { IntlayerMarkdownService, type ParsedMarkdown } from "angular-intlayer/markdown";@Component({  selector: "app-root",  template: `<div [innerHTML]="renderedMarkdown"></div>`,})export class AppComponent {  renderedMarkdown: string = "";  constructor(    private route: ActivatedRoute,    private markdownService: IntlayerMarkdownService  ) {    // 2. На клієнті: відрендерити AST безпосередньо без повторного аналізу    this.route.data.subscribe((data) => {      this.renderedMarkdown = this.markdownService.renderMarkdown(        data.markdownAst      ) as string;    });  }}

Цей підхід гарантує, що логіка аналізу Markdown повністю виконується на сервері, що значно скорочує час виконання на стороні клієнта та підвищує швидкість початкової гідратації.

Довідник опцій

Ці параметри можна передати до MarkdownProvider, MarkdownRenderer, useMarkdownRenderer та renderMarkdown.

Показати весь вміст таблиці

Відкрийте таблицю в модальному вікні, щоб чітко переглянути всі дані

Option	Type	Default	Опис
`forceBlock`	`boolean`	`false`	Примушує вивід обгортатися блочним елементом (наприклад, `<div>`).
`forceInline`	`boolean`	`false`	Примушує вивід обгортатися вбудованим елементом (наприклад, `<span>`).
`tagfilter`	`boolean`	`true`	Увімкнює фільтр тегів GitHub для підвищення безпеки шляхом видалення небезпечних тегів HTML.
`preserveFrontmatter`	`boolean`	`false`	Якщо `true`, початкові метадані (frontmatter) на початку рядка Markdown не будуть видалені.
`components`	`Overrides`	`{}`	Карта тегів HTML до власних компонентів (наприклад, `{ h1: MyHeading }`).
`wrapper`	`Component`	`null`	Спеціальний компонент для обгортання відображеного Markdown.
`renderMarkdown`	`Function`	`null`	Власна функція рендерингу для повної заміни компілятора Markdown за замовчуванням.

Вкладеність

HTML

{children}

{children}

{props.children}

{props.children}

{children}

{props.children}

Історія версій

Markdown / Вміст форматованого тексту

Оголошення вмісту Markdown

Рендеринг Markdown

1. Автоматичний рендеринг (через useIntlayer)

2. Допоміжні утиліти (тільки рядки Markdown)

Компонент <MarkdownRenderer />

Хук useMarkdownRenderer()

Утиліта renderMarkdown()

Глобальне налаштування за допомогою MarkdownProvider

Suspense

Рендеринг на стороні сервера (SSR) та гідратація

Приклад в архітектурі Сервер/Клієнт

Довідник опцій

1. Автоматичний рендеринг (через `useIntlayer`)

Компонент `<MarkdownRenderer />`

Хук `useMarkdownRenderer()`

Утиліта `renderMarkdown()`

Глобальне налаштування за допомогою `MarkdownProvider`