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.
- Install with
npm install --save octopus-marked
- Import component(s) you want
import { MarkdownPreview } from "octopus-marked";
Display Markdown is really easy with MarkdownPreview component.
Here is a simple example :
import React from "react";
import { MarkdownPreview } from "octopus-marked";
const Post = ({ post }) => (
<div>
<h1>{post.title}</h1>
<MarkdownPreview value={post.content} />
</div>
);
export default Post;
Behind the scenes, octopus-marked 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.
octopus-marked supports syntax highlighting with highlight.js
All octopus-marked 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 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"
/>
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.
class LiveMarkdownTextarea extends React.Component {
constructor(props) {
super(props);
this.state = {
value: props.defaultValue ? props.defaultValue : "",
};
}
handleTextChange(e) {
this.setState({ value: e.target.value });
if (this.props.onTextChange) {
this.props.onTextChange(e.target.value);
}
}
clear() {
this.setState({ value: "" });
}
render() {
const {
placeholder,
className,
inputClassName,
previewClassName,
} = this.props;
const { value } = this.state;
return (
<section className={className}>
<MarkdownInput
placeholder={placeholder}
onChange={this.handleTextChange.bind(this)}
value={value}
className={inputClassName}
/>
<MarkdownPreview value={value} className={previewClassName} />
</section>
);
}
}