octopus-marked

    1.0.0 • Public • Published

    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 octopus-marked
    • Import component(s) you want
    import { MarkdownPreview } from "octopus-marked";

    MarkdownPreview

    Basic Markdown view

    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;

    Options

    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.

    Syntax highlighting

    octopus-marked supports syntax highlighting with highlight.js

    CSS Classes

    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

    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.

    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>
        );
      }
    }

    Keywords

    none

    Install

    npm i octopus-marked

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    15.9 kB

    Total Files

    14

    Last publish

    Collaborators

    • luonguit