React-page-markdown-plugin NPM

react-page-markdown-plugin

This Markdown plugin allows one to render markdown in a ReactPage component. It uses the react-markdown library to render user-inputted markdown, basic and advanced, on-the-fly.

What is Markdown, even?

It is a format which allows a user to easily define headings, lists and images etc, right through simple syntax. This README is written in Markdown too!

Installation

using npm

npm i react-page-markdown-plugin

or using yarn

yarn add react-page-markdown-plugin

Instantiation

Define the react-page-markdown-plugin as part of the cellPlugins list.

import Markdown from 'react-page-markdown-plugin';


const cellPlugins = [
... // Other cell plugins as usual
Markdown
];

Usage Example

import Markdown from 'react-page-markdown-plugin';
import Editor from '@react-page/editor';

const cellPlugins = [Markdown];

export default function SimpleExample() {
  const [value, setValue] = useState("");

  return (
    <div>
      <Editor cellPlugins={cellPlugins} value={value} onChange={setValue} />
    </div>
  );
}

Markdown Plugin in Action

Animation

React Page Markdown Plugin Demo

A demo for markdown plugin can be found here. Have fun exploring.

About ReactPage

ReactPage is a smart, extensible and modern editor (“WYSIWYG”) for the web written in React. If you are fed up with the limitations of contenteditable, visit the official documentation of ReactPage.