Sıfır bağımlılıkMDX hazırSSR için tasarlandıÇapraz framework

5× daha hızlı işlenen Markdown.

Name: Intlayer Markdown
Rating: 4.92 (64 reviews)
Author: Intlayer

Intlayer kendi Markdown motorunu içerir. Bağımlılık yok, MDX dahil, sunucuda ayrıştırılır ve React, Next.js, Vue, Svelte, Solid, Preact ile Angular'da doğal olarak işlenir. Artık bir renderer seçmenize gerek yok.

Belgeleri oku Rakamları gör

markdown-file.content.md

---key: my-markdown-contentdescription: My content---# My contentHere an example of markdown content

front-matter locale alanı atlandığında Intlayer yapılandırılmış varsayılan dilinizi kullanır. Tüm içeriğinizi dil önekleri olmadan tek bir markdown dosyasında tutabilirsiniz.

Dosya yapısı örneği:

content
└── markdown-file.content.md

markdown-file.en.content.md

---key: my-markdown-contentdescription: My contentlocale: en---# My contentHere an example of markdown content

front-matter locale alanı içeriğin dilini belirler. İsteğe bağlıdır. Sağlanmazsa Intlayer, belirli bir dil için çeviri bulunmadığında geri dönüş olarak da kullanılan varsayılan dili kullanır.

Dosya yapısı örneği:

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

article.content.ts

import { md, file, t, type Dictionary } from 'intlayer';export default {  key: 'article',  content: {    body: t({      en: md(file('./article.en.md')),      fr: md(file('./article.fr.md')),    }),  },} satisfies Dictionary;

md() ve file() fonksiyonlarını kullanarak doğrudan TypeScript, ESM veya JSON sözlüğü içinde Markdown tanımlayın ve tam tip güvenliğiyle çevirileri eşleştirin.

Dosya yapısı örneği:

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

Bağımlılık yok

MDX bileşenleri

Tip güvenli frontmatter

Kullanılmazsa kaldırılır

markdown-to-jsx'in 5 katı verim

Ayrıştırıcı, önbelleğe alınmış kural önceliği ve artımlı lookbehind üzerine yeniden yazıldı; böylece belge kural kural yeniden taranmak yerine bir kez dolaşılır. Aynı Markdown, aynı çıktı, işin çok küçük bir kısmı.

Intlayer5×

markdown-to-jsx1×

Göreli ayrıştırma ve işleme verimi; yüksek olan daha iyidir.

0 kB

uygulamanız hiçbir Markdown düğümü tanımlamadığında gönderilir; renderer derleme sırasında kaldırılır.

~55 kB

boyutunda, Suspense arkasında tembel yüklenen ve ilk boyamayı asla engellemeyen ayrıştırıcı parçası.

çalışma zamanı bağımlılığı — denetlenecek ve senkron tutulacak bir şey yok.

Bir alışveriş listesi yerine tek bir motor

Her proje aynı angaryayla biter: markdown-to-jsx'i marked, remark ve MDX ile tartıp kazananı projeye bağlarsınız, ardından MDX'i desteklemediğini, tiplerinin gevşek olduğunu ya da eklenti zincirinin istemcide bozulduğunu keşfedersiniz. Intlayer bu seçimi sizin yerinize yapar.

Yetenek

Intlayer

markdown-to-jsx

marked

remark / rehype

@mdx-js

MDX bileşenleri

IntlayerMDX bileşenleriDestekleniyor

markdown-to-jsxMDX bileşenleriDesteklenmiyor

markedMDX bileşenleriDesteklenmiyor

remark / rehypeMDX bileşenleriKısmi ya da ek paketlerle

@mdx-jsMDX bileşenleriDestekleniyor

Tip güvenli düğümler ve geçersiz kılmalar

IntlayerTip güvenli düğümler ve geçersiz kılmalarDestekleniyor

markdown-to-jsxTip güvenli düğümler ve geçersiz kılmalarDesteklenmiyor

markedTip güvenli düğümler ve geçersiz kılmalarKısmi ya da ek paketlerle

remark / rehypeTip güvenli düğümler ve geçersiz kılmalarKısmi ya da ek paketlerle

@mdx-jsTip güvenli düğümler ve geçersiz kılmalarKısmi ya da ek paketlerle

React ve Next.js çıktısı

IntlayerReact ve Next.js çıktısıDestekleniyor

markdown-to-jsxReact ve Next.js çıktısıDestekleniyor

markedReact ve Next.js çıktısıDesteklenmiyor

remark / rehypeReact ve Next.js çıktısıKısmi ya da ek paketlerle

@mdx-jsReact ve Next.js çıktısıDestekleniyor

Vue, Svelte, Solid, Preact, Angular

IntlayerVue, Svelte, Solid, Preact, AngularDestekleniyor

markdown-to-jsxVue, Svelte, Solid, Preact, AngularDesteklenmiyor

markedVue, Svelte, Solid, Preact, AngularKısmi ya da ek paketlerle

remark / rehypeVue, Svelte, Solid, Preact, AngularKısmi ya da ek paketlerle

@mdx-jsVue, Svelte, Solid, Preact, AngularKısmi ya da ek paketlerle

Sunucuda ayrıştırma, istemcide işleme, yeniden ayrıştırma yok

IntlayerSunucuda ayrıştırma, istemcide işleme, yeniden ayrıştırma yokDestekleniyor

markdown-to-jsxSunucuda ayrıştırma, istemcide işleme, yeniden ayrıştırma yokDesteklenmiyor

markedSunucuda ayrıştırma, istemcide işleme, yeniden ayrıştırma yokKısmi ya da ek paketlerle

remark / rehypeSunucuda ayrıştırma, istemcide işleme, yeniden ayrıştırma yokDestekleniyor

@mdx-jsSunucuda ayrıştırma, istemcide işleme, yeniden ayrıştırma yokKısmi ya da ek paketlerle

Eklenti zinciri olmadan yapılandırma

IntlayerEklenti zinciri olmadan yapılandırmaDestekleniyor

markdown-to-jsxEklenti zinciri olmadan yapılandırmaDestekleniyor

markedEklenti zinciri olmadan yapılandırmaKısmi ya da ek paketlerle

remark / rehypeEklenti zinciri olmadan yapılandırmaDesteklenmiyor

@mdx-jsEklenti zinciri olmadan yapılandırmaDesteklenmiyor

Tipli frontmatter meta verileri

IntlayerTipli frontmatter meta verileriDestekleniyor

markdown-to-jsxTipli frontmatter meta verileriDesteklenmiyor

markedTipli frontmatter meta verileriDesteklenmiyor

remark / rehypeTipli frontmatter meta verileriKısmi ya da ek paketlerle

@mdx-jsTipli frontmatter meta verileriKısmi ya da ek paketlerle

Sıfır çalışma zamanı bağımlılığı

IntlayerSıfır çalışma zamanı bağımlılığıDestekleniyor

markdown-to-jsxSıfır çalışma zamanı bağımlılığıDestekleniyor

markedSıfır çalışma zamanı bağımlılığıDestekleniyor

remark / rehypeSıfır çalışma zamanı bağımlılığıDesteklenmiyor

@mdx-jsSıfır çalışma zamanı bağımlılığıDesteklenmiyor

Kullanılmadığında paketten kaldırılır

IntlayerKullanılmadığında paketten kaldırılırDestekleniyor

markdown-to-jsxKullanılmadığında paketten kaldırılırDesteklenmiyor

markedKullanılmadığında paketten kaldırılırDesteklenmiyor

remark / rehypeKullanılmadığında paketten kaldırılırDesteklenmiyor

@mdx-jsKullanılmadığında paketten kaldırılırDesteklenmiyor

DestekleniyorKısmi ya da ek paketlerleDesteklenmiyor

remark ve rehype bunun çoğunu yapabilir; ama kendinizin kurduğu ve tarayıcıda sunucudakiyle her zaman aynı davranmayan bir eklenti zinciri üzerinden.
markdown-to-jsx yalnızca React işler, marked ise size bir HTML dizesi verir. Vue, Svelte, Solid veya Angular için başvurabileceğiniz bir muadil yok.
Hiçbiri size tipli frontmatter vermez: ya üstüne bir içerik katmanı eklersiniz ya da meta verileri kendiniz ayrıştırırsınız.

Aynı düğüm, her frameworkte

Bir Markdown düğümü, bulunduğu frameworkün doğal çıktısına dönüşür: JSX, VNode ya da HTML dizesi. Svelte, Solid ve Angular sonradan eklenmiş değil, birinci sınıf hedeflerdir.

ReactŞu olarak işlenir JSX

Next.jsŞu olarak işlenir JSX

VueŞu olarak işlenir VNode

NuxtŞu olarak işlenir VNode

SvelteŞu olarak işlenir HTML

SolidŞu olarak işlenir JSX

PreactŞu olarak işlenir JSX

AngularŞu olarak işlenir HTML

Sunucuda ayrıştır, istemcide işle

Ayrıştırma ve işleme iki ayrı adımdır. parseMarkdown sunucuda serileştirilebilir bir AST üretir, tarayıcı bunu JSON olarak alır ve her renderer onu olduğu gibi kabul eder; belge asla iki kez dolaşılmaz.

Sunucuda

Belge bir kez ayrıştırılır ve önbelleğe alabileceğiniz, akıtabileceğiniz veya saklayabileceğiniz bir JSON olur.

route.server.ts

import { parseMarkdown } from 'react-intlayer/markdown';export const loader = async () => {  // Walked once, on the server  const ast = parseMarkdown('## My title\n\nLorem Ipsum');  return Response.json({ content: ast });};

İstemcide

Rendererlar ham dizeyi de AST’yi de kabul eder; tarayıcı yalnızca çizer.

Page.tsx

import { useLoaderData } from 'react-router';import { MarkdownRenderer } from 'react-intlayer/markdown';export default function Page() {  const { content } = useLoaderData();  // No re-parsing in the browser  return <MarkdownRenderer content={content} />;}

Bir kez ayarlayın, düğüm bazında ince ayar yapın

Bileşenlerinizi sağlayıcıda tanımlayın; uygulamadaki her Markdown düğümü onları kullanır. Bir düğümün farklı olması gerektiğinde use() yalnızca o düğümü geçersiz kılar; eklenti zinciri de ayrı bir derleme adımı da yok.

Küresel, tüm uygulama için

AppProvider.tsx

import { MarkdownProvider } from 'react-intlayer/markdown';export const AppProvider = ({ children }) => (  <MarkdownProvider    components={{      h1: ({ children }) => <h1 className="text-3xl">{children}</h1>,      MyButton: (props) => <button {...props} />, // MDX component    }}  >    {children}  </MarkdownProvider>);

Yerel, tek bir düğüm için

Article.tsx

import { useIntlayer } from 'react-intlayer';const Article = () => {  const { body } = useIntlayer('article');  // Overrides the provider, for this node only  return body.use({    h1: ({ children }) => <h1 className="text-primary">{children}</h1>,  });};

use(), sağlayıcıyı; sağlayıcı da varsayılan renderer'ı geçersiz kılar.

Tipli frontmatter, içerik katmanı yok

Bir Markdown dosyasının frontmatter’ı belgeyle birlikte ayrıştırılır ve düğümde tipli bir meta veri nesnesi olarak sunulur. Uğruna içerik katmanı kurduğunuz editoryal alanlar, otomatik tamamlamayla birlikte orada duruyor.

article.en.content.md

---key: articlelocale: entitle: Shipping i18n Markdownauthor: aymericzip---# Shipping i18n MarkdownHere an example of markdown content.

Article.tsx

const { body } = useIntlayer('article');body.metadata.title; // 'Shipping i18n Markdown'body.metadata.author; // 'aymericzip'body.value; // the raw Markdown string

Aynı motor HTML’i de ayrıştırır

html() düğümleri de aynı hattan geçer: etiketler kendi bileşenlerinize eşlenir, aynı tipleme ve aynı geçersiz kılma kurallarıyla.

HTML içeriğine bakın

Kod tabanlı i18n

Deponuzda yaşayan tip güvenli çeviriler.

İçeriği TypeScript veya JavaScript bileşenlerinizin yanında bildirin. Intlayer türleri otomatik olarak oluşturur, size otomatik tamamlama, doğrulama ve anında geri bildirim sağlar. Artık eksik anahtarlar veya bağlam değiştirme yok.

Kodlamaya Başla

AI CLI Tool

Çevirileri terminalinizden otomatikleştirin.

AI ile JSON ve Markdown'ı denetlemek, doldurmak ve çevirmek için CLI.

Eksik anahtarları tespit etmek ve OpenAI, Claude veya yerel modelleri kullanarak çeviriler oluşturmak için `npx intlayer fill` çalıştırın. Git geçmişinizi temiz tutun.

CLI'ı Dene

Intlayer TMS

Kelime başına ödeme yapmayı bırakın. AI ile otomatikleştirin.

Crowdin ve Lokalise'nin açık kaynak ve self-hosted alternatifi. Modern geliştirici iş akışları için oluşturuldu.

Çevirileri doğrudan kodunuzda veya görsel düzenleyici aracılığıyla yönetin. Anında çeviri için AI'dan yararlanın. Koltuk sınırı olmadan ekibinizle işbirliği yapın.

TMS gör

Headless CMS

Yerel kodunuzu uzak içerikle köprüleyin.

Çok dilli içeriği ek yük olmadan yönetin. Intlayer, yerel sözlükleri uzaktan yönetimle birbirine bağlamanıza olanak tanır ve yeniden oluşturmadan sıcak güncellemeler için Canlı Senkronizasyon sağlar. CI/CD için webhook kullanın.

CMS gör

Özellik Bayrakları

Özellikleri anında değiştirin. Dağıtım gerekmez.

Intlayer sözlükleri sadece metinden ibaret değildir. Mantık, stiller ve yapılandırmalar bildirmek için kullanın. Live Sync ile özellikleri açıp kapatabilir, UI temalarını değiştirebilir ve uygulama davranışını doğrudan CMS üzerinden gerçek zamanlı güncelleyebilirsiniz.

Özellikleri Dene

A/B testi

Ürün Deneyleri için Playground.

Intlayer'ın yeni Yapay Zeka destekli A/B Testi beta sürümünü keşfeden ilk kişi olun. Keşfedilebilirliği artırmak ve daha akıllı ürün kararlarına rehberlik etmek için tasarlandı. Kopya ve tasarımdan tüm özelliklere kadar her şeyi gerçek zamanlı olarak test edin ve verilerin gerçekten neyin işe yaradığını göstermesine izin verin.

A/B Testi gör

Önceki slayt←

Sonraki slayt→