markdown-to-jsx

  • Version 9.1.1
  • Published
  • 3.18 MB
  • No dependencies
  • MIT license

Install

npm i markdown-to-jsx
yarn add markdown-to-jsx
pnpm add markdown-to-jsx

Overview

A very fast and versatile markdown toolchain. AST, React, and HTML output available with full customization.

Index

Variables

variable Markdown

const Markdown: React2.FC<
Omit<React2.HTMLAttributes<Element>, 'children'> & {
children?: string | null;
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 RuleType

const RuleType: {
readonly blockQuote: 0;
readonly breakLine: 1;
readonly breakThematic: 2;
readonly codeBlock: 3;
readonly codeInline: 4;
readonly footnote: 5;
readonly footnoteReference: 6;
readonly frontmatter: 7;
readonly gfmTask: 8;
readonly heading: 9;
readonly htmlBlock: 10;
readonly htmlComment: 11;
readonly htmlSelfClosing: 12;
readonly image: 13;
readonly link: 14;
readonly orderedList: 15;
readonly paragraph: 16;
readonly ref: 17;
readonly refCollection: 18;
readonly table: 19;
readonly text: 20;
readonly textFormatted: 21;
readonly unorderedList: 22;
};

    variable RuleTypeConst

    const RuleTypeConst: {
    readonly blockQuote: 0;
    readonly breakLine: 1;
    readonly breakThematic: 2;
    readonly codeBlock: 3;
    readonly codeInline: 4;
    readonly footnote: 5;
    readonly footnoteReference: 6;
    readonly frontmatter: 7;
    readonly gfmTask: 8;
    readonly heading: 9;
    readonly htmlBlock: 10;
    readonly htmlComment: 11;
    readonly htmlSelfClosing: 12;
    readonly image: 13;
    readonly link: 14;
    readonly orderedList: 15;
    readonly paragraph: 16;
    readonly ref: 17;
    readonly refCollection: 18;
    readonly table: 19;
    readonly text: 20;
    readonly textFormatted: 21;
    readonly unorderedList: 22;
    };
    • 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

    function compiler

    compiler: (
    markdown?: string,
    options?: MarkdownToJSX.Options
    ) => React2.ReactNode;

      function parser

      parser: (
      source: string,
      options?: MarkdownToJSX.Options
      ) => MarkdownToJSX.ASTNode[];
      • Given a markdown string, return an abstract syntax tree (AST) of the markdown.

        The first node in the AST is a reference collection node. This node contains all the reference definitions found in the markdown. These reference definitions are used to resolve reference links and images in the markdown.

        Parameter source

        The markdown string to parse.

        Parameter options

        The options for the parser.

        Returns

        The AST of the markdown.

      function sanitizer

      sanitizer: (input: string) => string | null;

        function slugify

        slugify: (str: string) => string;

          Type Aliases

          type RuleType

          type RuleType2 = RuleTypeValue;

            Namespaces

            namespace global

            namespace global {}

              variable parseMetrics

              var parseMetrics: {
              blockParsers: {
              [key: string]: { attempts: number; hits: number; hitTimings: number[] };
              };
              inlineParsers: {
              [key: string]: { attempts: number; hits: number; hitTimings: number[] };
              };
              totalOperations: number;
              blockParseIterations: number;
              inlineParseIterations: number;
              };

                variable parseMetricsStartTimes

                var parseMetricsStartTimes: Map<string, number>;

                  namespace MarkdownToJSX

                  namespace MarkdownToJSX {}
                  • markdown-to-jsx types and interfaces

                  interface BlockQuoteNode

                  interface BlockQuoteNode {}

                    property alert

                    alert?: string;

                      property children

                      children: MarkdownToJSX.ASTNode[];

                        property type

                        type: typeof RuleType2.blockQuote;

                          interface BreakLineNode

                          interface BreakLineNode {}

                            property type

                            type: typeof RuleType2.breakLine;

                              interface BreakThematicNode

                              interface BreakThematicNode {}

                                property type

                                type: typeof RuleType2.breakThematic;

                                  interface CodeBlockNode

                                  interface CodeBlockNode {}

                                    property attrs

                                    attrs?: React.JSX.IntrinsicAttributes;

                                      property lang

                                      lang?: string;

                                        property text

                                        text: string;

                                          property type

                                          type: typeof RuleType2.codeBlock;

                                            interface CodeInlineNode

                                            interface CodeInlineNode {}

                                              property text

                                              text: string;

                                                property type

                                                type: typeof RuleType2.codeInline;

                                                  interface FootnoteNode

                                                  interface FootnoteNode {}

                                                    property type

                                                    type: typeof RuleType2.footnote;

                                                      interface FootnoteReferenceNode

                                                      interface FootnoteReferenceNode {}

                                                        property target

                                                        target: string;

                                                          property text

                                                          text: string;

                                                            property type

                                                            type: typeof RuleType2.footnoteReference;

                                                              interface FormattedTextNode

                                                              interface FormattedTextNode {}

                                                                property children

                                                                children: MarkdownToJSX.ASTNode[];

                                                                  property tag

                                                                  tag: string;
                                                                  • the corresponding html tag

                                                                  property type

                                                                  type: typeof RuleType2.textFormatted;

                                                                    interface FrontmatterNode

                                                                    interface FrontmatterNode {}

                                                                      property text

                                                                      text: string;

                                                                        property type

                                                                        type: typeof RuleType2.frontmatter;

                                                                          interface GFMTaskNode

                                                                          interface GFMTaskNode {}

                                                                            property completed

                                                                            completed: boolean;

                                                                              property type

                                                                              type: typeof RuleType2.gfmTask;

                                                                                interface HeadingNode

                                                                                interface HeadingNode {}

                                                                                  property children

                                                                                  children: MarkdownToJSX.ASTNode[];

                                                                                    property id

                                                                                    id: string;

                                                                                      property level

                                                                                      level: 1 | 2 | 3 | 4 | 5 | 6;

                                                                                        property type

                                                                                        type: typeof RuleType2.heading;

                                                                                          interface HTMLCommentNode

                                                                                          interface HTMLCommentNode {}

                                                                                            property text

                                                                                            text: string;

                                                                                              property type

                                                                                              type: typeof RuleType2.htmlComment;

                                                                                                interface HTMLNode

                                                                                                interface HTMLNode {}

                                                                                                  property attrs

                                                                                                  attrs?: Record<string, any>;

                                                                                                    property children

                                                                                                    children?: ASTNode[] | undefined;

                                                                                                      property noInnerParse

                                                                                                      noInnerParse?: Boolean;

                                                                                                        property tag

                                                                                                        tag: string;

                                                                                                          property text

                                                                                                          text?: string | undefined;

                                                                                                            property type

                                                                                                            type: typeof RuleType2.htmlBlock;

                                                                                                              interface HTMLSelfClosingNode

                                                                                                              interface HTMLSelfClosingNode {}

                                                                                                                property attrs

                                                                                                                attrs?: Record<string, any>;

                                                                                                                  property isClosingTag

                                                                                                                  isClosingTag?: boolean;

                                                                                                                    property tag

                                                                                                                    tag: string;

                                                                                                                      property type

                                                                                                                      type: typeof RuleType2.htmlSelfClosing;

                                                                                                                        interface ImageNode

                                                                                                                        interface ImageNode {}

                                                                                                                          property alt

                                                                                                                          alt?: string;

                                                                                                                            property target

                                                                                                                            target: string;

                                                                                                                              property title

                                                                                                                              title?: string;

                                                                                                                                property type

                                                                                                                                type: typeof RuleType2.image;

                                                                                                                                  interface LinkNode

                                                                                                                                  interface LinkNode {}

                                                                                                                                    property children

                                                                                                                                    children: MarkdownToJSX.ASTNode[];

                                                                                                                                      property target

                                                                                                                                      target: string | null;

                                                                                                                                        property title

                                                                                                                                        title?: string;

                                                                                                                                          property type

                                                                                                                                          type: typeof RuleType2.link;

                                                                                                                                            interface OrderedListNode

                                                                                                                                            interface OrderedListNode {}

                                                                                                                                              property items

                                                                                                                                              items: MarkdownToJSX.ASTNode[][];

                                                                                                                                                property start

                                                                                                                                                start?: number;

                                                                                                                                                  property type

                                                                                                                                                  type: typeof RuleType2.orderedList;

                                                                                                                                                    interface ParagraphNode

                                                                                                                                                    interface ParagraphNode {}

                                                                                                                                                      property children

                                                                                                                                                      children: MarkdownToJSX.ASTNode[];

                                                                                                                                                        property type

                                                                                                                                                        type: typeof RuleType2.paragraph;

                                                                                                                                                          interface ReferenceCollectionNode

                                                                                                                                                          interface ReferenceCollectionNode {}

                                                                                                                                                            property refs

                                                                                                                                                            refs: {
                                                                                                                                                            [key: string]: {
                                                                                                                                                            target: string;
                                                                                                                                                            title: string | undefined;
                                                                                                                                                            };
                                                                                                                                                            };

                                                                                                                                                              property type

                                                                                                                                                              type: typeof RuleType2.refCollection;

                                                                                                                                                                interface ReferenceNode

                                                                                                                                                                interface ReferenceNode {}

                                                                                                                                                                  property type

                                                                                                                                                                  type: typeof RuleType2.ref;

                                                                                                                                                                    interface TableNode

                                                                                                                                                                    interface TableNode {}

                                                                                                                                                                      property align

                                                                                                                                                                      align: ('left' | 'right' | 'center')[];
                                                                                                                                                                      • alignment for each table column

                                                                                                                                                                      property cells

                                                                                                                                                                      cells: MarkdownToJSX.ASTNode[][][];

                                                                                                                                                                        property header

                                                                                                                                                                        header: MarkdownToJSX.ASTNode[][];

                                                                                                                                                                          property type

                                                                                                                                                                          type: typeof RuleType2.table;

                                                                                                                                                                            interface TextNode

                                                                                                                                                                            interface TextNode {}

                                                                                                                                                                              property text

                                                                                                                                                                              text: string;

                                                                                                                                                                                property type

                                                                                                                                                                                type: typeof RuleType2.text;

                                                                                                                                                                                  interface UnorderedListNode

                                                                                                                                                                                  interface UnorderedListNode {}

                                                                                                                                                                                    property items

                                                                                                                                                                                    items: MarkdownToJSX.ASTNode[][];

                                                                                                                                                                                      property type

                                                                                                                                                                                      type: typeof RuleType2.unorderedList;

                                                                                                                                                                                        type ASTNode

                                                                                                                                                                                        type ASTNode =
                                                                                                                                                                                        | BlockQuoteNode
                                                                                                                                                                                        | BreakLineNode
                                                                                                                                                                                        | BreakThematicNode
                                                                                                                                                                                        | CodeBlockNode
                                                                                                                                                                                        | CodeInlineNode
                                                                                                                                                                                        | FootnoteNode
                                                                                                                                                                                        | FootnoteReferenceNode
                                                                                                                                                                                        | FrontmatterNode
                                                                                                                                                                                        | GFMTaskNode
                                                                                                                                                                                        | HeadingNode
                                                                                                                                                                                        | HTMLCommentNode
                                                                                                                                                                                        | ImageNode
                                                                                                                                                                                        | LinkNode
                                                                                                                                                                                        | OrderedListNode
                                                                                                                                                                                        | UnorderedListNode
                                                                                                                                                                                        | ParagraphNode
                                                                                                                                                                                        | ReferenceNode
                                                                                                                                                                                        | ReferenceCollectionNode
                                                                                                                                                                                        | TableNode
                                                                                                                                                                                        | TextNode
                                                                                                                                                                                        | FormattedTextNode
                                                                                                                                                                                        | HTMLNode
                                                                                                                                                                                        | HTMLSelfClosingNode;

                                                                                                                                                                                          type ASTRender

                                                                                                                                                                                          type ASTRender = (
                                                                                                                                                                                          ast: MarkdownToJSX.ASTNode | MarkdownToJSX.ASTNode[],
                                                                                                                                                                                          state: MarkdownToJSX.State
                                                                                                                                                                                          ) => React.ReactNode;

                                                                                                                                                                                            type CreateElement

                                                                                                                                                                                            type CreateElement = typeof React.createElement;

                                                                                                                                                                                              type HTMLTags

                                                                                                                                                                                              type HTMLTags = keyof React.JSX.IntrinsicElements & (string & {});

                                                                                                                                                                                                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;
                                                                                                                                                                                                /**
                                                                                                                                                                                                * Enable GFM tagfilter extension to filter potentially dangerous HTML tags.
                                                                                                                                                                                                * When enabled, the following tags are escaped: title, textarea, style, xmp,
                                                                                                                                                                                                * iframe, noembed, noframes, script, plaintext.
                                                                                                                                                                                                * https://github.github.com/gfm/#disallowed-raw-html-extension-
                                                                                                                                                                                                * @default true
                                                                                                                                                                                                */
                                                                                                                                                                                                tagfilter?: 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;
                                                                                                                                                                                                /**
                                                                                                                                                                                                * 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: (
                                                                                                                                                                                                next: () => React.ReactNode,
                                                                                                                                                                                                node: ASTNode,
                                                                                                                                                                                                renderChildren: ASTRender,
                                                                                                                                                                                                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;
                                                                                                                                                                                                /**
                                                                                                                                                                                                * Props to apply to the wrapper element.
                                                                                                                                                                                                */
                                                                                                                                                                                                wrapperProps?: React.JSX.IntrinsicAttributes;
                                                                                                                                                                                                /**
                                                                                                                                                                                                * Preserve frontmatter in the output by rendering it as a <pre> element.
                                                                                                                                                                                                * By default, frontmatter is parsed but not rendered.
                                                                                                                                                                                                * @default false
                                                                                                                                                                                                */
                                                                                                                                                                                                preserveFrontmatter?: boolean;
                                                                                                                                                                                                }>;

                                                                                                                                                                                                  type Override

                                                                                                                                                                                                  type Override =
                                                                                                                                                                                                  | RequireAtLeastOne<{
                                                                                                                                                                                                  component: React.ElementType;
                                                                                                                                                                                                  props: Object;
                                                                                                                                                                                                  }>
                                                                                                                                                                                                  | React.ElementType;

                                                                                                                                                                                                    type Overrides

                                                                                                                                                                                                    type Overrides = { [tag in HTMLTags]?: Override } & {
                                                                                                                                                                                                    [customComponent: string]: Override;
                                                                                                                                                                                                    };

                                                                                                                                                                                                      type RequireAtLeastOne

                                                                                                                                                                                                      type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<
                                                                                                                                                                                                      T,
                                                                                                                                                                                                      Exclude<keyof T, Keys>
                                                                                                                                                                                                      > &
                                                                                                                                                                                                      {
                                                                                                                                                                                                      [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
                                                                                                                                                                                                      }[Keys];
                                                                                                                                                                                                      • RequireAtLeastOne<{ ... }> <- only requires at least one key

                                                                                                                                                                                                      type State

                                                                                                                                                                                                      type State = {
                                                                                                                                                                                                      /** true if the current content is inside anchor link grammar */
                                                                                                                                                                                                      inAnchor?: boolean;
                                                                                                                                                                                                      /** true if inside a blockquote */
                                                                                                                                                                                                      inBlockQuote?: boolean;
                                                                                                                                                                                                      /** true if parsing in an HTML context */
                                                                                                                                                                                                      inHTML?: boolean;
                                                                                                                                                                                                      /** true if in a list */
                                                                                                                                                                                                      inList?: boolean;
                                                                                                                                                                                                      /** true if parsing in an inline context (subset of rules around formatting and links) */
                                                                                                                                                                                                      inline?: boolean;
                                                                                                                                                                                                      /** use this for the `key` prop */
                                                                                                                                                                                                      key?: React.Key;
                                                                                                                                                                                                      /** reference definitions (footnotes are stored with '^' prefix) */
                                                                                                                                                                                                      refs?: {
                                                                                                                                                                                                      [key: string]: {
                                                                                                                                                                                                      target: string;
                                                                                                                                                                                                      title: string | undefined;
                                                                                                                                                                                                      };
                                                                                                                                                                                                      };
                                                                                                                                                                                                      /** current recursion depth during rendering */
                                                                                                                                                                                                      renderDepth?: number;
                                                                                                                                                                                                      };

                                                                                                                                                                                                        Package Files (1)

                                                                                                                                                                                                        Dependencies (0)

                                                                                                                                                                                                        No dependencies.

                                                                                                                                                                                                        Dev Dependencies (50)

                                                                                                                                                                                                        Peer Dependencies (1)

                                                                                                                                                                                                        Badge

                                                                                                                                                                                                        To add a badge like this onejsDocs.io badgeto 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
                                                                                                                                                                                                          [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](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>