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.27 kB
TypeScript
/**
* Parses markdown content into React nodes with support for custom styles, classes, and various markdown features.
*
* @param markdown - The markdown string to parse.
* @param options - Optional settings for parsing the markdown.
* @returns An array of React nodes representing the parsed markdown content.
*
* @example
* ```ts
* const markdown = "# Hello World\nThis is a paragraph.";
* const options = {
* customClasses: {
* headings: "my-heading-class",
* paragraphs: "my-paragraph-class",
* },
* customStyles: {
* headings: { color: "red" },
* paragraphs: { fontSize: "16px" },
* },
* };
* const parsedContent = parse(markdown, options);
* ```
*
* @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/).
*/
import React, { CSSProperties } from "react";
interface CustomClasses {
headings?: string;
paragraphs?: string;
lists?: string;
blockquotes?: string;
codeBlocks?: string;
tables?: string;
links?: string;
images?: string;
}
interface CustomStyles {
headings?: CSSProperties;
paragraphs?: CSSProperties;
lists?: CSSProperties;
blockquotes?: CSSProperties;
codeBlocks?: CSSProperties;
tables?: CSSProperties;
links?: CSSProperties;
images?: CSSProperties;
}
/**
* Options for parsing markdown content.
*/
export interface ParseOptions {
/**
* Prefix for language-specific code block classes.
* @example "language-"
*/
langPrefix?: string;
/**
* Custom CSS classes for different markdown elements.
*/
customClasses?: CustomClasses;
/**
* Custom CSS styles for different markdown elements.
*/
customStyles?: CustomStyles;
/**
* Target attribute for links.
* @default "_blank"
*/
linkTarget?: "_blank" | "_self" | "_parent" | "_top";
/**
* Whether to sanitize HTML content.
* @default false
*/
sanitizeHtml?: boolean;
/**
* Maximum allowed nesting level for lists.
* @default 6
*/
maxNestingLevel?: number;
}
export declare function parse(markdown: string, options?: ParseOptions): React.ReactNode[];
export {};