everything-markdown

everything-markdown

A easy to use, powerful and lightweight Markdown renderer for React that supports code blocks, tables, images, lists, headings, and more—ensuring full Markdown compatibility with ease. 🚀

Installation

npm install everything-markdown

Usage

import EverythingMarkdown from 'everything-markdown';

function MyComponent() {
  const markdownText = `'# Markdown Syntax Guide\n\n## Headings\n\n# H1\n## H2\n### H3\n#### H4\n##### H5\n###### H6\n\n## Emphasis\n\n*Italic* or _Italic_\n\n**Bold** or __Bold__\n\n***Bold and Italic*** or ___Bold and Italic___\n\n~~Strikethrough~~\n\n## Lists\n\n### Unordered List\n\n- Item 1\n- Item 2\n  - Subitem 1\n  - Subitem 2\n- Item 3\n\n### Ordered List\n\n1. First item\n2. Second item\n   1. Subitem 1\n   2. Subitem 2\n3. Third item\n\n## Links\n\n[OpenAI](https://openai.com)\n\n## Images\n\n![Alt text](https://via.placeholder.com/150 "Image Title")\n\n## Code\n\n### Inline Code\n\nUse `code` inside a sentence.\n\n### Block Code\n\n```javascript\nfunction helloWorld() {\n    console.log("Hello, World!");\n}\n```\n\n## Blockquotes\n\n> This is a blockquote.\n> \n> It can span multiple lines.\n\n## Tables\n\n| Name  | Age | City    |\n|-------|-----|--------|\n| Alice | 25  | New York |\n| Bob   | 30  | London  |\n\n## Horizontal Rule\n\n---\n\n## Task List\n\n- [x] Task 1\n- [ ] Task 2\n- [ ] Task 3\n\n## Footnotes\n\nThis is a footnote reference[^1].\n\n[^1]: This is the footnote text.\n\n## HTML in Markdown\n\n<div style="color: red;">This text is red.</div>\n';`;

  // Default light theme
  return <EverythingMarkdown content={markdownText} />;
}

// With dark theme
function DarkThemeComponent() {
  return <EverythingMarkdown content={markdownText} className="dark" />;
}

export default MyComponent;

Features

• Comprehensive Markdown Rendering: Supports a wide range of Markdown elements, including headers, paragraphs, lists, code blocks, tables, images, and more.

• React-based: Built specifically for React applications, ensuring seamless integration and optimal performance.

• Lightweight: Minimal dependencies and optimized bundle size for efficient performance without bloat.

• Dual Theme Support: Built-in support for both light and dark themes. Simply add className="dark" to enable dark mode.

Theme Support

The package comes with built-in support for both light and dark themes:

• Light Theme (Default): No additional configuration needed
• Dark Theme: Add className="dark" to the component

Example:

// Dark theme
<EverythingMarkdown content={markdownText} className="dark" />

// Light theme (default)
<EverythingMarkdown content={markdownText} />

Contributions

Contributions are welcome. If you'd like to contribute, please follow these steps:

• Create an issue: If you've found a bug or have a feature request, please create an issue. This helps us keep track of what needs to be done, and also allows us to assign it to you.
• Ask to be assigned: If you're interested in working on an issue, please leave a comment asking to be assigned. We'll assign it to you as long as no one else is already working on it.
• Fork and work on the issue: Once you've been assigned, you can fork the repo, make the necessary changes, and commit them to your forked repo.
• Create a pull request: Once you've made the changes, create a pull request. In the PR description, please include the number of the issue it is solving and a brief description of the changes you made.

Thanks for your help!