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 utilizes the md function.

import { md, type Dictionary } from "intlayer";const markdownDictionary = {  key: "app",  content: {    myMarkdownContent: md("## My title \n\nLorem Ipsum"),  },} 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.

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

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.

Additional Resources

• Intlayer CLI Documentation
• React Intlayer Documentation
• Next Intlayer Documentation
• markdown-to-jsx on npm

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