markdown-to-jsx
- Version 7.7.8
- Published
- 515 kB
- No dependencies
- MIT license
Install
npm i markdown-to-jsx
yarn add markdown-to-jsx
pnpm add markdown-to-jsx
Overview
Convert markdown to JSX with ease for React and React-like projects. Super lightweight and highly configurable.
Index
Variables
Functions
Type Aliases
Namespaces
MarkdownToJSX
- BlockQuoteNode
- BoldTextNode
- BreakLineNode
- BreakThematicNode
- CodeBlockNode
- CodeFencedNode
- CodeInlineNode
- CreateElement
- EscapedTextNode
- FootnoteNode
- FootnoteReferenceNode
- GFMTaskNode
- HeadingNode
- HeadingSetextNode
- HTMLCommentNode
- HTMLNode
- HTMLSelfClosingNode
- HTMLTags
- ImageNode
- ItalicTextNode
- LinkAngleBraceNode
- LinkBareURLNode
- LinkMailtoNode
- LinkNode
- MarkedTextNode
- NestedParser
- NewlineNode
- Options
- OrderedListNode
- Override
- Overrides
- ParagraphNode
- Parser
- ParserResult
- ReferenceImageNode
- ReferenceLinkNode
- ReferenceNode
- Rule
- RuleOutput
- Rules
- State
- StrikethroughTextNode
- TableNode
- TableSeparatorNode
- TextNode
- UnorderedListNode
Variables
variable Markdown
const Markdown: React.FC< Omit<React.HTMLAttributes<Element>, 'children'> & { children: string; options?: MarkdownToJSX.Options; }>;
A simple HOC for easy React use. Feed the markdown content as a direct child and the rest is taken care of automatically.
variable Priority
const Priority: { MAX: number; HIGH: number; MED: number; LOW: number; MIN: number };
variable RuleType
const RuleType: { readonly blockQuote: '0'; readonly breakLine: '1'; readonly breakThematic: '2'; readonly codeBlock: '3'; readonly codeFenced: '4'; readonly codeInline: '5'; readonly footnote: '6'; readonly footnoteReference: '7'; readonly gfmTask: '8'; readonly heading: '9'; readonly headingSetext: '10'; readonly htmlBlock: '11'; readonly htmlComment: '12'; readonly htmlSelfClosing: '13'; readonly image: '14'; readonly link: '15'; readonly linkAngleBraceStyleDetector: '16'; readonly linkBareUrlDetector: '17'; readonly linkMailtoDetector: '18'; readonly newlineCoalescer: '19'; readonly orderedList: '20'; readonly paragraph: '21'; readonly ref: '22'; readonly refImage: '23'; readonly refLink: '24'; readonly table: '25'; readonly tableSeparator: '26'; readonly text: '27'; readonly textBolded: '28'; readonly textEmphasized: '29'; readonly textEscaped: '30'; readonly textMarked: '31'; readonly textStrikethroughed: '32'; readonly unorderedList: '33';};
Analogous to
node.type
. Please note that the values here may change at any time, so do not hard code against the value directly.
Functions
Type Aliases
type RuleType
type RuleType = (typeof RuleType)[keyof typeof RuleType];
Namespaces
namespace MarkdownToJSX
namespace MarkdownToJSX {}
interface BlockQuoteNode
interface BlockQuoteNode {}
interface BoldTextNode
interface BoldTextNode {}
interface BreakLineNode
interface BreakLineNode {}
property type
type: typeof RuleType.breakLine;
interface BreakThematicNode
interface BreakThematicNode {}
property type
type: typeof RuleType.breakThematic;
interface CodeBlockNode
interface CodeBlockNode {}
interface CodeFencedNode
interface CodeFencedNode {}
property type
type: typeof RuleType.codeFenced;
interface CodeInlineNode
interface CodeInlineNode {}
interface EscapedTextNode
interface EscapedTextNode {}
property type
type: typeof RuleType.textEscaped;
interface FootnoteNode
interface FootnoteNode {}
property type
type: typeof RuleType.footnote;
interface FootnoteReferenceNode
interface FootnoteReferenceNode {}
interface GFMTaskNode
interface GFMTaskNode {}
interface HeadingNode
interface HeadingNode {}
interface HeadingSetextNode
interface HeadingSetextNode {}
property type
type: typeof RuleType.headingSetext;
interface HTMLCommentNode
interface HTMLCommentNode {}
property type
type: typeof RuleType.htmlComment;
interface HTMLNode
interface HTMLNode {}
interface HTMLSelfClosingNode
interface HTMLSelfClosingNode {}
interface ImageNode
interface ImageNode {}
interface ItalicTextNode
interface ItalicTextNode {}
interface LinkAngleBraceNode
interface LinkAngleBraceNode {}
property type
type: typeof RuleType.linkAngleBraceStyleDetector;
interface LinkBareURLNode
interface LinkBareURLNode {}
property type
type: typeof RuleType.linkBareUrlDetector;
interface LinkMailtoNode
interface LinkMailtoNode {}
property type
type: typeof RuleType.linkMailtoDetector;
interface LinkNode
interface LinkNode {}
interface MarkedTextNode
interface MarkedTextNode {}
interface NewlineNode
interface NewlineNode {}
property type
type: typeof RuleType.newlineCoalescer;
interface OrderedListNode
interface OrderedListNode {}
interface ParagraphNode
interface ParagraphNode {}
interface ReferenceImageNode
interface ReferenceImageNode {}
interface ReferenceLinkNode
interface ReferenceLinkNode {}
property children
children: MarkdownToJSX.ParserResult[];
property fallbackChildren
fallbackChildren: string;
property ref
ref: string;
property type
type: typeof RuleType.refLink;
interface ReferenceNode
interface ReferenceNode {}
property type
type: typeof RuleType.ref;
interface StrikethroughTextNode
interface StrikethroughTextNode {}
interface TableNode
interface TableNode {}
interface TableSeparatorNode
interface TableSeparatorNode {}
property type
type: typeof RuleType.tableSeparator;
interface TextNode
interface TextNode {}
interface UnorderedListNode
interface UnorderedListNode {}
type CreateElement
type CreateElement = typeof React.createElement;
type HTMLTags
type HTMLTags = keyof React.JSX.IntrinsicElements;
type NestedParser
type NestedParser = ( input: string, state?: MarkdownToJSX.State) => MarkdownToJSX.ParserResult[];
type Options
type Options = Partial<{ /** * Ultimate control over the output of all rendered JSX. */ createElement: ( tag: Parameters<CreateElement>[0], props: React.JSX.IntrinsicAttributes, ...children: React.ReactNode[] ) => React.ReactNode; /** * The library automatically generates an anchor tag for bare URLs included in the markdown * document, but this behavior can be disabled if desired. */ disableAutoLink: boolean; /** * Disable the compiler's best-effort transcription of provided raw HTML * into JSX-equivalent. This is the functionality that prevents the need to * use `dangerouslySetInnerHTML` in React. */ disableParsingRawHTML: boolean; /** * Forces the compiler to have space between hash sign and the header text which * is explicitly stated in the most of the markdown specs. * https://github.github.com/gfm/#atx-heading * `The opening sequence of # characters must be followed by a space or by the end of line.` */ enforceAtxHeadings: boolean; /** * Forces the compiler to always output content with a block-level wrapper * (`<p>` or any block-level syntax your markdown already contains.) */ forceBlock: boolean; /** * Forces the compiler to always output content with an inline wrapper (`<span>`) */ forceInline: boolean; /** * Forces the compiler to wrap results, even if there is only a single * child or no children. */ forceWrapper: boolean; /** * Supply additional HTML entity: unicode replacement mappings. * * Pass only the inner part of the entity as the key, * e.g. `≤` -> `{ "le": "\u2264" }` * * By default * the following entities are replaced with their unicode equivalents: * * ``` * & * ' * > * < * * " * ``` */ namedCodesToUnicode: { [key: string]: string; }; /** * Selectively control the output of particular HTML tags as they would be * emitted by the compiler. */ overrides: Overrides; /** * Allows for full control over rendering of particular rules. * For example, to implement a LaTeX renderer such as `react-katex`: * * ``` * renderRule(next, node, renderChildren, state) { * if (node.type === RuleType.codeBlock && node.lang === 'latex') { * return ( * <TeX as="div" key={state.key}> * {String.raw`${node.text}`} * </TeX> * ) * } * * return next(); * } * ``` * * Thar be dragons obviously, but you can do a lot with this * (have fun!) To see how things work internally, check the `render` * method in source for a particular rule. */ renderRule: ( /** Resume normal processing, call this function as a fallback if you are not returning custom JSX. */ next: () => React.ReactNode, /** the current AST node, use `RuleType` against `node.type` for identification */ node: ParserResult, /** use as `renderChildren(node.children)` for block nodes */ renderChildren: RuleOutput, /** contains `key` which should be supplied to the topmost JSX element */ state: State ) => React.ReactNode; /** * Override the built-in sanitizer function for URLs, etc if desired. The built-in version is available as a library export called `sanitizer`. */ sanitizer: (value: string, tag: HTMLTags, attribute: string) => string | null; /** * Override normalization of non-URI-safe characters for use in generating * HTML IDs for anchor linking purposes. */ slugify: (input: string, defaultFn: (input: string) => string) => string; /** * Declare the type of the wrapper to be used when there are multiple * children to render. Set to `null` to get an array of children back * without any wrapper, or use `React.Fragment` to get a React element * that won't show up in the DOM. */ wrapper: React.ElementType | null;}>;
type Override
type Override = | RequireAtLeastOne<{ component: React.ElementType; props: Object; }> | React.ElementType;
type Overrides
type Overrides = { [tag in HTMLTags]?: Override;} & { [customComponent: string]: Override;};
type Parser
type Parser<ParserOutput> = ( capture: RegExpMatchArray, nestedParse: NestedParser, state?: MarkdownToJSX.State) => ParserOutput;
type ParserResult
type ParserResult = | BlockQuoteNode | BreakLineNode | BreakThematicNode | CodeBlockNode | CodeFencedNode | CodeInlineNode | FootnoteNode | FootnoteReferenceNode | GFMTaskNode | HeadingNode | HeadingSetextNode | HTMLCommentNode | ImageNode | LinkNode | LinkAngleBraceNode | LinkBareURLNode | LinkMailtoNode | OrderedListNode | UnorderedListNode | NewlineNode | ParagraphNode | ReferenceNode | ReferenceImageNode | ReferenceLinkNode | TableNode | TableSeparatorNode | TextNode | BoldTextNode | ItalicTextNode | EscapedTextNode | MarkedTextNode | StrikethroughTextNode | HTMLNode | HTMLSelfClosingNode;
type Rule
type Rule<ParserOutput = MarkdownToJSX.ParserResult> = { _match: ( source: string, state: MarkdownToJSX.State, prevCapturedString?: string ) => RegExpMatchArray; _order: (typeof Priority)[keyof typeof Priority]; _parse: MarkdownToJSX.Parser<Omit<ParserOutput, 'type'>>; /** * Optional fast check that can quickly determine if this rule * should even be attempted. Should check the start of the source string * for quick patterns without expensive regex operations. * * @param source The input source string (already trimmed of leading whitespace) * @param state Current parser state * @returns true if the rule should be attempted, false to skip */ _qualify?: string[] | ((source: string, state: MarkdownToJSX.State) => boolean); _render?: ( node: ParserOutput, /** * Continue rendering AST nodes if applicable. */ render: RuleOutput, state?: MarkdownToJSX.State ) => React.ReactNode;};
type RuleOutput
type RuleOutput = ( ast: MarkdownToJSX.ParserResult | MarkdownToJSX.ParserResult[], state: MarkdownToJSX.State) => React.JSX.Element;
type Rules
type Rules = { [K in ParserResult['type']]: K extends typeof RuleType.table ? Rule< Extract< ParserResult, { type: K | typeof RuleType.paragraph; } > > : Rule< Extract< ParserResult, { type: K; } > >;};
type State
type State = { /** true if the current content is inside anchor link grammar */ inAnchor?: boolean; /** true if parsing in an inline context (subset of rules around formatting and links) */ inline?: boolean; /** true if in a table */ inTable?: boolean; /** use this for the `key` prop */ key?: React.Key; /** true if in a list */ list?: boolean; /** used for lookbacks */ prevCapture?: string; /** true if parsing in inline context w/o links */ simple?: boolean;};
Package Files (1)
Dependencies (0)
No dependencies.
Dev Dependencies (33)
- @babel/plugin-proposal-nullish-coalescing-operator
- @babel/plugin-proposal-object-rest-spread
- @babel/plugin-proposal-optional-chaining
- @babel/plugin-transform-typescript
- @changesets/cli
- @matejmazur/react-katex
- @size-limit/preset-small-lib
- @types/jest
- @types/node
- @types/react
- benchtable
- cli-progress
- in-publish
- jest
- jest-environment-jsdom
- jest-serializer-html
- jest-watch-typeahead
- markdown-it
- markdown-to-jsx-latest
- microbundle
- microtime
- mkdirp
- preact
- prettier
- react
- react-dom
- rimraf
- simple-markdown
- size-limit
- styled-components
- theredoc
- ts-jest
- typescript
Peer Dependencies (1)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/markdown-to-jsx
.
- Markdown[](https://www.jsdocs.io/package/markdown-to-jsx)
- HTML<a href="https://www.jsdocs.io/package/markdown-to-jsx"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 4474 ms. - Missing or incorrect documentation? Open an issue for this package.