Không phụ thuộcHỗ trợ MDXĐược xây dựng cho SSRĐa framework

Markdown hiển thị nhanh hơn 5×.

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

Intlayer đi kèm bộ máy Markdown riêng. Không phụ thuộc, hỗ trợ MDX, phân tích trên máy chủ và hiển thị native trong React, Next.js, Vue, Svelte, Solid, Preact và Angular. Bạn không còn phải chọn trình kết xuất nữa.

Đọc tài liệu Xem các con số

markdown-file.content.md

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

Khi bỏ qua trường front-matter locale, Intlayer sẽ sử dụng ngôn ngữ mặc định đã cấu hình. Bạn có thể lưu trữ toàn bộ nội dung trong một tệp markdown duy nhất mà không cần tiền tố ngôn ngữ.

Ví dụ về cấu trúc tệp:

content
└── markdown-file.content.md

markdown-file.en.content.md

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

Trường front-matter locale xác định ngôn ngữ của nội dung. Trường này là tùy chọn. Nếu không cung cấp, Intlayer sẽ dùng ngôn ngữ mặc định, đồng thời là ngôn ngữ dự phòng nếu chưa có bản dịch.

Ví dụ về cấu trúc tệp:

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;

Khai báo Markdown trực tiếp trong từ điển TypeScript, ESM hoặc JSON bằng các hàm md() và file(), kết hợp bản dịch với độ an toàn kiểu hoàn chỉnh.

Ví dụ về cấu trúc tệp:

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

Không phụ thuộc

Thành phần MDX

Frontmatter có kiểu

Loại bỏ khi không dùng

Thông lượng gấp 5 lần markdown-to-jsx

Bộ phân tích được viết lại quanh thứ tự ưu tiên quy tắc được lưu đệm và lookbehind tăng dần, nên tài liệu chỉ được duyệt một lần thay vì quét lại theo từng quy tắc. Cùng Markdown, cùng kết quả, với khối lượng xử lý nhỏ hơn nhiều.

Intlayer5×

markdown-to-jsx1×

Thông lượng phân tích và kết xuất tương đối, càng cao càng tốt.

0 kB

được gửi đi khi ứng dụng không khai báo node Markdown nào — trình kết xuất bị loại bỏ lúc build.

~55 kB

phần mã phân tích được tải lười phía sau Suspense, không bao giờ chặn lần vẽ đầu tiên.

phụ thuộc lúc chạy — không có gì phải kiểm tra hay đồng bộ.

Một bộ máy thay vì một danh sách lựa chọn

Dự án nào cũng kết thúc bằng cùng một việc vặt: cân nhắc markdown-to-jsx với marked, remark và MDX, gắn thứ được chọn vào, rồi phát hiện nó không hỗ trợ MDX, kiểu dữ liệu lỏng lẻo, hoặc chuỗi plugin hỏng ở phía client. Intlayer chọn giúp bạn.

Khả năng

Intlayer

markdown-to-jsx

marked

remark / rehype

@mdx-js

Thành phần MDX

IntlayerThành phần MDXĐược hỗ trợ

markdown-to-jsxThành phần MDXKhông hỗ trợ

markedThành phần MDXKhông hỗ trợ

remark / rehypeThành phần MDXMột phần, hoặc qua gói bổ sung

@mdx-jsThành phần MDXĐược hỗ trợ

Node và override an toàn kiểu

IntlayerNode và override an toàn kiểuĐược hỗ trợ

markdown-to-jsxNode và override an toàn kiểuKhông hỗ trợ

markedNode và override an toàn kiểuMột phần, hoặc qua gói bổ sung

remark / rehypeNode và override an toàn kiểuMột phần, hoặc qua gói bổ sung

@mdx-jsNode và override an toàn kiểuMột phần, hoặc qua gói bổ sung

Đầu ra React và Next.js

IntlayerĐầu ra React và Next.jsĐược hỗ trợ

markdown-to-jsxĐầu ra React và Next.jsĐược hỗ trợ

markedĐầu ra React và Next.jsKhông hỗ trợ

remark / rehypeĐầu ra React và Next.jsMột phần, hoặc qua gói bổ sung

@mdx-jsĐầu ra React và Next.jsĐược hỗ trợ

Vue, Svelte, Solid, Preact, Angular

IntlayerVue, Svelte, Solid, Preact, AngularĐược hỗ trợ

markdown-to-jsxVue, Svelte, Solid, Preact, AngularKhông hỗ trợ

markedVue, Svelte, Solid, Preact, AngularMột phần, hoặc qua gói bổ sung

remark / rehypeVue, Svelte, Solid, Preact, AngularMột phần, hoặc qua gói bổ sung

@mdx-jsVue, Svelte, Solid, Preact, AngularMột phần, hoặc qua gói bổ sung

Phân tích ở máy chủ, kết xuất ở client, không phân tích lại

IntlayerPhân tích ở máy chủ, kết xuất ở client, không phân tích lạiĐược hỗ trợ

markdown-to-jsxPhân tích ở máy chủ, kết xuất ở client, không phân tích lạiKhông hỗ trợ

markedPhân tích ở máy chủ, kết xuất ở client, không phân tích lạiMột phần, hoặc qua gói bổ sung

remark / rehypePhân tích ở máy chủ, kết xuất ở client, không phân tích lạiĐược hỗ trợ

@mdx-jsPhân tích ở máy chủ, kết xuất ở client, không phân tích lạiMột phần, hoặc qua gói bổ sung

Cấu hình không cần chuỗi plugin

IntlayerCấu hình không cần chuỗi pluginĐược hỗ trợ

markdown-to-jsxCấu hình không cần chuỗi pluginĐược hỗ trợ

markedCấu hình không cần chuỗi pluginMột phần, hoặc qua gói bổ sung

remark / rehypeCấu hình không cần chuỗi pluginKhông hỗ trợ

@mdx-jsCấu hình không cần chuỗi pluginKhông hỗ trợ

Siêu dữ liệu frontmatter có kiểu

IntlayerSiêu dữ liệu frontmatter có kiểuĐược hỗ trợ

markdown-to-jsxSiêu dữ liệu frontmatter có kiểuKhông hỗ trợ

markedSiêu dữ liệu frontmatter có kiểuKhông hỗ trợ

remark / rehypeSiêu dữ liệu frontmatter có kiểuMột phần, hoặc qua gói bổ sung

@mdx-jsSiêu dữ liệu frontmatter có kiểuMột phần, hoặc qua gói bổ sung

Không phụ thuộc lúc chạy

IntlayerKhông phụ thuộc lúc chạyĐược hỗ trợ

markdown-to-jsxKhông phụ thuộc lúc chạyĐược hỗ trợ

markedKhông phụ thuộc lúc chạyĐược hỗ trợ

remark / rehypeKhông phụ thuộc lúc chạyKhông hỗ trợ

@mdx-jsKhông phụ thuộc lúc chạyKhông hỗ trợ

Bị loại khỏi bundle khi không dùng

IntlayerBị loại khỏi bundle khi không dùngĐược hỗ trợ

markdown-to-jsxBị loại khỏi bundle khi không dùngKhông hỗ trợ

markedBị loại khỏi bundle khi không dùngKhông hỗ trợ

remark / rehypeBị loại khỏi bundle khi không dùngKhông hỗ trợ

@mdx-jsBị loại khỏi bundle khi không dùngKhông hỗ trợ

Được hỗ trợMột phần, hoặc qua gói bổ sungKhông hỗ trợ

remark và rehype làm được phần lớn, nhưng qua một chuỗi plugin bạn tự lắp ráp — và nó không phải lúc nào cũng hoạt động giống nhau ở trình duyệt và máy chủ.
markdown-to-jsx chỉ kết xuất React, còn marked trả về một chuỗi HTML. Với Vue, Svelte, Solid hay Angular thì không có lựa chọn tương đương nào.
Không cái nào trao cho bạn frontmatter có kiểu: bạn phải chồng thêm một content layer, hoặc tự phân tích siêu dữ liệu.

Cùng một node, trong mọi framework

Một node Markdown được chuyển thành đầu ra native của framework nơi nó chạy — JSX, VNode hay chuỗi HTML. Svelte, Solid và Angular là công dân hạng nhất, không phải phần thêm vào sau.

ReactKết xuất thành JSX

Next.jsKết xuất thành JSX

VueKết xuất thành VNode

NuxtKết xuất thành VNode

SvelteKết xuất thành HTML

SolidKết xuất thành JSX

PreactKết xuất thành JSX

AngularKết xuất thành HTML

Phân tích trên máy chủ, kết xuất trên client

Phân tích và kết xuất là hai bước riêng biệt. parseMarkdown tạo AST tuần tự hóa được trên máy chủ, trình duyệt nhận nó dưới dạng JSON và mọi trình kết xuất đều chấp nhận nguyên trạng — tài liệu không bao giờ bị duyệt hai lần.

Trên máy chủ

Tài liệu được phân tích một lần thành JSON mà bạn có thể lưu đệm, truyền hoặc lưu trữ.

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

Trên client

Trình kết xuất nhận chuỗi thô hoặc AST, nên trình duyệt chỉ việc vẽ.

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

Đặt một lần, tinh chỉnh theo node

Khai báo các thành phần trên provider và mọi node Markdown trong ứng dụng đều dùng chúng. Khi một node cần khác đi, use() chỉ ghi đè node đó — không chuỗi plugin, không bước build riêng.

Toàn cục, cho cả ứng dụng

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

Cục bộ, cho một node

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() thắng provider, provider thắng trình kết xuất mặc định.

Frontmatter có kiểu, không cần content layer

Frontmatter của tệp Markdown được phân tích cùng tài liệu và hiển thị trên node dưới dạng đối tượng siêu dữ liệu có kiểu. Những trường biên tập mà trước đây bạn phải cài content layer nay có sẵn, kèm gợi ý tự động.

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

Cùng bộ máy đó cũng phân tích HTML

Các node html() đi qua cùng một pipeline: thẻ được ánh xạ tới thành phần của bạn, với cùng kiểu dữ liệu và cùng quy tắc ghi đè.

Xem nội dung HTML

i18n dựa trên mã

Bản dịch an toàn kiểu nằm trong kho lưu trữ của bạn.

Khai báo nội dung cùng với các thành phần của bạn trong TypeScript hoặc JavaScript. Intlayer tự động tạo các kiểu, cung cấp cho bạn tự động hoàn thành, xác thực và phản hồi tức thì. Không còn thiếu khóa hay chuyển đổi ngữ cảnh.

Bắt đầu lập trình

AI CLI Tool

Tự động hóa dịch thuật từ terminal của bạn.

CLI để kiểm tra, điền và dịch JSON & Markdown bằng AI.

Chạy `npx intlayer fill` để phát hiện các khóa bị thiếu và tạo bản dịch bằng OpenAI, Claude hoặc các mô hình cục bộ. Giữ lịch sử Git sạch sẽ và kiểu an toàn.

Thử CLI

Intlayer TMS

Ngừng trả tiền theo từ. Tự động hóa bằng AI.

Giải pháp mã nguồn mở & tự lưu trữ thay thế cho Crowdin & Lokalise. Được xây dựng cho quy trình làm việc của nhà phát triển hiện đại.

Quản lý bản dịch trực tiếp trong mã của bạn hoặc qua trình chỉnh sửa trực quan. Tận dụng AI để dịch ngay lập tức. Cộng tác với nhóm của bạn mà không giới hạn chỗ ngồi.

Xem TMS

CMS Headless

Kết nối mã cục bộ của bạn với nội dung từ xa.

Quản lý nội dung đa ngôn ngữ với chi phí bằng không. Intlayer cho phép bạn kết nối các từ điển cục bộ với quản lý từ xa, cho phép Live Sync để cập nhật nóng mà không cần xây dựng lại. Sử dụng webhook cho CI/CD.

Xem CMS

Cờ tính năng

Chuyển đổi tính năng ngay lập tức. Không cần triển khai.

Từ điển Intlayer không chỉ là văn bản. Sử dụng chúng để khai báo logic, kiểu dáng và cấu hình. Với Live Sync, bạn có thể bật/tắt tính năng, thay đổi giao diện và cập nhật hành vi ứng dụng theo thời gian thực trực tiếp từ CMS.

Thử tính năng

Kiểm thử AB

Sân chơi để thử nghiệm sản phẩm của bạn.

Hãy là người đầu tiên khám phá bản Beta mới của Intlayer: AI-driven A/B Testing, được xây dựng để tăng khả năng hiển thị và định hướng những quyết định sản phẩm thông minh hơn. Thử nghiệm mọi thứ theo thời gian thực, từ nội dung (copy) và thiết kế đến toàn bộ tính năng, và để dữ liệu cho bạn thấy điều gì thực sự hiệu quả.

Xem thử nghiệm A/B

Slide trước←

Slide tiếp theo→