@intlayer/docs 8.10.0-canary.0 → 8.10.0-canary.1
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 +402 -82
- package/docs/de/dictionary/markdown.md +269 -98
- package/docs/en/dictionary/markdown.md +221 -25
- package/docs/en-GB/dictionary/markdown.md +351 -67
- package/docs/es/dictionary/markdown.md +286 -115
- package/docs/fr/dictionary/markdown.md +292 -121
- package/docs/hi/dictionary/markdown.md +366 -81
- package/docs/id/dictionary/markdown.md +368 -83
- package/docs/it/dictionary/markdown.md +288 -122
- package/docs/ko/dictionary/markdown.md +297 -126
- package/docs/pl/dictionary/markdown.md +276 -106
- package/docs/pt/dictionary/markdown.md +276 -106
- package/docs/ru/dictionary/markdown.md +70 -505
- package/docs/tr/dictionary/markdown.md +291 -122
- package/docs/uk/dictionary/markdown.md +377 -92
- package/docs/vi/dictionary/markdown.md +377 -92
- package/docs/zh/dictionary/markdown.md +284 -117
- 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: Intlayer ile çok dilli web sitenizde Markdown
|
|
5
|
+
description: Intlayer ile çok dilli web sitenizde Markdown içeriğini nasıl bildireceğinizi ve kullanacağınızı öğrenin. Projenize Markdown'ı sorunsuz bir şekilde entegre etmek için bu çevrimiçi belgelerdeki adımları izleyin.
|
|
6
6
|
keywords:
|
|
7
7
|
- Markdown
|
|
8
8
|
- Uluslararasılaştırma
|
|
@@ -19,19 +19,19 @@ slugs:
|
|
|
19
19
|
history:
|
|
20
20
|
- version: 8.10.0
|
|
21
21
|
date: 2026-05-19
|
|
22
|
-
changes: "`.content.md` dosyaları
|
|
22
|
+
changes: "`.content.md` dosyaları için destek eklendi"
|
|
23
23
|
- version: 8.5.0
|
|
24
24
|
date: 2026-03-24
|
|
25
|
-
changes: "
|
|
25
|
+
changes: "`intlayerMarkdown` eklenti nesnesi eklendi; `app.use(installIntlayerMarkdown)` yerine `app.use(intlayerMarkdown)` kullanın"
|
|
26
26
|
- version: 8.5.0
|
|
27
27
|
date: 2026-03-24
|
|
28
|
-
changes: "
|
|
28
|
+
changes: "İçe aktarma işlemi `{{framework}}-intlayer` konumundan `{{framework}}-intlayer/markdown` konumuna taşındı"
|
|
29
29
|
- version: 8.0.0
|
|
30
30
|
date: 2026-01-22
|
|
31
|
-
changes: "MarkdownRenderer / useMarkdownRenderer / renderMarkdown yardımcı
|
|
31
|
+
changes: "MarkdownRenderer / useMarkdownRenderer / renderMarkdown yardımcı programı ve forceInline seçeneği eklendi"
|
|
32
32
|
- version: 8.0.0
|
|
33
33
|
date: 2026-01-18
|
|
34
|
-
changes: "Markdown içeriğinin otomatik
|
|
34
|
+
changes: "Markdown içeriğinin otomatik dekorasyonu, MDX ve SSR desteği"
|
|
35
35
|
- version: 5.5.10
|
|
36
36
|
date: 2025-06-29
|
|
37
37
|
changes: "Geçmiş başlatıldı"
|
|
@@ -39,29 +39,29 @@ history:
|
|
|
39
39
|
|
|
40
40
|
# Markdown / Zengin Metin İçeriği
|
|
41
41
|
|
|
42
|
-
Intlayer, Markdown sözdizimi kullanılarak tanımlanan zengin metin içeriğini destekler. Bu, bloglar, makaleler ve daha fazlası gibi zengin
|
|
42
|
+
Intlayer, Markdown sözdizimi kullanılarak tanımlanan zengin metin içeriğini destekler. Bu, bloglar, makaleler ve daha fazlası gibi zengin biçimlendirilmiş içerikleri kolayca yazmanıza ve sürdürmenize olanak tanır.
|
|
43
43
|
|
|
44
|
-
## Markdown İçeriğini
|
|
44
|
+
## Markdown İçeriğini Bildirme
|
|
45
45
|
|
|
46
|
-
Markdown içeriğini `md`
|
|
46
|
+
Markdown içeriğini `md` işlevini kullanarak veya basitçe bir dize olarak (Markdown sözdizimi içeriyorsa) bildirebilirsiniz.
|
|
47
47
|
|
|
48
48
|
<Tabs>
|
|
49
49
|
<Tab label=".content.md" value=".content.md">
|
|
50
|
-
`8.10.0`
|
|
50
|
+
Sürüm `8.10.0`'dan itibaren Markdown içeriğini doğrudan `.content.md` dosyalarında bildirebilirsiniz. Intlayer, Markdown içeriğini otomatik olarak algılar ve ayrıştırır.
|
|
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: İçeriğim
|
|
56
|
-
locale:
|
|
56
|
+
locale: en
|
|
57
57
|
---
|
|
58
58
|
|
|
59
59
|
# İçeriğim
|
|
60
60
|
|
|
61
|
-
İşte bir markdown
|
|
61
|
+
İşte bir markdown içerik örneği
|
|
62
62
|
```
|
|
63
63
|
|
|
64
|
-
`locale`
|
|
64
|
+
`locale` ön madde alanı, içeriğin yerel ayarını tanımlayan alandır. İsteğe bağlıdır. Sağlanmazsa, Intlayer varsayılan yerel ayarı kullanacaktır; bu, belirli bir yerel ayar için çeviri mevcut değilse aynı zamanda geri dönüş yerel ayarı olarak da kullanılır.
|
|
65
65
|
|
|
66
66
|
Dosya yapısı örneği:
|
|
67
67
|
|
|
@@ -75,11 +75,11 @@ Markdown içeriğini `md` fonksiyonunu kullanarak veya sadece bir string olarak
|
|
|
75
75
|
└── markdown-file.es.content.md
|
|
76
76
|
```
|
|
77
77
|
|
|
78
|
-
[Sözlük
|
|
78
|
+
Ön maddeye [Sözlük Tanımı](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/dictionary/content_file.md) bölümünde tanımlanan özellikleri ekleyebilirsiniz.
|
|
79
79
|
|
|
80
80
|
</Tab>
|
|
81
|
-
<Tab label="
|
|
82
|
-
Markdown içeriğini açıkça bildirmek için `md`
|
|
81
|
+
<Tab label="Manuel Sarma" value="manual-wrapping">
|
|
82
|
+
Markdown içeriğini açıkça bildirmek için `md` işlevini kullanın. Bu, belirgin bir sözdizimi içermese bile bir dizenin Markdown olarak ele alınmasını sağlamak istiyorsanız kullanışlıdır.
|
|
83
83
|
|
|
84
84
|
```typescript fileName="markdownDictionary.content.ts"
|
|
85
85
|
import { md, type Dictionary } from "intlayer";
|
|
@@ -96,12 +96,12 @@ Markdown içeriğini `md` fonksiyonunu kullanarak veya sadece bir string olarak
|
|
|
96
96
|
|
|
97
97
|
</Tab>
|
|
98
98
|
<Tab label="Otomatik Algılama" value="automatic-detection">
|
|
99
|
-
Dize
|
|
99
|
+
Dize ortak Markdown göstergeleri (başlıklar, listeler, bağlantılar vb.) içeriyorsa, Intlayer bunu otomatik olarak dönüştürecektir.
|
|
100
100
|
|
|
101
101
|
```typescript fileName="markdownDictionary.content.ts"
|
|
102
102
|
export default {
|
|
103
103
|
key: "app",
|
|
104
|
-
contentAutoTransformation: true, // Markdown içeriğinin otomatik
|
|
104
|
+
contentAutoTransformation: true, // Markdown içeriğinin otomatik algılanmasını etkinleştir - intlayer.config.ts dosyasında global olarak ayarlanabilir
|
|
105
105
|
content: {
|
|
106
106
|
myMarkdownContent: "## Başlığım \n\nLorem Ipsum",
|
|
107
107
|
},
|
|
@@ -109,8 +109,9 @@ Markdown içeriğini `md` fonksiyonunu kullanarak veya sadece bir string olarak
|
|
|
109
109
|
```
|
|
110
110
|
|
|
111
111
|
</Tab>
|
|
112
|
-
|
|
113
|
-
|
|
112
|
+
|
|
113
|
+
<Tab label="Harici Dosyalar" value="external-files">
|
|
114
|
+
`.md` dosyalarını doğrudan `file` işlevini kullanarak içe aktarın.
|
|
114
115
|
|
|
115
116
|
```typescript fileName="markdownDictionary.content.ts"
|
|
116
117
|
import { md, file, t } from "intlayer";
|
|
@@ -120,7 +121,6 @@ Markdown içeriğini `md` fonksiyonunu kullanarak veya sadece bir string olarak
|
|
|
120
121
|
content: {
|
|
121
122
|
content: t({
|
|
122
123
|
en: md(file("./myMarkdown.en.md")),
|
|
123
|
-
fr: md(file("./myMarkdown.fr.md")),
|
|
124
124
|
tr: md(file("./myMarkdown.tr.md")),
|
|
125
125
|
}),
|
|
126
126
|
},
|
|
@@ -132,38 +132,74 @@ Markdown içeriğini `md` fonksiyonunu kullanarak veya sadece bir string olarak
|
|
|
132
132
|
|
|
133
133
|
---
|
|
134
134
|
|
|
135
|
-
## Markdown'
|
|
135
|
+
## Markdown'u İşleme (Rendering)
|
|
136
|
+
|
|
137
|
+
Intlayer, Markdown'ı işlemek için iki bağımsız yol sağlar:
|
|
138
|
+
|
|
139
|
+
1. **`useIntlayer` aracılığıyla**
|
|
140
|
+
— Intlayer, `md` düğümünü çerçevenin yerel çıktısına (JSX, VNode, HTML dizesi) otomatik olarak dönüştürür.
|
|
141
|
+
- Frontmatter ayrıştırılır ve `.metadata` olarak sunulur. İşlemeyi iki düzeyde geçersiz kılabilirsiniz — `MarkdownProvider` (veya çerçeve eşdeğeri) ile global olarak ve `.use()` ile düğüm başına yerel olarak. Her ikisi de birleştirilebilir; `.use()`, `MarkdownProvider`'dan önceliklidir ve o da varsayılandan önceliklidir.
|
|
136
142
|
|
|
137
|
-
|
|
143
|
+
2. **Yardımcı araçlar** — `<MarkdownRenderer />`, `useMarkdownRenderer()` ve `renderMarkdown()`, **yalnızca ham Markdown dizelerini** kabul eden bağımsız araçlardır. `useIntlayer`'dan bağımsızdırlar ve döndürdüğü süslenmiş düğümlerle çalışmazlar.
|
|
138
144
|
|
|
139
|
-
|
|
145
|
+
Markdown oluşturma **MDX**'i destekler — Markdown'ınızın içinde doğrudan adıyla herhangi bir JSX/çerçeve bileşenini kullanın.
|
|
140
146
|
|
|
141
|
-
`useIntlayer` aracılığıyla
|
|
147
|
+
### 1. Otomatik İşleme (`useIntlayer` aracılığıyla)
|
|
142
148
|
|
|
143
149
|
<Tabs group="framework">
|
|
144
150
|
<Tab label="React / Next.js" value="react">
|
|
145
|
-
Markdown düğümleri doğrudan JSX olarak
|
|
151
|
+
Markdown düğümleri doğrudan JSX olarak işlenebilir.
|
|
146
152
|
|
|
147
153
|
```tsx fileName="App.tsx"
|
|
148
154
|
import { useIntlayer } from "react-intlayer";
|
|
155
|
+
import { MarkdownProvider } from "react-intlayer/markdown";
|
|
149
156
|
|
|
150
157
|
const AppContent = () => {
|
|
151
158
|
const { myMarkdownContent } = useIntlayer("app");
|
|
159
|
+
|
|
152
160
|
return <div>{myMarkdownContent}</div>;
|
|
153
161
|
};
|
|
162
|
+
|
|
163
|
+
const App = () => (
|
|
164
|
+
<MarkdownProvider
|
|
165
|
+
components={{
|
|
166
|
+
h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
|
|
167
|
+
MyButton: (props) => <button {...props} />, // MDX Bileşeni
|
|
168
|
+
}}
|
|
169
|
+
>
|
|
170
|
+
<AppContent />
|
|
171
|
+
</MarkdownProvider>
|
|
172
|
+
);
|
|
154
173
|
```
|
|
155
174
|
|
|
156
|
-
|
|
175
|
+
> `MarkdownProvider` mevcut değilse, Intlayer varsayılan Markdown - JSX ayrıştırıcısını kullanarak markdown'ı oluşturacaktır.
|
|
176
|
+
|
|
177
|
+
Ayrıca `.use()` yöntemini kullanarak belirli düğümler için yerel geçersiz kılmalar sağlayabilirsiniz:
|
|
157
178
|
|
|
158
179
|
```tsx
|
|
159
180
|
{myMarkdownContent.use({
|
|
160
|
-
h1: ({ children }) => <h1
|
|
181
|
+
h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
|
|
161
182
|
})}
|
|
162
183
|
```
|
|
163
184
|
|
|
185
|
+
Markdown'ı bir dize olarak alabilirsiniz:
|
|
186
|
+
|
|
187
|
+
```tsx
|
|
188
|
+
{myMarkdownContent.value}
|
|
189
|
+
{String(myMarkdownContent)}
|
|
190
|
+
{myMarkdownContent.toString()}
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
Ve markdown meta verilerinize şu şekilde erişebilirsiniz:
|
|
194
|
+
|
|
195
|
+
```tsx
|
|
196
|
+
{myMarkdownContent.metadata}
|
|
197
|
+
{myMarkdownContent.metadata.title}
|
|
198
|
+
```
|
|
199
|
+
|
|
164
200
|
</Tab>
|
|
165
201
|
<Tab label="Vue" value="vue">
|
|
166
|
-
Vue'
|
|
202
|
+
Vue'da, Markdown içeriği yerleşik `component` etiketi kullanılarak veya doğrudan bir düğüm olarak oluşturulabilir.
|
|
167
203
|
|
|
168
204
|
```vue fileName="App.vue"
|
|
169
205
|
<script setup>
|
|
@@ -176,48 +212,188 @@ Render işlemi Intlayer'ın içerik sistemi tarafından otomatik olarak veya öz
|
|
|
176
212
|
</template>
|
|
177
213
|
```
|
|
178
214
|
|
|
215
|
+
`intlayerMarkdown` eklentisi aracılığıyla global olarak yapılandırın (MDX özel bileşenlerini destekler):
|
|
216
|
+
|
|
217
|
+
```ts fileName="main.ts"
|
|
218
|
+
import { intlayerMarkdown } from "vue-intlayer/markdown";
|
|
219
|
+
|
|
220
|
+
app.use(intlayerMarkdown, {
|
|
221
|
+
components: {
|
|
222
|
+
h1: (props) => h('h1', { style: { color: 'green' } }, props.children),
|
|
223
|
+
MyButton: (props) => h('button', props), // MDX Bileşeni
|
|
224
|
+
},
|
|
225
|
+
});
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
> `intlayerMarkdown` eklentisi yüklü değilse, Intlayer varsayılan derleyiciyi kullanarak oluşturacaktır.
|
|
229
|
+
|
|
230
|
+
Ayrıca `.use()` yöntemini kullanarak belirli düğümler için yerel geçersiz kılmalar sağlayabilirsiniz:
|
|
231
|
+
|
|
232
|
+
```vue
|
|
233
|
+
<component :is="myMarkdownContent.use({
|
|
234
|
+
h1: (props) => h('h1', { style: { color: 'red' } }, props.children),
|
|
235
|
+
})" />
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
Markdown'ı bir dize olarak alabilirsiniz:
|
|
239
|
+
|
|
240
|
+
```vue
|
|
241
|
+
{{ myMarkdownContent.value }}
|
|
242
|
+
{{ String(myMarkdownContent) }}
|
|
243
|
+
{{ myMarkdownContent.toString() }}
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
Ve markdown meta verilerinize şu şekilde erişebilirsiniz:
|
|
247
|
+
|
|
248
|
+
```vue
|
|
249
|
+
<component :is="myMarkdownContent.metadata" />
|
|
250
|
+
<component :is="myMarkdownContent.metadata.title" />
|
|
251
|
+
```
|
|
252
|
+
|
|
179
253
|
</Tab>
|
|
180
|
-
<Tab label="Svelte">
|
|
181
|
-
Svelte, Markdown'ı varsayılan olarak bir HTML
|
|
254
|
+
<Tab label="Svelte" value="svelte">
|
|
255
|
+
Svelte, Markdown'ı varsayılan olarak bir HTML dizesi olarak oluşturur. Oluşturmak için `{@html}` kullanın.
|
|
182
256
|
|
|
183
|
-
```svelte
|
|
257
|
+
```svelte fileName="App.svelte"
|
|
184
258
|
<script lang="ts">
|
|
185
259
|
import { useIntlayer } from "svelte-intlayer";
|
|
260
|
+
import { MarkdownProvider } from "svelte-intlayer/markdown";
|
|
261
|
+
import MyHeading from "./MyHeading.svelte";
|
|
262
|
+
|
|
186
263
|
const content = useIntlayer("app");
|
|
187
264
|
</script>
|
|
188
265
|
|
|
189
|
-
{
|
|
266
|
+
<MarkdownProvider components={{ h1: MyHeading }}>
|
|
267
|
+
{@html $content.myMarkdownContent}
|
|
268
|
+
</MarkdownProvider>
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
> `MarkdownProvider` mevcut değilse, Intlayer varsayılan derleyiciyi kullanarak markdown'ı oluşturacaktır.
|
|
272
|
+
|
|
273
|
+
Ayrıca `.use()` yöntemini kullanarak belirli düğümler için yerel geçersiz kılmalar sağlayabilirsiniz:
|
|
274
|
+
|
|
275
|
+
```svelte
|
|
276
|
+
{@html $content.myMarkdownContent.use({ ... })}
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
Markdown'ı bir dize olarak alabilirsiniz:
|
|
280
|
+
|
|
281
|
+
```svelte
|
|
282
|
+
{$content.myMarkdownContent.value}
|
|
283
|
+
{String($content.myMarkdownContent)}
|
|
284
|
+
{$content.myMarkdownContent.toString()}
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
Ve markdown meta verilerinize şu şekilde erişebilirsiniz:
|
|
288
|
+
|
|
289
|
+
```svelte
|
|
290
|
+
{$content.myMarkdownContent.metadata}
|
|
291
|
+
{$content.myMarkdownContent.metadata.title}
|
|
190
292
|
```
|
|
191
293
|
|
|
192
294
|
</Tab>
|
|
193
295
|
<Tab label="Preact" value="preact">
|
|
194
|
-
Preact, Markdown düğümlerini
|
|
296
|
+
Preact, JSX'teki Markdown düğümlerini doğrudan destekler.
|
|
195
297
|
|
|
196
298
|
```tsx fileName="App.tsx"
|
|
197
299
|
import { useIntlayer } from "preact-intlayer";
|
|
300
|
+
import { MarkdownProvider } from "preact-intlayer/markdown";
|
|
198
301
|
|
|
199
302
|
const AppContent = () => {
|
|
200
303
|
const { myMarkdownContent } = useIntlayer("app");
|
|
201
304
|
return <div>{myMarkdownContent}</div>;
|
|
202
305
|
};
|
|
306
|
+
|
|
307
|
+
const App = () => (
|
|
308
|
+
<MarkdownProvider
|
|
309
|
+
components={{
|
|
310
|
+
h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
|
|
311
|
+
MyButton: (props) => <button {...props} />, // MDX Bileşeni
|
|
312
|
+
}}
|
|
313
|
+
>
|
|
314
|
+
<AppContent />
|
|
315
|
+
</MarkdownProvider>
|
|
316
|
+
);
|
|
317
|
+
```
|
|
318
|
+
|
|
319
|
+
> `MarkdownProvider` mevcut değilse, Intlayer varsayılan Markdown - JSX ayrıştırıcısını kullanarak markdown'ı oluşturacaktır.
|
|
320
|
+
|
|
321
|
+
Ayrıca `.use()` yöntemini kullanarak belirli düğümler için yerel geçersiz kılmalar sağlayabilirsiniz:
|
|
322
|
+
|
|
323
|
+
```tsx
|
|
324
|
+
{myMarkdownContent.use({
|
|
325
|
+
h1: ({ children }) => <h1 style={{ color: "red" }}>{children}</h1>,
|
|
326
|
+
})}
|
|
327
|
+
```
|
|
328
|
+
|
|
329
|
+
Markdown'ı bir dize olarak alabilirsiniz:
|
|
330
|
+
|
|
331
|
+
```tsx
|
|
332
|
+
{myMarkdownContent.value}
|
|
333
|
+
{String(myMarkdownContent)}
|
|
334
|
+
{myMarkdownContent.toString()}
|
|
335
|
+
```
|
|
336
|
+
|
|
337
|
+
Ve markdown meta verilerinize şu şekilde erişebilirsiniz:
|
|
338
|
+
|
|
339
|
+
```tsx
|
|
340
|
+
{myMarkdownContent.metadata}
|
|
341
|
+
{myMarkdownContent.metadata.title}
|
|
203
342
|
```
|
|
204
343
|
|
|
205
344
|
</Tab>
|
|
206
345
|
<Tab label="Solid" value="solid">
|
|
207
|
-
Solid, Markdown düğümlerini
|
|
346
|
+
Solid, JSX'teki Markdown düğümlerini doğrudan destekler.
|
|
208
347
|
|
|
209
348
|
```tsx fileName="App.tsx"
|
|
210
349
|
import { useIntlayer } from "solid-intlayer";
|
|
350
|
+
import { MarkdownProvider } from "solid-intlayer/markdown";
|
|
211
351
|
|
|
212
352
|
const AppContent = () => {
|
|
213
353
|
const { myMarkdownContent } = useIntlayer("app");
|
|
214
354
|
return <div>{myMarkdownContent}</div>;
|
|
215
355
|
};
|
|
356
|
+
|
|
357
|
+
const App = () => (
|
|
358
|
+
<MarkdownProvider
|
|
359
|
+
components={{
|
|
360
|
+
h1: (props) => <h1 style={{ color: "red" }}>{props.children}</h1>,
|
|
361
|
+
MyButton: (props) => <button {...props} />, // MDX Bileşeni
|
|
362
|
+
}}
|
|
363
|
+
>
|
|
364
|
+
<AppContent />
|
|
365
|
+
</MarkdownProvider>
|
|
366
|
+
);
|
|
367
|
+
```
|
|
368
|
+
|
|
369
|
+
> `MarkdownProvider` mevcut değilse, Intlayer varsayılan Markdown - JSX ayrıştırıcısını kullanarak markdown'ı oluşturacaktır.
|
|
370
|
+
|
|
371
|
+
Ayrıca `.use()` yöntemini kullanarak belirli düğümler için yerel geçersiz kılmalar sağlayabilirsiniz:
|
|
372
|
+
|
|
373
|
+
```tsx
|
|
374
|
+
{myMarkdownContent.use({
|
|
375
|
+
h1: (props) => <h1 style={{ color: "red" }}>{props.children}</h1>,
|
|
376
|
+
})}
|
|
377
|
+
```
|
|
378
|
+
|
|
379
|
+
Markdown'ı bir dize olarak alabilirsiniz:
|
|
380
|
+
|
|
381
|
+
```tsx
|
|
382
|
+
{myMarkdownContent.value}
|
|
383
|
+
{String(myMarkdownContent)}
|
|
384
|
+
{myMarkdownContent.toString()}
|
|
385
|
+
```
|
|
386
|
+
|
|
387
|
+
Ve markdown meta verilerinize şu şekilde erişebilirsiniz:
|
|
388
|
+
|
|
389
|
+
```tsx
|
|
390
|
+
{myMarkdownContent.metadata}
|
|
391
|
+
{myMarkdownContent.metadata.title}
|
|
216
392
|
```
|
|
217
393
|
|
|
218
394
|
</Tab>
|
|
219
395
|
<Tab label="Angular" value="angular">
|
|
220
|
-
Angular, Markdown içeriğini oluşturmak için `[innerHTML]`
|
|
396
|
+
Angular, Markdown içeriğini oluşturmak için `[innerHTML]` yönergesini kullanır.
|
|
221
397
|
|
|
222
398
|
```typescript fileName="app.component.ts"
|
|
223
399
|
import { Component } from "@angular/core";
|
|
@@ -232,7 +408,9 @@ Render işlemi Intlayer'ın içerik sistemi tarafından otomatik olarak veya öz
|
|
|
232
408
|
}
|
|
233
409
|
```
|
|
234
410
|
|
|
235
|
-
|
|
411
|
+
> IntlayerMarkdown sağlayıcısı yapılandırılmamışsa, Intlayer varsayılan derleyiciyi kullanarak oluşturacaktır.
|
|
412
|
+
|
|
413
|
+
Ayrıca `.use()` yöntemini kullanarak belirli düğümler için yerel geçersiz kılmalar sağlayabilirsiniz:
|
|
236
414
|
|
|
237
415
|
```typescript
|
|
238
416
|
content().myMarkdownContent.use({
|
|
@@ -240,18 +418,35 @@ Render işlemi Intlayer'ın içerik sistemi tarafından otomatik olarak veya öz
|
|
|
240
418
|
})
|
|
241
419
|
```
|
|
242
420
|
|
|
421
|
+
Markdown'ı bir dize olarak alabilirsiniz:
|
|
422
|
+
|
|
423
|
+
```typescript
|
|
424
|
+
content().myMarkdownContent.value
|
|
425
|
+
String(content().myMarkdownContent)
|
|
426
|
+
content().myMarkdownContent.toString()
|
|
427
|
+
```
|
|
428
|
+
|
|
429
|
+
Ve markdown meta verilerinize şu şekilde erişebilirsiniz:
|
|
430
|
+
|
|
431
|
+
```typescript
|
|
432
|
+
content().myMarkdownContent.metadata
|
|
433
|
+
content().myMarkdownContent.metadata.title
|
|
434
|
+
```
|
|
435
|
+
|
|
243
436
|
</Tab>
|
|
244
437
|
</Tabs>
|
|
245
438
|
|
|
246
|
-
### 2.
|
|
439
|
+
### 2. Yardımcı Araçlar (Yalnızca Markdown Dizeleri)
|
|
247
440
|
|
|
248
|
-
|
|
441
|
+
Bu yardımcı programlar **yalnızca ham Markdown dizelerini** oluşturur ve `useIntlayer`'dan bağımsızdır. Markdown'ı sözlükleriniz dışındaki kaynaklardan oluşturmanız gerektiğinde bunları kullanın.
|
|
249
442
|
|
|
250
443
|
<Tabs group="framework">
|
|
251
444
|
<Tab label="React / Next.js" value="react">
|
|
252
445
|
|
|
253
446
|
#### `<MarkdownRenderer />` Bileşeni
|
|
254
447
|
|
|
448
|
+
Belirli seçeneklerle bir Markdown dizesini oluşturur.
|
|
449
|
+
|
|
255
450
|
```tsx
|
|
256
451
|
import { MarkdownRenderer } from "react-intlayer/markdown";
|
|
257
452
|
|
|
@@ -260,8 +455,9 @@ Ham Markdown string'lerini render etmeniz gerekiyorsa veya render süreci üzeri
|
|
|
260
455
|
</MarkdownRenderer>
|
|
261
456
|
```
|
|
262
457
|
|
|
263
|
-
#### `useMarkdownRenderer()`
|
|
264
|
-
|
|
458
|
+
#### `useMarkdownRenderer()` Kancası
|
|
459
|
+
|
|
460
|
+
Önceden yapılandırılmış bir oluşturucu işlevi alın.
|
|
265
461
|
|
|
266
462
|
```tsx
|
|
267
463
|
import { useMarkdownRenderer } from "react-intlayer/markdown";
|
|
@@ -274,8 +470,8 @@ Ham Markdown string'lerini render etmeniz gerekiyorsa veya render süreci üzeri
|
|
|
274
470
|
return renderMarkdown("# Başlığım");
|
|
275
471
|
```
|
|
276
472
|
|
|
277
|
-
#### `renderMarkdown()` Yardımcı
|
|
278
|
-
|
|
473
|
+
#### `renderMarkdown()` Yardımcı Programı
|
|
474
|
+
Bileşenler dışında oluşturmak için bağımsız yardımcı program.
|
|
279
475
|
|
|
280
476
|
```tsx
|
|
281
477
|
import { renderMarkdown } from "react-intlayer/markdown";
|
|
@@ -299,7 +495,7 @@ Ham Markdown string'lerini render etmeniz gerekiyorsa veya render süreci üzeri
|
|
|
299
495
|
```
|
|
300
496
|
|
|
301
497
|
</Tab>
|
|
302
|
-
<Tab label="Svelte">
|
|
498
|
+
<Tab label="Svelte" value="svelte">
|
|
303
499
|
|
|
304
500
|
#### `<MarkdownRenderer />` Bileşeni
|
|
305
501
|
|
|
@@ -311,7 +507,7 @@ Ham Markdown string'lerini render etmeniz gerekiyorsa veya render süreci üzeri
|
|
|
311
507
|
<MarkdownRenderer forceBlock={true} value="# Başlığım" />
|
|
312
508
|
```
|
|
313
509
|
|
|
314
|
-
#### `useMarkdownRenderer()`
|
|
510
|
+
#### `useMarkdownRenderer()` Kancası
|
|
315
511
|
|
|
316
512
|
```svelte
|
|
317
513
|
<script lang="ts">
|
|
@@ -322,7 +518,7 @@ Ham Markdown string'lerini render etmeniz gerekiyorsa veya render süreci üzeri
|
|
|
322
518
|
{@html render("# Başlığım")}
|
|
323
519
|
```
|
|
324
520
|
|
|
325
|
-
#### `renderMarkdown()` Yardımcı
|
|
521
|
+
#### `renderMarkdown()` Yardımcı Programı
|
|
326
522
|
|
|
327
523
|
```svelte
|
|
328
524
|
<script lang="ts">
|
|
@@ -344,7 +540,7 @@ Ham Markdown string'lerini render etmeniz gerekiyorsa veya render süreci üzeri
|
|
|
344
540
|
</MarkdownRenderer>
|
|
345
541
|
```
|
|
346
542
|
|
|
347
|
-
#### `useMarkdownRenderer()`
|
|
543
|
+
#### `useMarkdownRenderer()` Kancası
|
|
348
544
|
|
|
349
545
|
```tsx
|
|
350
546
|
import { useMarkdownRenderer } from "preact-intlayer/markdown";
|
|
@@ -354,7 +550,7 @@ Ham Markdown string'lerini render etmeniz gerekiyorsa veya render süreci üzeri
|
|
|
354
550
|
return <div>{render("# Başlığım")}</div>;
|
|
355
551
|
```
|
|
356
552
|
|
|
357
|
-
#### `renderMarkdown()` Yardımcı
|
|
553
|
+
#### `renderMarkdown()` Yardımcı Programı
|
|
358
554
|
|
|
359
555
|
```tsx
|
|
360
556
|
import { renderMarkdown } from "preact-intlayer/markdown";
|
|
@@ -374,7 +570,7 @@ Ham Markdown string'lerini render etmeniz gerekiyorsa veya render süreci üzeri
|
|
|
374
570
|
</MarkdownRenderer>
|
|
375
571
|
```
|
|
376
572
|
|
|
377
|
-
#### `useMarkdownRenderer()`
|
|
573
|
+
#### `useMarkdownRenderer()` Kancası
|
|
378
574
|
|
|
379
575
|
```tsx
|
|
380
576
|
import { useMarkdownRenderer } from "solid-intlayer/markdown";
|
|
@@ -384,7 +580,7 @@ Ham Markdown string'lerini render etmeniz gerekiyorsa veya render süreci üzeri
|
|
|
384
580
|
return <div>{render("# Başlığım")}</div>;
|
|
385
581
|
```
|
|
386
582
|
|
|
387
|
-
#### `renderMarkdown()` Yardımcı
|
|
583
|
+
#### `renderMarkdown()` Yardımcı Programı
|
|
388
584
|
|
|
389
585
|
```tsx
|
|
390
586
|
import { renderMarkdown } from "solid-intlayer/markdown";
|
|
@@ -394,8 +590,8 @@ Ham Markdown string'lerini render etmeniz gerekiyorsa veya render süreci üzeri
|
|
|
394
590
|
|
|
395
591
|
</Tab>
|
|
396
592
|
<Tab label="Angular" value="angular">
|
|
397
|
-
#### `IntlayerMarkdownService`
|
|
398
|
-
|
|
593
|
+
#### `IntlayerMarkdownService` Hizmeti
|
|
594
|
+
Hizmeti kullanarak bir Markdown dizesini oluşturur.
|
|
399
595
|
|
|
400
596
|
```typescript
|
|
401
597
|
import { IntlayerMarkdownService } from "angular-intlayer/markdown";
|
|
@@ -414,9 +610,9 @@ Ham Markdown string'lerini render etmeniz gerekiyorsa veya render süreci üzeri
|
|
|
414
610
|
|
|
415
611
|
---
|
|
416
612
|
|
|
417
|
-
## `MarkdownProvider` ile
|
|
613
|
+
## `MarkdownProvider` ile Global Yapılandırma
|
|
418
614
|
|
|
419
|
-
|
|
615
|
+
`MarkdownProvider` (veya çerçeve eşdeğeri), tüm uygulamanız için Markdown oluşturma işlem hattını yapılandırır. Bu hem otomatik `useIntlayer` oluşturma işlemleri hem de yardımcı araçlar için geçerlidir. Burada ayarlanan seçenekler varsayılanlardır — `.use()` bunları düğüm düzeyinde geçersiz kılar.
|
|
420
616
|
|
|
421
617
|
<Tabs group="framework">
|
|
422
618
|
<Tab label="React / Next.js" value="react">
|
|
@@ -427,8 +623,9 @@ Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabi
|
|
|
427
623
|
export const AppProvider = ({ children }) => (
|
|
428
624
|
<MarkdownProvider
|
|
429
625
|
components={{
|
|
430
|
-
h1: (
|
|
431
|
-
a: ({ href,
|
|
626
|
+
h1: (props) => <h1 style={{color: 'green'}} {...props} />,
|
|
627
|
+
a: ({ href, ...props }) => <a style={{color: 'red'}} {...props} />,
|
|
628
|
+
MyCustomJSXComponent: (props) => <span style={{color: 'red'}} {...props} />,
|
|
432
629
|
}}
|
|
433
630
|
>
|
|
434
631
|
{children}
|
|
@@ -436,7 +633,9 @@ Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabi
|
|
|
436
633
|
);
|
|
437
634
|
```
|
|
438
635
|
|
|
439
|
-
|
|
636
|
+
> MDX desteklenir — Markdown'ınızın içinde kullanılan herhangi bir bileşen adı (örn. `<MyCustomJSXComponent />`) `components` haritasına göre çözümlenir.
|
|
637
|
+
|
|
638
|
+
Kendi markdown oluşturucunuzu da kullanabilirsiniz:
|
|
440
639
|
|
|
441
640
|
```tsx fileName="AppProvider.tsx"
|
|
442
641
|
import { MarkdownProvider } from "react-intlayer/markdown";
|
|
@@ -444,8 +643,8 @@ Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabi
|
|
|
444
643
|
export const AppProvider = ({ children }) => (
|
|
445
644
|
<MarkdownProvider
|
|
446
645
|
renderMarkdown={async (md) => {
|
|
447
|
-
const {
|
|
448
|
-
return
|
|
646
|
+
const { renderMarkdown } = await import('react-intlayer/markdown');
|
|
647
|
+
return renderMarkdown(md);
|
|
449
648
|
}}
|
|
450
649
|
>
|
|
451
650
|
{children}
|
|
@@ -453,7 +652,7 @@ Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabi
|
|
|
453
652
|
);
|
|
454
653
|
```
|
|
455
654
|
|
|
456
|
-
> Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın paket boyutunu azaltmanın
|
|
655
|
+
> Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın paket boyutunu azaltmanın harika bir yoludur.
|
|
457
656
|
|
|
458
657
|
</Tab>
|
|
459
658
|
<Tab label="Vue" value="vue">
|
|
@@ -480,7 +679,7 @@ Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabi
|
|
|
480
679
|
app.mount("#app");
|
|
481
680
|
```
|
|
482
681
|
|
|
483
|
-
Kendi
|
|
682
|
+
Kendi markdown oluşturucunuzu da kullanabilirsiniz:
|
|
484
683
|
|
|
485
684
|
```typescript fileName="main.ts"
|
|
486
685
|
import { createApp } from "vue";
|
|
@@ -493,18 +692,18 @@ Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabi
|
|
|
493
692
|
app.use(intlayer);
|
|
494
693
|
app.use(intlayerMarkdown, {
|
|
495
694
|
renderMarkdown: async (md) => {
|
|
496
|
-
const {
|
|
497
|
-
return
|
|
695
|
+
const { renderMarkdown } = await import('vue-intlayer/markdown');
|
|
696
|
+
return renderMarkdown(md);
|
|
498
697
|
},
|
|
499
698
|
});
|
|
500
699
|
|
|
501
700
|
app.mount("#app");
|
|
502
701
|
```
|
|
503
702
|
|
|
504
|
-
> Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın paket boyutunu azaltmanın
|
|
703
|
+
> Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın paket boyutunu azaltmanın harika bir yoludur.
|
|
505
704
|
|
|
506
705
|
</Tab>
|
|
507
|
-
<Tab label="Svelte">
|
|
706
|
+
<Tab label="Svelte" value="svelte">
|
|
508
707
|
|
|
509
708
|
```svelte fileName="App.svelte"
|
|
510
709
|
<script lang="ts">
|
|
@@ -521,7 +720,7 @@ Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabi
|
|
|
521
720
|
</MarkdownProvider>
|
|
522
721
|
```
|
|
523
722
|
|
|
524
|
-
Kendi
|
|
723
|
+
Kendi markdown oluşturucunuzu da kullanabilirsiniz:
|
|
525
724
|
|
|
526
725
|
```svelte fileName="App.svelte"
|
|
527
726
|
<script lang="ts">
|
|
@@ -530,15 +729,15 @@ Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabi
|
|
|
530
729
|
|
|
531
730
|
<MarkdownProvider
|
|
532
731
|
renderMarkdown={async (md) => {
|
|
533
|
-
const {
|
|
534
|
-
return
|
|
732
|
+
const { renderMarkdown } = await import('svelte-intlayer/markdown');
|
|
733
|
+
return renderMarkdown(md);
|
|
535
734
|
}}
|
|
536
735
|
>
|
|
537
736
|
<slot />
|
|
538
737
|
</MarkdownProvider>
|
|
539
738
|
```
|
|
540
739
|
|
|
541
|
-
> Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın paket boyutunu azaltmanın
|
|
740
|
+
> Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın paket boyutunu azaltmanın harika bir yoludur.
|
|
542
741
|
|
|
543
742
|
</Tab>
|
|
544
743
|
<Tab label="Preact" value="preact">
|
|
@@ -557,7 +756,7 @@ Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabi
|
|
|
557
756
|
);
|
|
558
757
|
```
|
|
559
758
|
|
|
560
|
-
Kendi
|
|
759
|
+
Kendi markdown oluşturucunuzu da kullanabilirsiniz:
|
|
561
760
|
|
|
562
761
|
```tsx fileName="AppProvider.tsx"
|
|
563
762
|
import { MarkdownProvider } from "preact-intlayer/markdown";
|
|
@@ -565,8 +764,8 @@ Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabi
|
|
|
565
764
|
export const AppProvider = ({ children }) => (
|
|
566
765
|
<MarkdownProvider
|
|
567
766
|
renderMarkdown={async (md) => {
|
|
568
|
-
const {
|
|
569
|
-
return
|
|
767
|
+
const { renderMarkdown } = await import('preact-intlayer/markdown');
|
|
768
|
+
return renderMarkdown(md);
|
|
570
769
|
}}
|
|
571
770
|
>
|
|
572
771
|
{children}
|
|
@@ -574,7 +773,7 @@ Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabi
|
|
|
574
773
|
);
|
|
575
774
|
```
|
|
576
775
|
|
|
577
|
-
> Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın paket boyutunu azaltmanın
|
|
776
|
+
> Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın paket boyutunu azaltmanın harika bir yoludur.
|
|
578
777
|
|
|
579
778
|
</Tab>
|
|
580
779
|
<Tab label="Solid" value="solid">
|
|
@@ -593,7 +792,7 @@ Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabi
|
|
|
593
792
|
);
|
|
594
793
|
```
|
|
595
794
|
|
|
596
|
-
Kendi
|
|
795
|
+
Kendi markdown oluşturucunuzu da kullanabilirsiniz:
|
|
597
796
|
|
|
598
797
|
```tsx fileName="AppProvider.tsx"
|
|
599
798
|
import { MarkdownProvider } from "solid-intlayer/markdown";
|
|
@@ -601,8 +800,8 @@ Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabi
|
|
|
601
800
|
export const AppProvider = (props) => (
|
|
602
801
|
<MarkdownProvider
|
|
603
802
|
renderMarkdown={async (md) => {
|
|
604
|
-
const {
|
|
605
|
-
return
|
|
803
|
+
const { renderMarkdown } = await import('solid-intlayer/markdown');
|
|
804
|
+
return renderMarkdown(md);
|
|
606
805
|
}}
|
|
607
806
|
>
|
|
608
807
|
{props.children}
|
|
@@ -610,59 +809,29 @@ Markdown render'lamasını tüm uygulamanız için global olarak yapılandırabi
|
|
|
610
809
|
);
|
|
611
810
|
```
|
|
612
811
|
|
|
613
|
-
> Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın paket boyutunu azaltmanın
|
|
812
|
+
> Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın paket boyutunu azaltmanın harika bir yoludur.
|
|
614
813
|
|
|
615
814
|
</Tab>
|
|
616
815
|
<Tab label="Angular" value="angular">
|
|
617
816
|
|
|
618
|
-
```typescript fileName="app.
|
|
619
|
-
import {
|
|
620
|
-
|
|
621
|
-
export const appConfig: ApplicationConfig = {
|
|
622
|
-
providers: [
|
|
623
|
-
createIntlayerMarkdownProvider({
|
|
624
|
-
components: {
|
|
625
|
-
h1: { class: "text-2xl font-bold" },
|
|
626
|
-
},
|
|
627
|
-
}),
|
|
628
|
-
],
|
|
629
|
-
};
|
|
630
|
-
```
|
|
631
|
-
|
|
632
|
-
Kendi Markdown oluşturucunuzu da kullanabilirsiniz:
|
|
633
|
-
|
|
634
|
-
```typescript fileName="app.config.ts"
|
|
635
|
-
import { createIntlayerMarkdownProvider } from "angular-intlayer/markdown";
|
|
817
|
+
```typescript fileName="app.module.ts"
|
|
818
|
+
import { NgModule } from '@angular/core';
|
|
819
|
+
import { IntlayerMarkdownModule } from 'angular-intlayer/markdown';
|
|
636
820
|
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
821
|
+
@NgModule({
|
|
822
|
+
imports: [
|
|
823
|
+
IntlayerMarkdownModule.forRoot({
|
|
640
824
|
renderMarkdown: async (md) => {
|
|
641
|
-
const {
|
|
642
|
-
return
|
|
643
|
-
}
|
|
644
|
-
})
|
|
645
|
-
]
|
|
646
|
-
}
|
|
825
|
+
const { renderMarkdown } = await import('angular-intlayer/markdown');
|
|
826
|
+
return renderMarkdown(md);
|
|
827
|
+
}
|
|
828
|
+
})
|
|
829
|
+
]
|
|
830
|
+
})
|
|
831
|
+
export class AppModule {}
|
|
647
832
|
```
|
|
648
833
|
|
|
649
|
-
> Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın paket boyutunu azaltmanın
|
|
834
|
+
> Markdown oluşturucunuzu dinamik olarak içe aktarmak, uygulamanızın paket boyutunu azaltmanın harika bir yoludur.
|
|
650
835
|
|
|
651
836
|
</Tab>
|
|
652
837
|
</Tabs>
|
|
653
|
-
|
|
654
|
-
---
|
|
655
|
-
|
|
656
|
-
## Seçenekler Referansı
|
|
657
|
-
|
|
658
|
-
Bu seçenekler `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer` ve `renderMarkdown`'a iletilebilir.
|
|
659
|
-
|
|
660
|
-
| Seçenek | Tür | Varsayılan | Açıklama |
|
|
661
|
-
| :-------------------- | :---------- | :--------- | :------------------------------------------------------------------------------------------------------ |
|
|
662
|
-
| `forceBlock` | `boolean` | `false` | Çıktıyı bir blok düzeyinde öğe (örneğin `<div>`) içine sarılmaya zorlar. |
|
|
663
|
-
| `forceInline` | `boolean` | `false` | Çıktıyı bir satır içi öğe (örneğin `<span>`) içine sarılmaya zorlar. |
|
|
664
|
-
| `tagfilter` | `boolean` | `true` | Tehlikeli HTML etiketlerini ayıklayarak güvenliği artırmak için GitHub Etiket Filtresini etkinleştirir. |
|
|
665
|
-
| `preserveFrontmatter` | `boolean` | `false` | `true` ise, Markdown dizesinin başındaki frontmatter ayıklanmaz. |
|
|
666
|
-
| `components` | `Overrides` | `{}` | HTML etiketlerini özel bileşenlere eşleyen bir harita (örneğin, `{ h1: MyHeading }`). |
|
|
667
|
-
| `wrapper` | `Component` | `null` | Oluşturulan Markdown'ı sarmalamak için özel bir bileşen. |
|
|
668
|
-
| `renderMarkdown` | `Function` | `null` | Varsayılan Markdown derleyicisini tamamen değiştirmek için özel bir render fonksiyonu. |
|