بدون تبعياتجاهز لـ MDXمصمم لـ SSRمتعدد الأطر

Markdown يُعرض أسرع بـ 5 مرات.

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

يأتي Intlayer بمحرك Markdown خاص به. بدون تبعيات، مع دعم MDX، يُحلَّل على الخادم ويُعرض أصلياً في React وNext.js وVue وSvelte وSolid وPreact وAngular. لن تحتاج إلى اختيار محرك عرض بعد الآن.

اقرأ الوثائق اطّلع على الأرقام

markdown-file.content.md

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

عند إغفال حقل frontmatter locale، يستخدم Intlayer لغتك الافتراضية المحددة. يمكنك الاحتفاظ بكافة محتوياتك في ملف markdown واحد دون بادئات لغوية.

مثال على بنية الملفات:

content
└── markdown-file.content.md

markdown-file.en.content.md

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

يحدد حقل frontmatter locale لغة المحتوى. وهو اختياري. إذا لم يُحدد، سيستخدم Intlayer اللغة الافتراضية، والتي تُستخدم أيضاً كلغة احتياطية إذا لم تتوفر ترجمة للغة معينة.

مثال على بنية الملفات:

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;

صرّح عن Markdown مباشرة داخل قاموس TypeScript أو ESM أو JSON باستخدام الدالتين md() وfile()، لربط الترجمات بأمان نوعي كامل.

مثال على بنية الملفات:

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

بدون تبعيات

مكوّنات MDX

frontmatter مُنمَّط

يُزال عند عدم الاستخدام

إنتاجية أعلى 5 مرات من markdown-to-jsx

أُعيدت كتابة المحلل حول أسبقية قواعد مخزَّنة مؤقتاً وlookbehind تزايدي، فيُمَرّ على المستند مرة واحدة بدل إعادة مسحه قاعدة بقاعدة. نفس Markdown ونفس المخرجات بجزء بسيط من العمل.

Intlayer5×

markdown-to-jsx1×

الإنتاجية النسبية للتحليل والعرض، وكلما زادت كان أفضل.

0 kB

يُرسَل عندما لا يُعلن تطبيقك أي عقدة Markdown، إذ يُزال محرك العرض وقت البناء.

~55 kB

حجم حزمة المحلل التي تُجلب بتكاسل خلف Suspense فلا تعيق أول رسم للصفحة.

تبعيات وقت التشغيل، فلا شيء لتدقيقه ولا شيء لإبقائه متزامناً.

محرك واحد بدل قائمة اختيارات

ينتهي كل مشروع بالمهمة نفسها: الموازنة بين markdown-to-jsx وmarked وremark وMDX، ثم ربط الفائز واكتشاف أنه لا يدعم MDX أو أن أنواعه فضفاضة أو أن سلسلة إضافاته تنهار على العميل. يتولى Intlayer هذا الاختيار عنك.

القدرة

Intlayer

markdown-to-jsx

marked

remark / rehype

@mdx-js

مكوّنات MDX

Intlayerمكوّنات MDXمدعوم

markdown-to-jsxمكوّنات MDXغير مدعوم

markedمكوّنات MDXغير مدعوم

remark / rehypeمكوّنات MDXجزئي، أو عبر حزم إضافية

@mdx-jsمكوّنات MDXمدعوم

عقد وتجاوزات آمنة الأنواع

Intlayerعقد وتجاوزات آمنة الأنواعمدعوم

markdown-to-jsxعقد وتجاوزات آمنة الأنواعغير مدعوم

markedعقد وتجاوزات آمنة الأنواعجزئي، أو عبر حزم إضافية

remark / rehypeعقد وتجاوزات آمنة الأنواعجزئي، أو عبر حزم إضافية

@mdx-jsعقد وتجاوزات آمنة الأنواعجزئي، أو عبر حزم إضافية

مخرجات لـ React وNext.js

Intlayerمخرجات لـ React وNext.jsمدعوم

markdown-to-jsxمخرجات لـ React وNext.jsمدعوم

markedمخرجات لـ React وNext.jsغير مدعوم

remark / rehypeمخرجات لـ React وNext.jsجزئي، أو عبر حزم إضافية

@mdx-jsمخرجات لـ React وNext.jsمدعوم

Vue وSvelte وSolid وPreact وAngular

IntlayerVue وSvelte وSolid وPreact وAngularمدعوم

markdown-to-jsxVue وSvelte وSolid وPreact وAngularغير مدعوم

markedVue وSvelte وSolid وPreact وAngularجزئي، أو عبر حزم إضافية

remark / rehypeVue وSvelte وSolid وPreact وAngularجزئي، أو عبر حزم إضافية

@mdx-jsVue وSvelte وSolid وPreact وAngularجزئي، أو عبر حزم إضافية

تحليل على الخادم وعرض على العميل بلا إعادة تحليل

Intlayerتحليل على الخادم وعرض على العميل بلا إعادة تحليلمدعوم

markdown-to-jsxتحليل على الخادم وعرض على العميل بلا إعادة تحليلغير مدعوم

markedتحليل على الخادم وعرض على العميل بلا إعادة تحليلجزئي، أو عبر حزم إضافية

remark / rehypeتحليل على الخادم وعرض على العميل بلا إعادة تحليلمدعوم

@mdx-jsتحليل على الخادم وعرض على العميل بلا إعادة تحليلجزئي، أو عبر حزم إضافية

إعداد بلا سلسلة إضافات

Intlayerإعداد بلا سلسلة إضافاتمدعوم

markdown-to-jsxإعداد بلا سلسلة إضافاتمدعوم

markedإعداد بلا سلسلة إضافاتجزئي، أو عبر حزم إضافية

remark / rehypeإعداد بلا سلسلة إضافاتغير مدعوم

@mdx-jsإعداد بلا سلسلة إضافاتغير مدعوم

بيانات frontmatter وصفية مُنمَّطة

Intlayerبيانات frontmatter وصفية مُنمَّطةمدعوم

markdown-to-jsxبيانات frontmatter وصفية مُنمَّطةغير مدعوم

markedبيانات frontmatter وصفية مُنمَّطةغير مدعوم

remark / rehypeبيانات frontmatter وصفية مُنمَّطةجزئي، أو عبر حزم إضافية

@mdx-jsبيانات frontmatter وصفية مُنمَّطةجزئي، أو عبر حزم إضافية

صفر تبعيات وقت التشغيل

Intlayerصفر تبعيات وقت التشغيلمدعوم

markdown-to-jsxصفر تبعيات وقت التشغيلمدعوم

markedصفر تبعيات وقت التشغيلمدعوم

remark / rehypeصفر تبعيات وقت التشغيلغير مدعوم

@mdx-jsصفر تبعيات وقت التشغيلغير مدعوم

يُزال من الحزمة عند عدم الاستخدام

Intlayerيُزال من الحزمة عند عدم الاستخداممدعوم

markdown-to-jsxيُزال من الحزمة عند عدم الاستخدامغير مدعوم

markedيُزال من الحزمة عند عدم الاستخدامغير مدعوم

remark / rehypeيُزال من الحزمة عند عدم الاستخدامغير مدعوم

@mdx-jsيُزال من الحزمة عند عدم الاستخدامغير مدعوم

مدعومجزئي، أو عبر حزم إضافيةغير مدعوم

يستطيع remark وrehype فعل معظم ذلك، لكن عبر سلسلة إضافات تجمّعها بنفسك، ولا تتصرف دائماً في المتصفح كما تتصرف على الخادم.
يعرض markdown-to-jsx لـ React فقط، ويعطيك marked سلسلة HTML. أما Vue وSvelte وSolid وAngular فلا يوجد لها بديل مكافئ.
لا يمنحك أيٌّ منها frontmatter مُنمَّطاً: إما أن تضيف طبقة محتوى فوقه، أو تحلل البيانات الوصفية بنفسك.

العقدة نفسها في كل إطار عمل

تتحول عقدة Markdown إلى المخرجات الأصلية للإطار الذي تعمل فيه: JSX أو VNode أو سلسلة HTML. وSvelte وSolid وAngular مدعومة بالدرجة الأولى لا كإضافات لاحقة.

Reactيُعرض بصيغة JSX

Next.jsيُعرض بصيغة JSX

Vueيُعرض بصيغة VNode

Nuxtيُعرض بصيغة VNode

Svelteيُعرض بصيغة HTML

Solidيُعرض بصيغة JSX

Preactيُعرض بصيغة JSX

Angularيُعرض بصيغة HTML

حلِّل على الخادم واعرض على العميل

التحليل والعرض خطوتان منفصلتان. تنتج parseMarkdown شجرة AST قابلة للتسلسل على الخادم، ويستقبلها المتصفح بصيغة JSON، ويقبلها كل محرك عرض كما هي، فلا يُمَرّ على المستند مرتين.

على الخادم

يُحلَّل المستند مرة واحدة إلى JSON يمكنك تخزينه مؤقتاً أو بثّه أو حفظه.

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 });};

على العميل

تقبل محركات العرض سلسلة خام أو شجرة AST، فلا يقوم المتصفح إلا بالرسم.

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} />;}

اضبطه مرة واحدة وحسّنه لكل عقدة

أعلن مكوّناتك على المزوّد فتلتقطها كل عقدة Markdown في التطبيق. وحين تحتاج عقدة إلى اختلاف، تتجاوز use() تلك العقدة وحدها؛ بلا سلسلة إضافات ولا خطوة بناء إضافية.

عالمي، لكامل التطبيق

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>);

محلي، لعقدة واحدة

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() على المزوّد، ويتقدم المزوّد على محرك العرض الافتراضي.

frontmatter مُنمَّط بلا طبقة محتوى

يُحلَّل frontmatter لملف Markdown مع المستند ويُتاح على العقدة ككائن بيانات وصفية مُنمَّط. فالحقول التحريرية التي كنت تضيف طبقة محتوى من أجلها صارت متاحة مباشرةً مع الإكمال التلقائي.

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

المحرك نفسه يحلل HTML أيضاً

تمر عقد html() بالمسار نفسه: تُربَط الوسوم بمكوّناتك الخاصة، بالتنميط نفسه وقواعد التجاوز نفسها.

اطّلع على محتوى HTML

i18n القائم على الكود

ترجمات آمنة النوع تعيش في مستودعك.

أعلن عن المحتوى بجانب مكوناتك في TypeScript أو JavaScript. يقوم Intlayer بإنشاء الأنواع تلقائيًا، مما يمنحك الإكمال التلقائي والتحقق والملاحظات الفورية. لا مزيد من المفاتيح المفقودة أو تبديل السياق.

ابدأ البرمجة

AI CLI Tool

أتمتة الترجمات من المحطة الطرفية (Terminal).

واجهة سطر الأوامر (CLI) لتدقيق وملء وترجمة JSON و Markdown بالذكاء الاصطناعي.

قم بتشغيل `npx intlayer fill` لاكتشاف المفاتيح المفقودة وإنشاء ترجمات باستخدام OpenAI أو Claude أو النماذج المحلية. حافظ على نظافة سجل Git وسلامة الأنواع.

جرب واجهة سطر الأوامر

Intlayer TMS

توقف عن الدفع لكل كلمة. أتمتة باستخدام الذكاء الاصطناعي.

البديل مفتوح المصدر والقابل للاستضافة الذاتية لـ Crowdin و Lokalise. مبني لسير عمل المطورين الحديث.

إدارة الترجمات مباشرة في الكود أو عبر المحرر المرئي. استفد من الذكاء الاصطناعي للترجمة الفورية. تعاون مع فريقك دون حدود المقاعد.

شاهد TMS

نظام إدارة المحتوى (Headless)

اربط الكود المحلي بالمحتوى البعيد.

أدر المحتوى متعدد اللغات بدون عبء إضافي. يتيح لك Intlayer ربط القواميس المحلية بالإدارة عن بُعد، مما يتيح المزامة الحية للتحديثات الفورية دون إعادة البناء. استخدم Webhooks لـ CI/CD وأدر إشارات الميزات.

شاهد CMS

أعلام الميزات

تبديل الميزات فورا. لا يتطلب نشر.

قواميس Intlayer هي أكثر من مجرد نصوص. استخدمها لتعريف المنطق والأنماط والتكوينات. مع Live Sync، يمكنك تشغيل الميزات أو إيقافها، وتغيير سمات واجهة المستخدم، وتحديث سلوك التطبيق في الوقت الفعلي مباشرة من CMS.

جرب الميزات

اختبار AB

ملعبك لتجارب المنتجات.

كن أول من يستكشف نسخة تجريبية جديدة من A/B Testing المدعوم بالذكاء الاصطناعي من Intlayer، والمصممة لتعزيز قابلية الاكتشاف وتوجيه قرارات المنتج الأكثر ذكاءً. اختبر أي شيء في الوقت الفعلي، من النسخ والتصميم إلى الميزات الكاملة، ودع البيانات تظهر لك ما يعمل حقًا.

شاهد اختبار A/B

الشريحة السابقة←

الشريحة التالية→