@intlayer/docs 8.10.0-canary.0 → 8.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,7 +2,7 @@
2
2
  createdAt: 2025-02-07
3
3
  updatedAt: 2026-05-19
4
4
  title: Markdown
5
- description: Узнайте, как объявлять и использовать Markdown-контент на вашем многоязычном сайте с помощью Intlayer. Следуйте шагам этой онлайн-документации, чтобы без проблем интегрировать Markdown в ваш проект.
5
+ description: Узнайте, как объявлять и использовать Markdown-контент на вашем многоязычном сайте с помощью Intlayer. Следуйте инструкциям в этой документации, чтобы легко интегрировать Markdown в ваш проект.
6
6
  keywords:
7
7
  - Markdown
8
8
  - Интернационализация
@@ -22,46 +22,46 @@ history:
22
22
  changes: "Добавлена поддержка файлов `.content.md`"
23
23
  - version: 8.5.0
24
24
  date: 2026-03-24
25
- changes: "Add `intlayerMarkdown` plugin object; use `app.use(intlayerMarkdown)` instead of `app.use(installIntlayerMarkdown)`"
25
+ changes: "Добавлен объект плагина `intlayerMarkdown`; используйте `app.use(intlayerMarkdown)` вместо `app.use(installIntlayerMarkdown)`"
26
26
  - version: 8.5.0
27
27
  date: 2026-03-24
28
- changes: "Перенос импортов из {{framework}}-intlayer в {{framework}}-intlayer/markdown"
28
+ changes: "перенос импорта из `{{framework}}-intlayer` в `{{framework}}-intlayer/markdown`"
29
29
  - version: 8.0.0
30
30
  date: 2026-01-22
31
- changes: "Добавлены MarkdownRenderer / useMarkdownRenderer / renderMarkdown и опция forceInline"
31
+ changes: "Добавление утилит MarkdownRenderer / useMarkdownRenderer / renderMarkdown и опции forceInline"
32
32
  - version: 8.0.0
33
33
  date: 2026-01-18
34
- changes: "Автоматическое оформление содержимого markdown, поддержка MDX и SSR"
34
+ changes: "Автоматическое декорирование Markdown-контента, поддержка MDX и SSR"
35
35
  - version: 5.5.10
36
36
  date: 2025-06-29
37
37
  changes: "Инициализация истории"
38
38
  ---
39
39
 
40
- # Markdown / Содержимое с богатым текстом
40
+ # Markdown / Форматированный текст
41
41
 
42
- Intlayer поддерживает содержимое с богатым текстом, определенное с использованием синтаксиса Markdown. Это позволяет легко писать и поддерживать контент с богатым форматированием, такой как блоги, статьи и многое другое.
42
+ Intlayer поддерживает форматированный текстовый контент, определенный с использованием синтаксиса Markdown. Это позволяет легко писать и поддерживать контент со сложным форматированием, такой как блоги, статьи и многое другое.
43
43
 
44
- ## Объявление контента Markdown
44
+ ## Объявление Markdown-контента
45
45
 
46
- Вы можете объявлять контент Markdown с помощью функции `md` или просто как строку (если она содержит синтаксис Markdown).
46
+ Вы можете объявить Markdown-контент с помощью функции `md` или просто как строку (если она содержит синтаксис Markdown).
47
47
 
48
48
  <Tabs>
49
49
  <Tab label=".content.md" value=".content.md">
50
- Начиная с версии `8.10.0`, вы можете объявлять контент Markdown непосредственно в файлах `.content.md`. Intlayer автоматически обнаружит и распарсит контент Markdown.
50
+ Начиная с версии `8.10.0`, вы можете объявлять Markdown-контент непосредственно в файлах `.content.md`. Intlayer автоматически обнаружит и проанализирует Markdown-контент.
51
51
 
52
- ```md fileName="markdown-file.ru.content.md"
52
+ ```md fileName="markdown-file.en.content.md"
53
53
  ---
54
54
  key: my-markdown-content
55
55
  description: Мой контент
56
- locale: ru
56
+ locale: en
57
57
  ---
58
58
 
59
59
  # Мой контент
60
60
 
61
- Вот пример контента markdown
61
+ Вот пример Markdown-контента
62
62
  ```
63
63
 
64
- Поле `locale` в frontmatter определяет локаль контента. Это поле необязательно. Если оно не указано, Intlayer будет использовать локаль по умолчанию, которая также используется в качестве резервной (fallback) локали, если для конкретной локали перевод отсутствует.
64
+ Поле `locale` в front-matter определяет локаль контента. Оно необязательно. Если оно не указано, Intlayer будет использовать локаль по умолчанию, которая также используется в качестве резервной локали (fallback), если перевод для конкретной локали недоступен.
65
65
 
66
66
  Пример структуры файлов:
67
67
 
@@ -70,16 +70,17 @@ Intlayer поддерживает содержимое с богатым тек
70
70
  ├── en/
71
71
  │ └── markdown-file.en.content.md
72
72
  ├── fr/
73
+
73
74
  │ └── markdown-file.fr.content.md
74
75
  └── es/
75
76
  └── markdown-file.es.content.md
76
77
  ```
77
78
 
78
- Вы можете добавить в front-matter любые свойства, определенные в [Определении словаря (Dictionary definition)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md)
79
+ Вы можете добавить в front-matter любые свойства, определенные в [определении словаря](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/content_file.md)
79
80
 
80
81
  </Tab>
81
- <Tab label="Ручная обертка" value="manual-wrapping">
82
- Используйте функцию `md`, чтобы явно объявить контент Markdown. Это полезно, если вы хотите гарантировать, что строка обрабатывается как Markdown, даже если она не содержит явного синтаксиса.
82
+ <Tab label="Ручное оборачивание" value="manual-wrapping">
83
+ Используйте функцию `md` для явного объявления Markdown-контента. Это полезно, если вы хотите гарантировать, что строка будет обрабатываться как Markdown, даже если она не содержит явного синтаксиса.
83
84
 
84
85
  ```typescript fileName="markdownDictionary.content.ts"
85
86
  import { md, type Dictionary } from "intlayer";
@@ -87,7 +88,7 @@ Intlayer поддерживает содержимое с богатым тек
87
88
  const markdownDictionary = {
88
89
  key: "app",
89
90
  content: {
90
- myMarkdownContent: md("## Мой заголовок \n\nLorem Ipsum"),
91
+ myMarkdownContent: md("## My title \n\nLorem Ipsum"),
91
92
  },
92
93
  } satisfies Dictionary;
93
94
 
@@ -95,34 +96,35 @@ Intlayer поддерживает содержимое с богатым тек
95
96
  ```
96
97
 
97
98
  </Tab>
98
- <Tab label="Автоматическое обнаружение" value="automatic-detection">
99
- Если строка содержит распространенные индикаторы Markdown (такие как заголовки, списки, ссылки и т. д.), Intlayer автоматически преобразует ее.
99
+ <Tab label="Внешние файлы" value="external-files">
100
+ Импортируйте файлы `.md` напрямую, используя функцию `file`.
100
101
 
101
102
  ```typescript fileName="markdownDictionary.content.ts"
103
+ import { md, file, t } from "intlayer";
104
+
102
105
  export default {
103
106
  key: "app",
104
- contentAutoTransformation: true, // Включить автоматическое обнаружение контента Markdown - Можно установить глобально в intlayer.config.ts
105
107
  content: {
106
- myMarkdownContent: "## Мой заголовок \n\nLorem Ipsum",
108
+ content: t({
109
+ ru: md(file("./myMarkdown.ru.md")),
110
+ en: md(file("./myMarkdown.en.md")),
111
+ fr: md(file("./myMarkdown.fr.md")),
112
+ }),
107
113
  },
108
114
  };
109
115
  ```
110
116
 
111
117
  </Tab>
112
- <Tab label="Внешние файлы" value="external-files">
113
- Импортируйте файлы `.md` напрямую с помощью функции `file`.
114
118
 
115
- ```typescript fileName="markdownDictionary.content.ts"
116
- import { md, file, t } from "intlayer";
119
+ <Tab label="Автоматическое обнаружение" value="automatic-detection">
120
+ Если строка содержит общие признаки Markdown (такие как заголовки, списки, ссылки и т. д.), Intlayer автоматически преобразует ее.
117
121
 
122
+ ```typescript fileName="markdownDictionary.content.ts"
118
123
  export default {
119
124
  key: "app",
125
+ contentAutoTransformation: true, // Включить автоматическое обнаружение Markdown контента — можно установить глобально в intlayer.config.ts
120
126
  content: {
121
- content: t({
122
- en: md(file("./myMarkdown.en.md")),
123
- fr: md(file("./myMarkdown.fr.md")),
124
- ru: md(file("./myMarkdown.ru.md")),
125
- }),
127
+ myMarkdownContent: "## My title \n\nLorem Ipsum",
126
128
  },
127
129
  };
128
130
  ```
@@ -134,536 +136,99 @@ Intlayer поддерживает содержимое с богатым тек
134
136
 
135
137
  ## Рендеринг Markdown
136
138
 
137
- Рендеринг может осуществляться автоматически системой контента Intlayer или вручную с использованием специализированных инструментов.
139
+ Intlayer предоставляет два независимых способа рендеринга Markdown:
140
+
141
+ 1. **Через `useIntlayer`**
142
+ — Intlayer автоматически преобразует узел `md` в нативный вывод фреймворка (JSX, VNode, HTML-строка).
143
+ - Frontmatter парсится и предоставляется как `.metadata`. Вы можете переопределить рендеринг на двух уровнях — глобально с помощью `MarkdownProvider` (или эквивалента для вашего фреймворка) и локально для каждого узла с помощью `.use()`. Оба метода можно комбинировать; `.use()` имеет приоритет над `MarkdownProvider`, который, в свою очередь, имеет приоритет над поведением по умолчанию.
138
144
 
139
- ### 1. Автоматический рендеринг (с использованием `useIntlayer`)
145
+ 2. **Вспомогательные утилиты** — `<MarkdownRenderer />`, `useMarkdownRenderer()` и `renderMarkdown()` являются автономными инструментами, которые принимают **только необработанные строки Markdown (raw strings)**. Они не зависят от `useIntlayer` и не работают с декорированными узлами, которые он возвращает.
140
146
 
141
- Когда вы получаете контент через `useIntlayer`, узлы Markdown уже подготовлены для рендеринга.
147
+ Рендеринг Markdown поддерживает **MDX** используйте любой JSX компонент или компонент фреймворка по имени прямо в вашем Markdown.
148
+
149
+ ### 1. Автоматический рендеринг (через `useIntlayer`)
142
150
 
143
151
  <Tabs group="framework">
144
152
  <Tab label="React / Next.js" value="react">
145
- Узлы Markdown можно рендерить напрямую как JSX.
153
+ Markdown-узлы могут быть отрисованы напрямую как JSX.
146
154
 
147
155
  ```tsx fileName="App.tsx"
148
156
  import { useIntlayer } from "react-intlayer";
157
+ import { MarkdownProvider } from "react-intlayer/markdown";
149
158
 
150
159
  const AppContent = () => {
151
160
  const { myMarkdownContent } = useIntlayer("app");
152
- return <div>{myMarkdownContent}</div>;
153
- };
154
- ```
155
-
156
- Вы также можете предоставить локальные переопределения для конкретных узлов, используя метод `.use()`:
157
-
158
- ```tsx
159
- {myMarkdownContent.use({
160
- h1: ({ children }) => <h1 className="text-3xl font-bold">{children}</h1>,
161
- })}
162
- ```
163
-
164
- </Tab>
165
- <Tab label="Vue" value="vue">
166
- Во Vue контент Markdown можно рендерить с помощью встроенного компонента `component` или напрямую как узел.
167
-
168
- ```vue fileName="App.vue"
169
- <script setup>
170
- import { useIntlayer } from "vue-intlayer";
171
- const { myMarkdownContent } = useIntlayer("app");
172
- </script>
173
-
174
- <template>
175
- <component :is="myMarkdownContent" />
176
- </template>
177
- ```
178
-
179
- </Tab>
180
- <Tab label="Svelte" value="svelte">
181
- Svelte рендерит Markdown как HTML-строку по умолчанию. Используйте `{@html}`, чтобы отобразить его.
182
-
183
- ```svelte
184
- <script lang="ts">
185
- import { useIntlayer } from "svelte-intlayer";
186
- const content = useIntlayer("app");
187
- </script>
188
-
189
- {@html $content.myMarkdownContent}
190
- ```
191
-
192
- </Tab>
193
- <Tab label="Preact" value="preact">
194
- Preact поддерживает узлы Markdown непосредственно в JSX.
195
-
196
- ```tsx fileName="App.tsx"
197
- import { useIntlayer } from "preact-intlayer";
198
-
199
- const AppContent = () => {
200
- const { myMarkdownContent } = useIntlayer("app");
201
- return <div>{myMarkdownContent}</div>;
202
- };
203
- ```
204
-
205
- </Tab>
206
- <Tab label="Solid" value="solid">
207
- Solid поддерживает узлы Markdown непосредственно в JSX.
208
-
209
- ```tsx fileName="App.tsx"
210
- import { useIntlayer } from "solid-intlayer";
211
161
 
212
- const AppContent = () => {
213
- const { myMarkdownContent } = useIntlayer("app");
214
162
  return <div>{myMarkdownContent}</div>;
215
163
  };
216
- ```
217
164
 
218
- </Tab>
219
- <Tab label="Angular" value="angular">
220
- В Angular используется директива `[innerHTML]` для рендеринга контента Markdown.
221
-
222
- ```typescript fileName="app.component.ts"
223
- import { Component } from "@angular/core";
224
- import { useIntlayer } from "angular-intlayer";
225
-
226
- @Component({
227
- selector: "app-root",
228
- template: `<div [innerHTML]="content().myMarkdownContent"></div>`,
229
- })
230
- export class AppComponent {
231
- content = useIntlayer("app");
232
- }
233
- ```
234
-
235
- Вы также можете предоставить локальные переопределения для конкретных узлов, используя метод `.use()`:
236
-
237
- ```typescript
238
- content().myMarkdownContent.use({
239
- h1: { class: "text-3xl font-bold" },
240
- })
165
+ const App = () => (
166
+ <MarkdownProvider
167
+ components={{
168
+ h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
169
+ MyButton: (props) => <button {...props} />, // MDX-компонент
170
+ }}
171
+ >
172
+ <AppContent />
173
+ </MarkdownProvider>
174
+ );
241
175
  ```
242
176
 
243
- </Tab>
244
- </Tabs>
245
-
246
- ### 2. Ручной рендеринг и расширенные инструменты
177
+ > Если `MarkdownProvider` отсутствует, intlayer будет отрисовывать markdown, используя стандартный парсер Markdown в JSX.
247
178
 
248
- Если вам нужно отрендерить сырые строки Markdown или иметь больше контроля над процессом рендеринга, используйте следующие инструменты.
249
-
250
- <Tabs group="framework">
251
- <Tab label="React / Next.js" value="react">
252
-
253
- #### Компонент `<MarkdownRenderer />`
179
+ Вы также можете предоставить локальные переопределения для конкретных узлов, используя метод `.use()`:
254
180
 
255
181
  ```tsx
256
- import { MarkdownRenderer } from "react-intlayer/markdown";
257
-
258
- <MarkdownRenderer forceBlock={true} tagfilter={true}>
259
- {"# Мой заголовок"}
260
- </MarkdownRenderer>
182
+ {myMarkdownContent.use({
183
+ h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
184
+ })}
261
185
  ```
262
186
 
263
- #### Хук `useMarkdownRenderer()`
264
-
265
- Получите предварительно настроенную функцию рендеринга.
187
+ Вы можете получить Markdown в виде строки:
266
188
 
267
189
  ```tsx
268
- import { useMarkdownRenderer } from "react-intlayer/markdown";
269
-
270
- const renderMarkdown = useMarkdownRenderer({
271
- forceBlock: true,
272
- components: { h1: (props) => <h1 {...props} className="custom" /> }
273
- });
274
-
275
- return renderMarkdown("# Мой заголовок");
190
+ {myMarkdownContent.value}
191
+ {String(myMarkdownContent)}
192
+ {myMarkdownContent.toString()}
276
193
  ```
277
194
 
278
- #### Утилита `renderMarkdown()`
279
- Автономная утилита для рендеринга вне компонентов.
195
+ И вы можете получить доступ к метаданным вашего markdown, например:
280
196
 
281
197
  ```tsx
282
- import { renderMarkdown } from "react-intlayer/markdown";
283
-
284
- const jsx = renderMarkdown("# Мой заголовок", { forceBlock: true });
198
+ {myMarkdownContent.metadata}
199
+ {myMarkdownContent.metadata.title}
285
200
  ```
286
201
 
287
202
  </Tab>
288
203
  <Tab label="Vue" value="vue">
204
+ В Vue контент Markdown можно отрендерить с помощью встроенного элемента `component` или напрямую как узел.
289
205
 
290
- #### Компонент `<MarkdownRenderer />`
291
-
292
- ```vue
206
+ ```vue fileName="App.vue"
293
207
  <script setup>
294
- import { MarkdownRenderer } from "vue-intlayer/markdown";
208
+ import { useIntlayer } from "vue-intlayer";
209
+ const { myMarkdownContent } = useIntlayer("app");
295
210
  </script>
296
211
 
297
212
  <template>
298
- <MarkdownRenderer :forceBlock="true" content="# Мой заголовок" />
213
+ <component :is="myMarkdownContent" />
299
214
  </template>
300
215
  ```
301
216
 
302
- </Tab>
303
- <Tab label="Svelte" value="svelte">
304
-
305
- #### Компонент `<MarkdownRenderer />`
306
-
307
- ```svelte
308
- <script lang="ts">
309
- import { MarkdownRenderer } from "svelte-intlayer/markdown";
310
- </script>
311
-
312
- <MarkdownRenderer forceBlock={true} value="# Мой заголовок" />
313
- ```
314
-
315
- #### Хук `useMarkdownRenderer()`
316
-
317
- ```svelte
318
- <script lang="ts">
319
- import { useMarkdownRenderer } from "svelte-intlayer/markdown";
320
- const render = useMarkdownRenderer();
321
- </script>
322
-
323
- {@html render("# Мой заголовок")}
324
- ```
325
-
326
- #### Утилита `renderMarkdown()`
327
-
328
- ```svelte
329
- <script lang="ts">
330
- import { renderMarkdown } from "svelte-intlayer/markdown";
331
- </script>
332
-
333
- {@html renderMarkdown("# Мой заголовок")}
334
- ```
335
-
336
- </Tab>
337
- <Tab label="Preact" value="preact">
338
- #### Компонент `<MarkdownRenderer />`
339
-
340
- ```tsx
341
- import { MarkdownRenderer } from "preact-intlayer/markdown";
342
-
343
- <MarkdownRenderer forceBlock={true}>
344
- {"# Мой заголовок"}
345
- </MarkdownRenderer>
346
- ```
347
-
348
- #### Хук `useMarkdownRenderer()`
349
-
350
- ```tsx
351
- import { useMarkdownRenderer } from "preact-intlayer/markdown";
352
-
353
- const render = useMarkdownRenderer();
354
-
355
- return <div>{render("# Мой заголовок")}</div>;
356
- ```
357
-
358
- #### Утилита `renderMarkdown()`
359
-
360
- ```tsx
361
- import { renderMarkdown } from "preact-intlayer/markdown";
362
-
363
- return <div>{renderMarkdown("# Мой заголовок")}</div>;
364
- ```
365
-
366
- </Tab>
367
- <Tab label="Solid" value="solid">
368
- #### Компонент `<MarkdownRenderer />`
369
-
370
- ```tsx
371
- import { MarkdownRenderer } from "solid-intlayer/markdown";
372
-
373
- <MarkdownRenderer forceBlock={true}>
374
- {"# Мой заголовок"}
375
- </MarkdownRenderer>
376
- ```
217
+ Настройте глобально через плагин `intlayerMarkdown` (поддерживает пользовательские компоненты MDX):
377
218
 
378
- #### Хук `useMarkdownRenderer()`
379
-
380
- ```tsx
381
- import { useMarkdownRenderer } from "solid-intlayer/markdown";
382
-
383
- const render = useMarkdownRenderer();
384
-
385
- return <div>{render("# Мой заголовок")}</div>;
386
- ```
387
-
388
- #### Утилита `renderMarkdown()`
389
-
390
- ```tsx
391
- import { renderMarkdown } from "solid-intlayer/markdown";
392
-
393
- return <div>{renderMarkdown("# Мой заголовок")}</div>;
394
- ```
395
-
396
- </Tab>
397
- <Tab label="Angular" value="angular">
398
- #### Сервис `IntlayerMarkdownService`
399
- Рендерит строку Markdown с помощью сервиса.
400
-
401
- ```typescript
402
- import { IntlayerMarkdownService } from "angular-intlayer/markdown";
403
-
404
- export class MyComponent {
405
- constructor(private markdownService: IntlayerMarkdownService) {}
406
-
407
- renderMarkdown(markdown: string) {
408
- return this.markdownService.renderMarkdown(markdown);
409
- }
410
- }
411
- ```
412
-
413
- </Tab>
414
- </Tabs>
415
-
416
- ---
417
-
418
- ## Глобальная конфигурация с `MarkdownProvider`
419
-
420
- Вы можете настроить рендеринг Markdown глобально для всего приложения. Это позволяет избежать передачи одних и тех же параметров каждому рендереру.
421
-
422
- <Tabs group="framework">
423
- <Tab label="React / Next.js" value="react">
424
-
425
- ```tsx fileName="AppProvider.tsx"
426
- import { MarkdownProvider } from "react-intlayer/markdown";
427
-
428
- export const AppProvider = ({ children }) => (
429
- <MarkdownProvider
430
- components={{
431
- h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
432
- a: ({ href, children }) => <Link to={href}>{children}</Link>,
433
- }}
434
- >
435
- {children}
436
- </MarkdownProvider>
437
- );
438
- ```
439
-
440
- Вы также можете использовать свой собственный рендерер Markdown:
441
-
442
- ```tsx fileName="AppProvider.tsx"
443
- import { MarkdownProvider } from "react-intlayer/markdown";
444
-
445
- export const AppProvider = ({ children }) => (
446
- <MarkdownProvider
447
- renderMarkdown={async (md) => {
448
- const { compileMarkdown } = await import('react-intlayer/markdown');
449
- return compileMarkdown(md);
450
- }}
451
- >
452
- {children}
453
- </MarkdownProvider>
454
- );
455
- ```
456
-
457
- > Динамический импорт рендерера Markdown - хороший способ уменьшить размер бандла вашего приложения.
458
-
459
- </Tab>
460
- <Tab label="Vue" value="vue">
461
-
462
- ```typescript fileName="main.ts"
463
- import { createApp } from "vue";
464
- import { intlayer } from "vue-intlayer";
219
+ ```ts fileName="main.ts"
465
220
  import { intlayerMarkdown } from "vue-intlayer/markdown";
466
- import App from "./App.vue";
467
221
 
468
- const app = createApp(App);
469
-
470
- app.use(intlayer);
471
222
  app.use(intlayerMarkdown, {
472
223
  components: {
473
- h1: (props) =>
474
- h('h1', { style: { color: 'orange' }, ...props }, props.children),
475
- ComponentDemo: () => h('div', { style: { background: 'grey' } }, 'DEMO'),
476
- bold: (props) => h('strong', props),
477
- code: (props) => h('code', props),
224
+ h1: (props) => h('h1', { style: { color: 'green' } }, props.children),
225
+ MyButton: (props) => h('button', props), // Компонент MDX
478
226
  },
479
227
  });
480
-
481
- app.mount("#app");
482
- ```
483
-
484
- Вы также можете использовать свой собственный рендерер Markdown:
485
-
486
- ```typescript fileName="main.ts"
487
- import { createApp } from "vue";
488
- import { intlayer } from "vue-intlayer";
489
- import { intlayerMarkdown } from "vue-intlayer/markdown";
490
- import App from "./App.vue";
491
-
492
- const app = createApp(App);
493
-
494
- app.use(intlayer);
495
- app.use(intlayerMarkdown, {
496
- renderMarkdown: async (md) => {
497
- const { compileMarkdown } = await import('vue-intlayer/markdown');
498
- return compileMarkdown(md);
499
- },
500
- });
501
-
502
- app.mount("#app");
503
- ```
504
-
505
- > Динамический импорт рендерера Markdown - хороший способ уменьшить размер бандла вашего приложения.
506
-
507
- </Tab>
508
- <Tab label="Svelte" value="svelte">
509
-
510
- ```svelte fileName="App.svelte"
511
- <script lang="ts">
512
- import { MarkdownProvider } from "svelte-intlayer/markdown";
513
- import MyHeading from "./MyHeading.svelte";
514
- </script>
515
-
516
- <MarkdownProvider
517
- components={{
518
- h1: MyHeading,
519
- }}
520
- >
521
- <slot />
522
- </MarkdownProvider>
523
228
  ```
524
229
 
525
- Вы также можете использовать свой собственный рендерер Markdown:
230
+ > Если плагин `intlayerMarkdown` не установлен, Intlayer будет выполнять рендеринг с использованием компилятора по умолчанию.
526
231
 
527
- ```svelte fileName="App.svelte"
528
- <script lang="ts">
529
- import { MarkdownProvider } from "svelte-intlayer/markdown";
530
- </script>
531
-
532
- <MarkdownProvider
533
- renderMarkdown={async (md) => {
534
- const { compileMarkdown } = await import('svelte-intlayer/markdown');
535
- return compileMarkdown(md);
536
- }}
537
- >
538
- <slot />
539
- </MarkdownProvider>
540
- ```
541
-
542
- > Динамический импорт рендерера Markdown - хороший способ уменьшить размер бандла вашего приложения.
543
-
544
- </Tab>
545
- <Tab label="Preact" value="preact">
546
-
547
- ```tsx fileName="AppProvider.tsx"
548
- import { MarkdownProvider } from "preact-intlayer/markdown";
549
-
550
- export const AppProvider = ({ children }) => (
551
- <MarkdownProvider
552
- components={{
553
- h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
554
- }}
555
- >
556
- {children}
557
- </MarkdownProvider>
558
- );
559
- ```
560
-
561
- Вы также можете использовать свой собственный рендерер Markdown:
562
-
563
- ```tsx fileName="AppProvider.tsx"
564
- import { MarkdownProvider } from "preact-intlayer/markdown";
565
-
566
- export const AppProvider = ({ children }) => (
567
- <MarkdownProvider
568
- renderMarkdown={async (md) => {
569
- const { compileMarkdown } = await import('preact-intlayer/markdown');
570
- return compileMarkdown(md);
571
- }}
572
- >
573
- {children}
574
- </MarkdownProvider>
575
- );
576
- ```
577
-
578
- > Динамический импорт рендерера Markdown - хороший способ уменьшить размер бандла вашего приложения.
579
-
580
- </Tab>
581
- <Tab label="Solid" value="solid">
582
-
583
- ```tsx fileName="AppProvider.tsx"
584
- import { MarkdownProvider } from "solid-intlayer/markdown";
585
-
586
- export const AppProvider = (props) => (
587
- <MarkdownProvider
588
- components={{
589
- h1: (props) => <h1 className="text-2xl font-bold">{props.children}</h1>,
590
- }}
591
- >
592
- {props.children}
593
- </MarkdownProvider>
594
- );
595
- ```
596
-
597
- Вы также можете использовать свой собственный рендерер Markdown:
598
-
599
- ```tsx fileName="AppProvider.tsx"
600
- import { MarkdownProvider } from "solid-intlayer/markdown";
601
-
602
- export const AppProvider = (props) => (
603
- <MarkdownProvider
604
- renderMarkdown={async (md) => {
605
- const { compileMarkdown } = await import('solid-intlayer/markdown');
606
- return compileMarkdown(md);
607
- }}
608
- >
609
- {props.children}
610
- </MarkdownProvider>
611
- );
612
- ```
613
-
614
- > Динамический импорт рендерера Markdown - хороший способ уменьшить размер бандла вашего приложения.
615
-
616
- </Tab>
617
- <Tab label="Angular" value="angular">
618
-
619
- ```typescript fileName="app.config.ts"
620
- import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";
621
-
622
- export const appConfig: ApplicationConfig = {
623
- providers: [
624
- createIntlayerMarkdownProvider({
625
- components: {
626
- h1: { class: "text-2xl font-bold" },
627
- },
628
- }),
629
- ],
630
- };
631
- ```
632
-
633
- Вы также можете использовать свой собственный рендерер Markdown:
634
-
635
- ```typescript fileName="app.config.ts"
636
- import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";
637
-
638
- export const appConfig: ApplicationConfig = {
639
- providers: [
640
- createIntlayerMarkdownProvider({
641
- renderMarkdown: async (md) => {
642
- const { compileMarkdown } = await import('angular-intlayer/markdown');
643
- return compileMarkdown(md);
644
- },
645
- }),
646
- ],
647
- };
648
- ```
649
-
650
- > Динамический импорт рендерера Markdown - хороший способ уменьшить размер бандла вашего приложения.
651
-
652
- </Tab>
653
- </Tabs>
654
-
655
- ---
656
-
657
- ## Справочник опций
658
-
659
- Эти опции могут быть переданы в `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer` и `renderMarkdown`.
232
+ Вы также можете предоставить локальные переопределения для конкретных узлов, используя метод `.use()`:
660
233
 
661
- | Опция | Тип | По умолчанию | Описание |
662
- | :-------------------- | :---------- | :----------- | :-------------------------------------------------------------------------------------------------- |
663
- | `forceBlock` | `boolean` | `false` | Принудительно выводит результат в виде блочного элемента (например, `<div>`). |
664
- | `forceInline` | `boolean` | `false` | Принудительно выводит результат в виде встроенного элемента (например, `<span>`). |
665
- | `tagfilter` | `boolean` | `true` | Включает фильтр тегов GitHub для повышения безопасности путем удаления опасных HTML-тегов. |
666
- | `preserveFrontmatter` | `boolean` | `false` | Если `true`, frontmatter в начале строки Markdown не будет удаляться. |
667
- | `components` | `Overrides` | `{}` | Карта HTML-тегов и соответствующих им пользовательских компонентов (например, `{ h1: MyHeading }`). |
668
- | `wrapper` | `Component` | `null` | Пользовательский компонент для обертки отрендеренного Markdown. |
669
- | `renderMarkdown` | `Function` | `null` | Пользовательская функция рендеринга для полной замены стандартного компилятора Markdown. |
234
+ ```vue