Markdown / Rich Text Content

How Markdown Works

Intlayer supports rich text content defined using Markdown syntax. This is achieved through the md function, which converts a Markdown string into a format that can be managed by Intlayer. By using Markdown, you can easily write and maintain content with rich formatting, such as blogs, articles, and more.

The Intlayer Visual editor and the Intlayer CMS both support Markdown content management.

When integrated with a React application, you can use a Markdown rendering provider (such as markdown-to-jsx) to render the Markdown content to HTML. This allows you to write content in Markdown while ensuring it displays properly in your app.

Setting Up Markdown Content

To set up Markdown content in your Intlayer project, define a content dictionary that utilises the md function.

markdownDictionary.content.ts

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

Import (multilingual) .md file

md.d.ts

// This declaration allows TypeScript to recognise and import Markdown (.md) files as modules.// Without this, TypeScript would throw an error when trying to import Markdown files,// as it does not natively support non-code file imports.declare module "*.md";

markdownDictionary.content.ts

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({      "en-GB": md(markdown_en),      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;

Using Markdown with React Intlayer

To render the Markdown content in a React application, you can leverage the useIntlayer hook from the react-intlayer package along with a Markdown rendering provider. In this example, we use the markdown-to-jsx package to convert the Markdown into HTML.

App.tsx

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

module.exports = { AppProvider, };

In this implementation: - The `MarkdownProvider` wraps the application (or the relevant portion of it) and accepts a `renderMarkdown` function. This function is used to convert Markdown strings into JSX using the `markdown-to-jsx` package. - The `useIntlayer` hook is used to retrieve the Markdown content (`myMarkdownContent`) from the dictionary with the key `"app"`. - The Markdown content is rendered directly in the component, and the Markdown rendering is handled by the provider. ### Using Markdown with Next Intlayer The implementation using the `next-intlayer` package is similar to the one above. The only difference is that the `renderMarkdown` function should be passed to the `MarkdownProvider` component in a client component. ```tsx title="src/providers/IntlayerMarkdownProvider.tsx" codeFormat="typescript" "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> );

Additional Resources

These resources provide further insights into setting up and using Intlayer with various content types and frameworks.

If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.

GitHub link to the documentation

Nesting Function Fetching