Markdown / Форматований текст

Як працює Markdown

Intlayer підтримує контент у форматі rich text, визначений за допомогою синтаксису Markdown. Це досягається за допомогою функції md, яка перетворює рядок у форматі Markdown у формат, яким може керувати Intlayer. Використовуючи Markdown, ви можете легко писати й підтримувати контент із багатим форматуванням, наприклад блоги, статті та інше.

Візуальний редактор Intlayer та Intlayer CMS обидва підтримують керування контентом у Markdown.

Під час інтеграції з React-додатком ви можете використовувати провайдера рендерингу Markdown (наприклад, markdown-to-jsx), щоб перетворювати вміст Markdown на HTML. Це дозволяє писати контент у Markdown і забезпечує його коректне відображення в вашому додатку.

Налаштування Markdown-контенту

Щоб налаштувати Markdown-контент у вашому проєкті Intlayer, визначте словник контенту, що використовує функцію md.

import { md, type Dictionary } from "intlayer";const markdownDictionary = {  key: "app",  content: {    myMarkdownContent: md("## My title \n\nLorem Ipsum"),  },} satisfies Dictionary;export default markdownDictionary;

Імпорт (багатомовний) файлу .md

Якщо ваш Markdown-файл має розширення .md, ви можете імпортувати його за допомогою різних форматів імпорту, які надає JavaScript або Intlayer.

Рекомендується віддавати перевагу імпорту через функцію file, оскільки вона дозволяє Intlayer коректно керувати шляхами відносно розташування файлу та забезпечує інтеграцію цього файлу з Візуальним редактором / CMS.

// Ця декларація дозволяє TypeScript розпізнавати та імпортувати Markdown (.md) файли як модулі.// Без цього TypeScript викинув би помилку при спробі імпортувати Markdown-файли,// оскільки він за замовчуванням не підтримує імпорт нечітких файлів (non-code files).declare module "*.md";

import { md, file, t, type Dictionary } from "intlayer";import { readFileSync } from "fs";import { resolve } from "path";import markdown from "./myMarkdown.md";const markdownDictionary = {  key: "app",  content: {    contentMultilingualFile: t({      en: md(file("./myMarkdown.en.md")),      fr: md(file("./myMarkdown.fr.md")),      es: md(file("./myMarkdown.es.md")),    }),    contentImport: md(markdown),    contentRequire: md(require("./myMarkdown.md")),    contentAsyncImport: md(      import("./myMarkdown.md").then((module) => module.default)    ),    contentFetch: md(fetch("https://example.com").then((res) => res.text())),    contentFS: md(() => {      const filePath = resolve(process.cwd(), "doc/test.md");      return readFileSync(filePath, "utf8");    }),  },} satisfies Dictionary;export default markdownDictionary;

Використання Markdown з React Intlayer

Щоб відобразити вміст Markdown у React-застосунку, ви можете скористатися хуком useIntlayer з пакета react-intlayer разом із провайдером рендерингу Markdown. У цьому прикладі ми використовуємо пакет markdown-to-jsx для конвертації Markdown у HTML.

import type { FC } from "react";import { useIntlayer, MarkdownProvider } from "react-intlayer";import Markdown from "markdown-to-jsx";const AppContent: FC = () => {  const { myMarkdownContent } = useIntlayer("app");  return <>{myMarkdownContent}</>;};export const AppProvider: FC = () => (  <MarkdownProvider    renderMarkdown={(markdown) => <Markdown>{markdown}</Markdown>}  >    <AppContent />  </MarkdownProvider>);

У цій реалізації:

• Компонент MarkdownProvider обгортає застосунок (або відповідну його частину) та приймає функцію renderMarkdown. Ця функція використовується для перетворення рядків Markdown у JSX за допомогою пакету markdown-to-jsx.
• Хук useIntlayer використовується для отримання вмісту Markdown (myMarkdownContent) зі словника за ключем "app".
• Вміст Markdown рендериться безпосередньо в компоненті, а рендеринг Markdown обробляється провайдером.

Використання Markdown з Next Intlayer

Реалізація з пакетом next-intlayer схожа на наведену вище. Єдина відмінність полягає в тому, що функцію renderMarkdown слід передати в компонент MarkdownProvider у клієнтському компоненті.

"use client";import type { FC, PropsWithChildren } from "react";import { MarkdownProvider } from "next-intlayer";const renderMarkdown = (markdown: string) => (  <span style={{ color: "red" }}>{markdown}</span>);export const IntlayerMarkdownProvider: FC<PropsWithChildren> = ({  children,}) => (  <MarkdownProvider renderMarkdown={renderMarkdown}>    {children}  </MarkdownProvider>);

Додаткові ресурси

• Документація Intlayer CLI
• Документація Intlayer для React
• Документація Intlayer для Next.js
• markdown-to-jsx на npm

Ці ресурси надають додаткову інформацію щодо налаштування та використання Intlayer з різними типами контенту та фреймворками.