@nitonodev/aeromd-react NPM

@nitonodev/aeromd-react

The @nitonodev/aeromd plugin for parse markdown to react

npm i @nitonodev/aeromd-react

// if you use a commonjs
const { ReactMarkdownParser } = require('@nitonodev/aeromd-html');
// if you use a esm
import { ReactMarkdownParser } from '@nitonodev/aeromd-html';

To create a class you may to write next lines of code

// Instead of rmp your variable name
// Instead of '# Hello' your markdown code
const rmp = new ReactMarkdownParser('# Hello');

name of function	return value	params
parse	string (react code)	optional m by default is markdown code who declared in class definition

Example:

const rmp = new ReactMarkdownParser('# Hello');
// if you want to use default value from class definition
rmp.parse(); // => <div id='html'><div id="body"><h1>Hello</h1></div></div>

// if you want to use custom parsing value
rmp.parse('## Hello, World !'); // => <div id='html'><div id="body"><h2>Hello, World !</h2></div></div>

Install highlight.js to highlight code blocks and @nitonodev/aeromd with styles for markdown

npm i highlight.js @nitonodev/aeromd

Add this lines to you code in react

+ import React, {useEffect} from 'react'
+ import { ReactMarkdownParser } from '@nitonodev/aeromd-react'
+ import '@nitonodev/aeromd/lib/styles/md-theme.css'
+ import 'highlight.js/styles/base16/solarized-dark.css'
+ import hljs from 'highlight.js'


... // Your code

function App() {
+   useEffect(() => hljs.highlightAll())

+    const data = new ReactMarkdownParser("# Hello")

+    const MarkdownComponenet = () =>
+    React.createElement("div", {
+      dangerouslySetInnerHTML: { __html: data }
+    });

    return (
        ... // Your code
+          <MarkdownComponent/>
+
    )
}

You can write me to pyto015@ya.ru or open issue at Github repo

Links