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.