React based Markdown editor component

  • The demo address
  • Making the address

Introduction to the

  • usingmarked-reactparsingmarkdown
  • Render as real React Elements

The installation

$ npm i marked-react
Copy the code

use

import ReactDOM from 'react-dom'; import Markdown from 'marked-react'; const rootEl = document.getElementById('root'); ReactDOM.render( <Markdown># Hello world! </Markdown>, rootEl);Copy the code

Component attributes

  • Value [string] : indicates the markDown content

  • BaseURL [string] : The base path relative to the URL address, somewhat similar to Axios’ baseURL

  • OpenLinksInNewTab [Boolean] :

  • LangPrefix [string] – The string that prefixes className in the block. Useful for syntax highlighting. As language - by default.

  • Breaks [Boolean] : BR adds markup to a single line break

  • GFM [Boolean]: Used the approved Github chinglish Markdown

Syntax highlighting code blocks

There are some great options for highlighting code

  • react-syntax-highlighter
  • react-lowlight
  • react-refractor

A simple demo of React – Lowlight

import ReactDOM from 'react-dom';
import Markdown from 'marked-react';
import Lowlight from 'react-lowlight';
import javascript from 'highlight.js/lib/languages/javascript';

Lowlight.registerLanguage('js', javascript);

const renderer = {
  code: (snippet, lang) => {
    return <Lowlight language={lang} value={snippet} />;
  },
};

const markdown = 'console.log("Hello world!")';

const rootEl = document.getElementById('root');
ReactDOM.render(<Markdown value={markdown} renderer={renderer} />, rootEl);
Copy the code