אפס תלויותמוכן ל-MDXנבנה עבור SSRחוצה פריימוורקים

Markdown שמתרנדר מהר פי 5.

Name: Intlayer Markdown
Author: Intlayer

Intlayer מגיעה עם מנוע Markdown משלה. ללא תלויות, כולל MDX, מנותח בשרת ומרונדר באופן נייטיב ב-React, Next.js, Vue, Svelte, Solid, Preact ו-Angular. לעולם לא תצטרכו לבחור renderer שוב.

קראו את התיעוד ראו את המספרים

markdown-file.content.md

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

כאשר שדה ה-front-matter בשם 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

שדה ה-front-matter בשם 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 — ה-renderer מנוקה בזמן הבנייה.

~55 kB

chunk מנתח שנטען בעצלות, מאחורי 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אפס תלויות זמן ריצהלא נתמך

מוסר מה-bundle כשאינו בשימוש

Intlayerמוסר מה-bundle כשאינו בשימושנתמך

markdown-to-jsxמוסר מה-bundle כשאינו בשימושלא נתמך

markedמוסר מה-bundle כשאינו בשימושלא נתמך

remark / rehypeמוסר מה-bundle כשאינו בשימושלא נתמך

@mdx-jsמוסר מה-bundle כשאינו בשימושלא נתמך

נתמךחלקי, או באמצעות חבילות נוספותלא נתמך

remark ו-rehype יכולים לעשות את רוב זה, אבל דרך שרשרת תוספים שאתם מרכיבים בעצמכם — כזו שלא תמיד מתנהגת בדפדפן כמו בשרת.
markdown-to-jsx מרנדר React בלבד, ו-marked מחזיר לכם מחרוזת HTML. עבור Vue, Svelte, Solid או Angular אין מקבילה לפנות אליה.
אף אחד מהם לא מספק frontmatter עם טיפוסים: אתם מוסיפים שכבת תוכן מעל, או מנתחים את המטא-נתונים בעצמכם.

אותו צומת, בכל פריימוורק

צומת Markdown הופך לפלט הנייטיב של הפריימוורק שבו הוא נמצא — JSX, VNode או מחרוזת HTML. Svelte, Solid ו-Angular הם אזרחים מדרגה ראשונה, לא מחשבה שנייה.

ניתוח בשרת, רינדור בלקוח

ניתוח ורינדור הם שני שלבים נפרדים. parseMarkdown מייצר AST שניתן לסריאליזציה בשרת, הדפדפן מקבל אותו כ-JSON, וכל renderer מקבל אותו כמו שהוא — כך שהמסמך לעולם אינו נסרק פעמיים.

בשרת

המסמך מנותח פעם אחת, ל-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 });};

בלקוח

ה-renderers מקבלים מחרוזת גולמית או 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} />;}

הגדירו פעם אחת, דייקו לכל צומת

הצהירו על הקומפוננטות שלכם ב-provider וכל צומת 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() גובר על ה-provider, וה-provider גובר על ה-renderer המוגדר כברירת מחדל.

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

הפכו את התרגומים לאוטומטיים מהטרמינל שלכם.

ה-CLI לביקורת, מילוי ותרגום של JSON ו-Markdown באמצעות AI.

הריצו `npx intlayer fill` כדי לזהות מפתחות חסרים וליצור תרגומים באמצעות OpenAI, Claude או מודלים מקומיים. שמרו על היסטוריית Git נקייה ועל טיפוסים בטוחים.

נסו את ה-CLI

Intlayer TMS

הפסיקו לשלם לפי מילה. עברו לאוטומציה עם AI.

החלופה בקוד פתוח ובאירוח עצמי ל-Crowdin ול-Lokalise. נבנתה עבור תהליכי עבודה מודרניים של מפתחים.

נהלו תרגומים ישירות בקוד שלכם או דרך העורך הוויזואלי. השתמשו ב-AI כדי לתרגם באופן מיידי. שתפו פעולה עם הצוות שלכם ללא הגבלת משתמשים.

צפייה ב-TMS

Headless CMS

גשרו בין הקוד המקומי שלכם לתוכן מרוחק.

נהלו תוכן רב-לשוני עם אפס תקורה. Intlayer מאפשרת לכם לחבר מילונים מקומיים לניהול מרוחק, ומאפשרת סנכרון חי לעדכונים חמים ללא בנייה מחדש. השתמשו ב-webhooks ל-CI/CD, נהלו דגלי פיצ'רים, ותנו לתרגום האוטומטי מבוסס AI (בעבודה) לטפל בכל השאר.

צפייה ב-CMS

דגלי פיצ'רים

הפעילו וכבו פיצ'רים באופן מיידי. ללא צורך בפריסה.

המילונים של Intlayer הם יותר מסתם טקסט. השתמשו בהם כדי להצהיר על לוגיקה, סגנונות ואובייקטי תצורה. עם סנכרון חי, תוכלו להפעיל ולכבות פיצ'רים, לשנות ערכות נושא של הממשק ולעדכן את התנהגות האפליקציה בזמן אמת ישירות מה-CMS.

נסו את הפיצ'רים

בדיקות AB

מגרש המשחקים שלכם לניסויי מוצר.

היו הראשונים לגלות את הבטא החדשה של בדיקות A/B מבוססות AI של Intlayer, שנבנתה כדי לשפר את יכולת הגילוי ולהנחות החלטות מוצר חכמות יותר. בדקו כל דבר בזמן אמת, מטקסטים ועיצוב ועד פיצ'רים שלמים, ותנו לנתונים להראות לכם מה באמת עובד.

צפייה בבדיקת A/B

השקופית הקודמת←

השקופית הבאה→