jerolimov / React Showdown
Licence: mit
Render React components within markdown and markdown as React components!
Stars: ✭ 86
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to React Showdown
Markdown Component Loader
📑 Turn Markdown into dynamic, stateless React components
Stars: ✭ 71 (-17.44%)
Mutual labels: markdown, react-components
Dataformsjs
🌟 DataFormsJS 🌟 A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.
Stars: ✭ 95 (+10.47%)
Mutual labels: markdown, react-components
Canvas
Hacking on the remains of Canvas. Nothing to see yet.
Stars: ✭ 82 (-4.65%)
Mutual labels: markdown
Hypermd
A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.
Stars: ✭ 1,258 (+1362.79%)
Mutual labels: markdown
Kefirbb
A flexible Java text processor. BB, BBCode, BB-code, HTML, Textile, Markdown, parser, translator, converter.
Stars: ✭ 83 (-3.49%)
Mutual labels: markdown
Domador
😼 Dependency-free and lean DOM parser that outputs Markdown
Stars: ✭ 82 (-4.65%)
Mutual labels: markdown
Remark Github
plugin to autolink references to commits, issues, pull-requests, and users, like on GitHub
Stars: ✭ 83 (-3.49%)
Mutual labels: markdown
Details
R Package to Create Details HTML Tag for Markdown and Package Documentation
Stars: ✭ 83 (-3.49%)
Mutual labels: markdown
Laravel Blog
基于Laravel5.8构建的轻量博客应用,支持Markdown,支持图片拖拽上传,界面简洁,SEO友好,支持百度链接自动和手动提交
Stars: ✭ 84 (-2.33%)
Mutual labels: markdown
Markr
Minimalistic markdown editor for MacOS with live preview
Stars: ✭ 82 (-4.65%)
Mutual labels: markdown
Blog Vue Typescript
vue + typescript + element-ui 支持 markdown 渲染的博客前台展示
Stars: ✭ 1,262 (+1367.44%)
Mutual labels: markdown
Neumorphic Ui
📚 A library of components based on the concept of neumorphism
Stars: ✭ 82 (-4.65%)
Mutual labels: react-components
Markdown Plus Plus
Markdown syntax highlighting for Notepad++, by customized UDL file (user defined language)
Stars: ✭ 1,252 (+1355.81%)
Mutual labels: markdown
Swiftymarkdown
Converts Markdown files and strings into NSAttributedStrings with lots of customisation options.
Stars: ✭ 1,274 (+1381.4%)
Mutual labels: markdown
react-showdown
Render React components within markdown and markdown as React components!
Features
- Render markdown as React components.
- Render React components within the markdown!
- Full TypeScript Support.
- Fully tested.
- Supports all Showdown extensions, like the Twitter Extension and the Youtube Extension.
- New in 2.0: Supports Showdown Flavors!
- New in 2.1:
Installation
npm install --save react-showdown
or
yarn add react-showdown
Use as React component
Example with ES6/JSX:
import React from 'react';
import MarkdownView from 'react-showdown';
export default function App() {
const markdown = `
# Welcome to React Showdown 👍
To get started, edit the markdown in \`example/src/App.tsx\`.
| Column 1 | Column 2 |
|----------|----------|
| A1 | B1 |
| A2 | B2 |
`;
return (
<MarkdownView
markdown={markdown}
options={{ tables: true, emoji: true }}
/>
);
};
Use a React component and use it within the markdown with ES6 / TypeScript:
import MarkdownView from 'react-showdown';
function CustomComponent({ name }: { name: string }) {
return <span>Hello {name}!</span>;
}
const markdown = `
# A custom component:
<CustomComponent name="world" />`;
<MarkdownView markdown={markdown} components={{ CustomComponent }} />
Available props
- markdown, string, required
- flavor, Flavor, optional
- options, ConverterOptions, optional
- extensions, showdown extensions, optional
- components, components, optional
Converter options will be pushed forward to the showdown converter, please checkout the valid options section.
Credits
Project is based on the markdown parser Showdown and the html parser htmlparser2.
Alternatives
- reactdown
- react-markdown, based on commonmark.js
- commonmark-react-renderer, based on commonmark.js
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].