Markdown Renderer

Markdown Renderer is designed to render and style dynamic MDX content in your application. MDRemote focuses on processing and rendering MDX content with enhanced features like syntax highlighting, custom components, and Markdown extensions, while MDContent provides a styled wrapper around MDRemote, making it easier to integrate into your application's layout.

Features

📄 MDX Rendering: Utilizing next-mdx-remote/rsc, renders MDX content dynamically, allowing for the use of JSX components within Markdown.

🔧 Custom Components: Supports the inclusion of custom React components that can be used within the MDX content.

✨ Enhanced Markdown Processing: Utilizes remark-gfm and remark-heading-id plugins to extend Markdown capabilities.

🛠️ GitHub-Flavored Markdown: remark-gfm enables GitHub-flavored Markdown (GFM) features like tables, strikethroughs, and more. - 🔗 Automatic Heading IDs: remark-heading-id Generates unique IDs for headings, making it easier to link to specific sections.

🎨 Syntax Highlighting: rehype-pretty-code provides syntax highlighting for code blocks with support for customizable themes.

🔧 Enhanced Code Block Features: rehype-prism-plus helps to add features like a toolbar and copy-to-clipboard functionality to code blocks.

What's Included

< MDContent />

The MDContent component is designed to render Markdown content dynamically. It wraps the MDRemote component, which processes and displays the provided Markdown content. This component allows you to pass in a Markdown source and optionally custom components to be used within the rendered Markdown.

The MDContent component accepts the following props:

Name	Type	Default	Description
`source`	`string`	`''`	The Markdown content to be rendered. This should be a string containing the Markdown source code.
`components`	`object`	`null`	Optional. An object containing custom React components that can be used within the Markdown.

< MDRemote />

The MDRemote component is a specialized wrapper around the MDXRemote component from next-mdx-remote/rsc. It is designed to render MDX content with enhanced Markdown and HTML processing features. The component allows for custom component integration and supports various plugins to extend the functionality of Markdown rendering, such as syntax highlighting, GitHub-flavored Markdown (GFM), and automatic heading IDs.

The MDRemote component accepts the following props:

Name	Type	Default	Description
`source`	`string`	`''`	The Markdown content to be rendered. This should be a string containing the Markdown source code.
`components`	`object`	`null`	Optional. An object containing custom React components that can be used within the Markdown.

Pre-configurations

The MDRemote component is configured with several options to enhance the rendering of MDX content. Below is a detailed breakdown of each preconfiguration option used:

Option	Type	Default	Description
`scope`	`object`	`{}`	Used to pass additional data or variables that can be accessed within the MDX content. In this configuration, it is an empty object.
`mdxOptions`	`object`	`{}`	Configures how the MDX content is processed, including settings for remark and rehype plugins, as well as the content format.
`remarkPlugins`	`array`	`[]`	A list of remark plugins to extend Markdown functionality before it's transformed into HTML.
`rehypePlugins`	`array`	`[]`	A list of rehype plugins to process the HTML output of Markdown content, enhancing or modifying the rendered HTML.
`format`	`string`	`'mdx'`	Specifies the format of the content being processed. In this case, it is set to `'mdx'`, indicating the content is in MDX format.
`parseFrontmatter`	`boolean`	`true`	When set to `true`, allows the component to parse frontmatter (YAML-like metadata) from the MDX content, useful for extracting metadata.

remarkPlugins in mdxOptions :

Plugin	Description
`remarkGfm`	Enables GitHub-Flavored Markdown (GFM) features such as tables, strikethroughs, and task lists.
`remarkHeadingId`	Adds unique IDs to headings within the Markdown content. Options `{ defaults: true, uniqueDefaults: true }` ensure each heading ID is unique and consistent.

rehypePlugins in mdxOptions :

Plugin	Description
`rehypePrettyCode`	Provides syntax highlighting for code blocks. The `theme` option is set to `'github-dark-default'`, applying a GitHub-inspired dark theme to code blocks.
`rehypePrism`	Enhances code blocks with additional features like a toolbar and copy-to-clipboard functionality. The `plugins` option includes `'toolbar'` and `'copy-to-clipboard'`.