markdown
Yet another react component to render markdown.
Install
npm install --save react-markdown2
Usage
import React Component from "react";import Markdown from "react-markdown2"; { return <div> /* Pass Markdown source to the `source` prop */ <Markdown ="**Markdown is awesome!**" /> /* Or pass it as children */ /* You can nest React components, too */ <Markdown> ` ## Header 1. One 2. Two ` <div>Nested component</div> `Test` </Markdown> </div> }
Webpack build pipeline
See webpack.config.js as an example how to integrate this package into your webpack pipeline, i.e. you need to use the following webpack plugins:
- extract-text-webpack-plugin
- style-loader
- sass-loader
- css-loader
- postcss-loader
- webpack-sources
TODO
- Use markdown-it to render markdown content
- Use prismjs for syntax highlighting
- Diagrams
- Sequance diagrams
- Flowchart
- Railroad diagrams
- Buttons to show source code of diagram
- KaTeX
- basic integration
- import katex css
- MathJax
- Auto-embeddable links
- Video services
- youtube
- vimeo
- vine
- daylymotion
- viddler
- blip.tv
- liveleak
- ted
- ustream
- Audio services
- soundcloud
- Code snippets
- github gist
- codepen
- ideone
- jsbin
- jsfiddle
- plunker
- Social media
- Maps
- google maps
- Video services
- Unified diff fence blocks
- Automatically detect and render diff patch blocks
- Integrate/implement embed.js features
- render HTML content if content-type is not markdown
- allow to extend markdown rendering with markdown-it plugins
Licence
MIT. See LICENSE.