React Live Markdown editor example; Live markdown is a feature that converts HTML markdown text into the corresponding HTML code. It is created based on the Markdown preprocessor. The react-markdown library helps to easily render HTML markdown without depending on dangerous SetInnerHtml property.

Throughout this extensive post, you will learn how to build a live markdown editor component in React js application using the react-markdown and a couple of other packages (react-syntax-highlighter, material-UI/icons and material-UI/core).

A live markdown renderer shows the formatted content such as italics, headings, bold, strikethroughs, code blocks and tables etc.

We will create a basic react app, install certain libraries, create a specific component, and use the React markdown library with the help of docco, SyntaxHighlighter and VisibilityIcon.

We will use the text area and convert it to the live markdown editor in react. Let us find out how to implement live markdown in react.

How to Build Live Markdown Editor in React Js

• Step 1: Download React Project
• Step 2: Install Essential Libraries
• Step 3: Build Markdown Editor
• Step 4: Design Markdown Editor with CSS
• Step 5: Register Component in App Js
• Step 6: Start React Application

Download React Project

The first thing is to configure the primary tool that allows react development, make sure to run the command to set up the Create React App tool.

npm install create-react-app --global

Now, we are ready to run the given command and install the new react app.

npx create-react-app react-blog

Then, move into the app folder:

cd react-blog

Install Essential Libraries

To create a live markdown editor in react requires some of the libraries to be added, you have to simultaneously execute the following commands from the terminal.

npm install react-markdown @material-ui/core @material-ui/icons react-syntax-highlighter

Build Markdown Editor

In react, functionalities can be split into components hence create a Markdown.js file in the components folder. Do not forget to place the given code within the file.

import React, { useState } from 'react'
import ReactMarkdown from 'react-markdown'
import VisibilityIcon from '@material-ui/icons/Visibility'
import SyntaxHighlighter from 'react-syntax-highlighter'
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs'

export default function Markdown() {
  const [liveMarkdown, setLiveMarkdown] = useState()

  return (
      <div className="container">
      <div className="wrapper">
        <div className="head">
          <VisibilityIcon />
          MARKDOWN
        </div>
        <textarea
          autoFocus
          className="textarea"
          onChange={(e) => setLiveMarkdown(e.target.value)}
          value={liveMarkdown}
        ></textarea>
      </div>

      <div className="wrapper">
        <div className="head">
          <VisibilityIcon />
          PREIVEW
        </div>
        <ReactMarkdown
          children={liveMarkdown}
          components={{
            code: MarkComponent,
          }}
        />
      </div>
      </div>
  )
}

const MarkComponent = ({ value, language }) => {
  return (
    <SyntaxHighlighter language={language ?? null} style={docco}>
      {value ?? ''}
    </SyntaxHighlighter>
  )
}

Design Markdown Editor with CSS

We are going to add some custom style in markdown editor, you need to go to the App.css file and make sure to put the given code within the file.

body {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.container {
  align-items: center;
  display: flex;
  width: 100%;
  height: 100vh;
}

.wrapper {
  width: 46%;
  height: 55%;
  margin: 26px;
  outline: none;
  display: flex;
  padding: 22px;
  background: #ececee;
  flex-direction: column;
  border: 1px solid #ccc;
  overflow: hidden;
  overflow-y: auto;
}

.head {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  font-size: 16px;
  border-bottom: 1px solid #ddd;
}

textarea {
  padding: 16px;
  border: none;
  outline: none !important;
  width: 95%;
  height: 100%;
  overflow-x: hidden;
  resize: none;
  font-size: 18px;
  background: #ececee;
}

.markdown {
  padding: 16px;
  border: none;
  width: 95%;
  height: 100%;
  resize: none;
  overflow-x: hidden;
  outline: none !important;
  background: #ffffff;
}

Register Component in App Js

React app is served through global component, that component is located in App.js file, you need to add or import the markdown component in this file.

import React from 'react'
import './App.css'
import Markdown from './components/Markdown'

function App() {
  return (
    <div>
      <Markdown />
    </div>
  )
}

export default App

Start React Application

We finally have to start the react app and we can do it by running the given command.

npm start

Your app can be opened on the given url:

http://localhost:3000

Summary

In this step-by-step tutorial, we have learned how to build a live markdown editor component in React js application.

To create the live markdown, we used the react markdown module and also took the help of other modules.