What is Remarkable Function, Plugin in React

Remarkable Plugin is a formatting tool that transform text with added syntax into HTML in real time without refreshing the page.

Example –

Suppose the text is – “Javaatpoint”.

Added Syntax = “#” , this ‘#’ means h1 tag in Remarkable , so We will put “#Javaatpoint” in Textbox & will see the Output.

Text Input Area & Output –

After clicking on inspect , the HTML Code for this page –

As You Can See Javaatpoint is in “H1” tag, this is the one example , similarly you can play with Remarkable.

Table of Contents

Code for Remarkable

import {Remarkable} from 'remarkable';     

class MarkdownEditor extends React.Component {
  constructor(props) {
    super(props);
    this.md = new Remarkable();
    this.handleChange = this.handleChange.bind(this);
    this.state = { value: 'Hello, **world**!' };
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  getRawMarkup() {
    return { __html: this.md.render(this.state.value) };
  }

  render() {
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <label htmlFor="markdown-content">
          Enter some markdown
        </label>
        <textarea
          id="markdown-content"
          onChange={this.handleChange}
          defaultValue={this.state.value}
        />
        <h3>Output</h3>
        <div
          className="content"
          dangerouslySetInnerHTML={this.getRawMarkup()}
        />
      </div>
    );
  }
}



const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <MarkdownEditor/>
  </React.StrictMode>
);

Code Source – https://reactjs.org/ & some lines are added extra in Code.

As you can see in above code , Remarkable is imported firstly , than it is defined in “this.md”.

Than , state & handleChange is defined , then handleChange & getRawMarkup function is defined, than it is used in render.

Please ask your query freely if you face any difficulty in understanding at – javaatpoint@gmail.com.