React Marked Markdown
A react components package that helps you use Markdown easily.
Writing in Markdown is an amazing experience. Setting up all components and parser is kind of a pain.
Basic Usage
- Install with
npm install --save react-marked-markdown
- Import component(s) you want
;
MarkdownPreview
Basic Markdown view
Display Markdown is really easy with MarkdownPreview component.
Here is a simple example :
; ; const Post = <div> <h1> posttitle </h1> <MarkdownPreview value= postcontent /> </div>; ;
Options
Behind the scenes, react-marked-markdown uses marked as Markdown parser. So all marked options are available here.
Here is an example with default options :
<MarkdownPreview value="# Hey !" markedOptions= gfm: true tables: true breaks: false pedantic: false sanitize: true smartLists: true smartypants: false />
A list of options can be found here.
Syntax highlighting
react-marked-markdown supports syntax highlighting with highlight.js
CSS Classes
All react-marked-markdown components are unstyled, meaning that you can style them as you want like every others React elements.
<MarkdownPreview className="ui post content" value="#Hey !" />
LiveMarkdownTextarea
LiveMarkdownTextarea allows you to write Markdown in a textarea and see a preview of what you are writing.
<LiveMarkdownTextarea placeholder="Enter your comment here." className="row" inputClassName="field column" previewClassName="column comment-preview"/>
Create your own Markdown Editor
You can even create your own Markdown Editor with MarkdownPreview and MarkdownInput components.
As an example here is the code of LiveMarkdownTextarea component. Note that there is also a clear() method that we can call from parent component to clear the editor.
Component { superprops; thisstate = value: propsdefaultValue ? propsdefaultValue : '' ; } { this; if thispropsonTextChange thisprops; } { this; } { const placeholder className inputClassName previewClassName = thisprops; const value = thisstate; return <section className= className > <MarkdownInput placeholder= placeholder onChange= thishandleTextChange value= value className= inputClassName /> <MarkdownPreview value= value className= previewClassName /> </section> ; }