Как работает Markdown

Intlayer поддерживает контент с богатым форматированием, определяемый с использованием синтаксиса Markdown. Это достигается с помощью функции md, которая преобразует строку Markdown в формат, который может быть управляем Intlayer. Используя Markdown, вы можете легко писать и поддерживать контент с богатым форматированием, такой как блоги, статьи и многое другое.

Визуальный редактор Intlayer и CMS Intlayer оба поддерживают управление контентом в формате 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("## Мой заголовок \n\nLorem Ipsum"),  },} satisfies Dictionary;export default markdownDictionary;

Импорт (многоязычного) .md файла

// Это объявление позволяет TypeScript распознавать и импортировать файлы Markdown (.md) как модули.// Без этого TypeScript выдаст ошибку при попытке импортировать файлы Markdown,// так как он не поддерживает импорт файлов, не являющихся кодом, по умолчанию.declare module "*.md";

import { md, t, type Dictionary } from "intlayer";import { readFileSync } from "fs";import { resolve } from "path";import markdown_en from "./myMarkdown.en.md";import markdown_fr from "./myMarkdown.fr.md";import markdown_es from "./myMarkdown.es.md";const markdownDictionary = {  key: "app",  content: {    contentImport: t({      ru: md(markdown_ru),      en: md(markdown_en),      fr: md(markdown_fr),      es: md(markdown_es),    }),    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
• Документация React Intlayer
• Документация Next Intlayer
• markdown-to-jsx на npm

Эти ресурсы предоставляют дополнительную информацию о настройке и использовании Intlayer с различными типами контента и фреймворками.