tessl/npm-markdown-to-jsx

Convert markdown to JSX with ease for React and React-like projects.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Core Compilation

Name: tessl/npm-markdown-to-jsx
Author: tessl

Core markdown parsing and JSX compilation functionality for converting markdown strings to React elements with extensive configuration options.

Capabilities

Compiler Function

Main compilation function that converts markdown strings to React JSX elements with optional configuration.

/**
 * Converts markdown string to React JSX elements
 * @param markdown - The markdown string to compile (defaults to empty string)
 * @param options - Configuration options for parsing and rendering
 * @returns React JSX element representing the compiled markdown
 */
function compiler(
  markdown?: string,
  options?: MarkdownToJSX.Options
): React.JSX.Element;

Usage Examples:

import { compiler } from "markdown-to-jsx";

// Basic compilation
const basicJsx = compiler("# Hello World\n\nThis is **bold** text.");

// With options
const customJsx = compiler("# Custom Title", {
  forceBlock: true,
  overrides: {
    h1: { props: { className: "custom-heading" } }
  }
});

// Complex markdown with all features
const complexMarkdown = `
# Main Title

## Features

- [x] Task lists
- [ ] Pending item

| Feature | Status |
|---------|--------|
| Tables  | ✓      |
| Links   | ✓      |

\`\`\`javascript
const code = "syntax highlighting";
\`\`\`

> Blockquotes with **formatting**

![Image](https://example.com/image.jpg "Title")

[Link text](https://example.com)

Footnote reference[^1]

[^1]: This is a footnote
`;

const result = compiler(complexMarkdown, {
  enforceAtxHeadings: true,
  overrides: {
    pre: {
      component: ({ children }) => (
        <pre className="syntax-highlighted">{children}</pre>
      )
    }
  }
});

Options Configuration

Comprehensive configuration interface for controlling all aspects of markdown parsing and rendering.

interface MarkdownToJSX.Options {
  /** Custom React.createElement function */
  createElement?: (
    tag: Parameters<CreateElement>[0],
    props: React.JSX.IntrinsicAttributes,
    ...children: React.ReactNode[]
  ) => React.ReactNode;
  
  /** Disable automatic URL linking */
  disableAutoLink?: boolean;
  
  /** Disable HTML parsing into JSX */
  disableParsingRawHTML?: boolean;
  
  /** Require space after # in headings per CommonMark spec */
  enforceAtxHeadings?: boolean;
  
  /** Force block-level wrapper element */
  forceBlock?: boolean;
  
  /** Force inline wrapper element */
  forceInline?: boolean;
  
  /** Always wrap content even for single elements */
  forceWrapper?: boolean;
  
  /** Custom HTML entity to unicode mappings */
  namedCodesToUnicode?: { [key: string]: string };
  
  /** Component and prop overrides for HTML tags */
  overrides?: Overrides;
  
  /** Custom rendering function for complete control */
  renderRule?: (
    next: () => React.ReactNode,
    node: ParserResult,
    renderChildren: RuleOutput,
    state: State
  ) => React.ReactNode;
  
  /** Custom URL/content sanitizer function */
  sanitizer?: (
    value: string,
    tag: HTMLTags,
    attribute: string
  ) => string | null;
  
  /** Custom slug generation for heading IDs */
  slugify?: (
    input: string,
    defaultFn: (input: string) => string
  ) => string;
  
  /** Wrapper element type or null for no wrapper */
  wrapper?: React.ElementType | null;
}

Parsing Features

Comprehensive markdown feature support including GFM extensions and custom markdown elements.

Supported Markdown Elements:

Headings: ATX (# Title) and Setext (Title\n=====) style headings
Text Formatting: Bold (**text**), italic (*text*), strikethrough (~~text~~), marked (==text==)
Lists: Ordered (1. item) and unordered (- item) lists with nesting
Links: Inline ([text](url)), reference ([text][ref]), and autolinks
Images: Inline (![alt](src)) and reference (![alt][ref]) images
Code: Inline (`code`) and fenced ( ```) code blocks with language highlighting
Tables: GFM-style tables with alignment support
Blockquotes: Standard (> quote) and GitHub alert style
Task Lists: GFM task lists (- [x] completed, - [ ] pending)
HTML: Raw HTML parsing with JSX conversion
Footnotes: Reference-style footnotes ([^ref] and [^ref]: content)
Line Breaks: Hard breaks ( \n) and thematic breaks (---)

Usage Examples:

// GFM Task Lists
const taskList = compiler(`
- [x] Completed task
- [ ] Pending task
- [x] Another completed task
`);

// Tables with alignment
const table = compiler(`
| Left | Center | Right |
|------|:------:|------:|
| L1   |   C1   |    R1 |
| L2   |   C2   |    R2 |
`);

// Footnotes
const footnotes = compiler(`
Here's a sentence with a footnote[^1].

[^1]: This is the footnote content.
`);

// Mixed HTML and Markdown
const mixed = compiler(`
# Title

<div class="custom">
  This is **markdown** inside HTML.
</div>

Regular markdown continues here.
`);

Error Handling

The compiler handles malformed markdown gracefully, falling back to safe rendering for problematic content.

// Invalid markdown is handled gracefully
const result = compiler(`
# Incomplete [link](
**Unclosed bold
\`\`\`unclosed-code
`);

// Malicious content is sanitized
const sanitized = compiler(`
[Click me](javascript:alert('xss'))
<script>alert('xss')</script>
`);