markdown-parser-react
Version:
A lightweight and configurable Markdown renderer for React and Next.js with syntax highlighting, definition lists, images, math and table support.
83 lines (82 loc) • 2.61 kB
TypeScript
import React from "react";
import { ParseOptions } from "./parser";
export interface MarkdownProps {
/**
* The markdown content to be rendered.
* @example
* ```md
* # Hello World
*
* This is a **markdown** paragraph with [links](https://example.com)
* ```
*/
content: string;
/**
* Configuration options for the markdown parser.
* @optional
*/
options?: ParseOptions;
/**
* Additional CSS class names to be applied to the container.
* @optional
*/
className?: string;
/**
* Custom styles to be applied to the container.
* @optional
*/
style?: React.CSSProperties;
/**
* Whether to wrap the content in an article element instead of a div.
* Recommended for semantic HTML when rendering full articles or blog posts.
* @default false
* @optional
*/
asArticle?: boolean;
/**
* Custom ID to be applied to the container.
* @optional
*/
id?: string;
/**
* Additional accessibility attributes for the container.
* @optional
*/
aria?: {
label?: string;
describedBy?: string;
};
}
/**
* A React component that renders markdown content with customizable options.
*
* @example
* ```tsx
* import Markdown from "markdown-parser-react";
* // Basic usage
* <Markdown content="# Hello World" />
*
* // With custom options
* <Markdown
* content={markdownContent}
* options={{
* enabledFeatures: {
* footnotes: true,
* taskLists: true
* },
* customStyles: {
* headings: {
* color: 'blue'
* }
* }
* }}
* className="custom-markdown"
* asArticle={true}
* />
* ```
* * @remarks
* This code is open source under the MIT license. The author can be hired by visiting [Jerry's LinkedIn](https://www.linkedin.com/in/jerrythejsguy/).
*/
export declare function Markdown({ content, options, className, style, asArticle, id, aria, }: MarkdownProps): React.JSX.Element;
export declare const defaultStyles = "\n .markdown-container {\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n color: #333;\n max-width: 100%;\n }\n\n .markdown-container img {\n max-width: 100%;\n height: auto;\n }\n\n .markdown-container pre {\n overflow-x: auto;\n padding: 1rem;\n background-color: #f6f8fa;\n border-radius: 4px;\n }\n\n .markdown-container blockquote {\n border-left: 4px solid #ddd;\n margin: 0;\n padding-left: 1rem;\n color: #666;\n }\n";
export default Markdown;