@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.
- package/docs/ar/dictionary/markdown.md +409 -88
- package/docs/de/dictionary/markdown.md +279 -107
- package/docs/en/dictionary/markdown.md +237 -37
- package/docs/en-GB/dictionary/markdown.md +361 -76
- package/docs/es/dictionary/markdown.md +295 -123
- package/docs/fr/dictionary/markdown.md +301 -129
- package/docs/hi/dictionary/markdown.md +376 -90
- package/docs/id/dictionary/markdown.md +377 -91
- package/docs/it/dictionary/markdown.md +296 -129
- package/docs/ko/dictionary/markdown.md +306 -134
- package/docs/pl/dictionary/markdown.md +287 -116
- package/docs/pt/dictionary/markdown.md +287 -116
- package/docs/ru/dictionary/markdown.md +78 -513
- package/docs/tr/dictionary/markdown.md +300 -130
- package/docs/uk/dictionary/markdown.md +386 -100
- package/docs/vi/dictionary/markdown.md +383 -97
- package/docs/zh/dictionary/markdown.md +293 -125
- package/package.json +7 -7
- package/docs/ja/dictionary/markdown.md +0 -666
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
createdAt: 2025-02-07
|
|
3
3
|
updatedAt: 2026-05-19
|
|
4
4
|
title: Markdown
|
|
5
|
-
description: Узнайте, как объявлять и использовать Markdown-контент на вашем многоязычном сайте с помощью Intlayer. Следуйте
|
|
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: "
|
|
25
|
+
changes: "Добавлен объект плагина `intlayerMarkdown`; используйте `app.use(intlayerMarkdown)` вместо `app.use(installIntlayerMarkdown)`"
|
|
26
26
|
- version: 8.5.0
|
|
27
27
|
date: 2026-03-24
|
|
28
|
-
changes: "
|
|
28
|
+
changes: "перенос импорта из `{{framework}}-intlayer` в `{{framework}}-intlayer/markdown`"
|
|
29
29
|
- version: 8.0.0
|
|
30
30
|
date: 2026-01-22
|
|
31
|
-
changes: "
|
|
31
|
+
changes: "Добавление утилит MarkdownRenderer / useMarkdownRenderer / renderMarkdown и опции forceInline"
|
|
32
32
|
- version: 8.0.0
|
|
33
33
|
date: 2026-01-18
|
|
34
|
-
changes: "Автоматическое
|
|
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 поддерживает
|
|
42
|
+
Intlayer поддерживает форматированный текстовый контент, определенный с использованием синтаксиса Markdown. Это позволяет легко писать и поддерживать контент со сложным форматированием, такой как блоги, статьи и многое другое.
|
|
43
43
|
|
|
44
|
-
## Объявление
|
|
44
|
+
## Объявление Markdown-контента
|
|
45
45
|
|
|
46
|
-
Вы можете
|
|
46
|
+
Вы можете объявить Markdown-контент с помощью функции `md` или просто как строку (если она содержит синтаксис Markdown).
|
|
47
47
|
|
|
48
48
|
<Tabs>
|
|
49
49
|
<Tab label=".content.md" value=".content.md">
|
|
50
|
-
Начиная с версии `8.10.0`, вы можете объявлять
|
|
50
|
+
Начиная с версии `8.10.0`, вы можете объявлять Markdown-контент непосредственно в файлах `.content.md`. Intlayer автоматически обнаружит и проанализирует Markdown-контент.
|
|
51
51
|
|
|
52
|
-
```md fileName="markdown-file.
|
|
52
|
+
```md fileName="markdown-file.en.content.md"
|
|
53
53
|
---
|
|
54
54
|
key: my-markdown-content
|
|
55
55
|
description: Мой контент
|
|
56
|
-
locale:
|
|
56
|
+
locale: en
|
|
57
57
|
---
|
|
58
58
|
|
|
59
59
|
# Мой контент
|
|
60
60
|
|
|
61
|
-
Вот пример
|
|
61
|
+
Вот пример Markdown-контента
|
|
62
62
|
```
|
|
63
63
|
|
|
64
|
-
Поле `locale` в
|
|
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 любые свойства, определенные в [
|
|
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="
|
|
82
|
-
Используйте функцию `md
|
|
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("##
|
|
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="
|
|
99
|
-
|
|
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
|
-
|
|
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
|
-
|
|
116
|
-
|
|
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
|
-
|
|
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
|
-
|
|
139
|
+
Intlayer предоставляет два независимых способа рендеринга Markdown:
|
|
140
|
+
|
|
141
|
+
1. **Через `useIntlayer`**
|
|
142
|
+
— Intlayer автоматически преобразует узел `md` в нативный вывод фреймворка (JSX, VNode, HTML-строка).
|
|
143
|
+
- Frontmatter парсится и предоставляется как `.metadata`. Вы можете переопределить рендеринг на двух уровнях — глобально с помощью `MarkdownProvider` (или эквивалента для вашего фреймворка) и локально для каждого узла с помощью `.use()`. Оба метода можно комбинировать; `.use()` имеет приоритет над `MarkdownProvider`, который, в свою очередь, имеет приоритет над поведением по умолчанию.
|
|
138
144
|
|
|
139
|
-
|
|
145
|
+
2. **Вспомогательные утилиты** — `<MarkdownRenderer />`, `useMarkdownRenderer()` и `renderMarkdown()` являются автономными инструментами, которые принимают **только необработанные строки Markdown (raw strings)**. Они не зависят от `useIntlayer` и не работают с декорированными узлами, которые он возвращает.
|
|
140
146
|
|
|
141
|
-
|
|
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
|
-
|
|
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
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
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
|
-
|
|
244
|
-
</Tabs>
|
|
245
|
-
|
|
246
|
-
### 2. Ручной рендеринг и расширенные инструменты
|
|
177
|
+
> Если `MarkdownProvider` отсутствует, intlayer будет отрисовывать markdown, используя стандартный парсер Markdown в JSX.
|
|
247
178
|
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
<Tabs group="framework">
|
|
251
|
-
<Tab label="React / Next.js" value="react">
|
|
252
|
-
|
|
253
|
-
#### Компонент `<MarkdownRenderer />`
|
|
179
|
+
Вы также можете предоставить локальные переопределения для конкретных узлов, используя метод `.use()`:
|
|
254
180
|
|
|
255
181
|
```tsx
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
{"# Мой заголовок"}
|
|
260
|
-
</MarkdownRenderer>
|
|
182
|
+
{myMarkdownContent.use({
|
|
183
|
+
h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
|
|
184
|
+
})}
|
|
261
185
|
```
|
|
262
186
|
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
Получите предварительно настроенную функцию рендеринга.
|
|
187
|
+
Вы можете получить Markdown в виде строки:
|
|
266
188
|
|
|
267
189
|
```tsx
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
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
|
-
|
|
279
|
-
Автономная утилита для рендеринга вне компонентов.
|
|
195
|
+
И вы можете получить доступ к метаданным вашего markdown, например:
|
|
280
196
|
|
|
281
197
|
```tsx
|
|
282
|
-
|
|
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
|
-
|
|
291
|
-
|
|
292
|
-
```vue
|
|
206
|
+
```vue fileName="App.vue"
|
|
293
207
|
<script setup>
|
|
294
|
-
import {
|
|
208
|
+
import { useIntlayer } from "vue-intlayer";
|
|
209
|
+
const { myMarkdownContent } = useIntlayer("app");
|
|
295
210
|
</script>
|
|
296
211
|
|
|
297
212
|
<template>
|
|
298
|
-
<
|
|
213
|
+
<component :is="myMarkdownContent" />
|
|
299
214
|
</template>
|
|
300
215
|
```
|
|
301
216
|
|
|
302
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
230
|
+
> Если плагин `intlayerMarkdown` не установлен, Intlayer будет выполнять рендеринг с использованием компилятора по умолчанию.
|
|
526
231
|
|
|
527
|
-
|
|
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
|