How to Create Live Markdown Editor in React 18
In this tutorial, we are going to learn how to create a simple live markdown editor in React js application using third party packages.
To make the live markdown editor component in React, we will install and use react-markdown, @material-ui/icons, @material-ui/core, and react-syntax-highlighter modules.
The react-markdown is a notable module available through the node package manager; it helps to render markdown in React component. It is quite a popular package, and it gets more or less 110000 downloads every week.
This post will show you how to integrate react-markdown in react and easily render the markdown in react app.
React Js Create Live Markdown Editor Example
- Step 1: Create React App
- Step 2: Install React Markdown Package
- Step 3: Create Markdown Component
- Step 4: Style Markdown Component
- Step 5: Update App Js File
- Step 6: View App in Browser
Create React App
Head over to the command-line tool, type the command, and hit enter to install the create react app tool globally:
npm install create-react-app --globalExecute the command to install a new React application:
npx create-react-app react-demoThen, move into the app folder:
cd react-demoInstall React Markdown Package
In this step, we will type React markdown and a couple of other modules that will help us build the live markdown component in React.
npm install react-markdown @material-ui/icons @material-ui/core react-syntax-highlighter --legacy-peer-depsCreate Markdown Component
In the src/ directory, make a new /components folder then also create the LiveMarkdown.js file.
Then, you have to update the given code into the file.
import React, { useState } from 'react'
import ReactMarkdown from 'react-markdown'
import SyntaxHighlighter from 'react-syntax-highlighter'
import VisibilityIcon from '@material-ui/icons/Visibility'
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs'
export default function LiveMarkdown() {
const [markdownInput, setMarkdownInput] = useState()
return (
<div className="App">
<div className="wrapper">
<div className="head">
<VisibilityIcon />
MARKDOWN
</div>
<textarea
autoFocus
className="textarea"
value={markdownInput}
onChange={(e) => setMarkdownInput(e.target.value)}
></textarea>
</div>
<div className="wrapper">
<div className="head">
<VisibilityIcon />
PREIVEW
</div>
<ReactMarkdown
children={markdownInput}
components={{
code: MarkComponent,
}}
/>
</div>
</div>
)
}
const MarkComponent = ({ value, language }) => {
return (
<SyntaxHighlighter language={language ?? null} style={docco}>
{value ?? ''}
</SyntaxHighlighter>
)
}React component called `LiveMarkdown` that uses the `react-markdown` library to render Markdown content with syntax highlighting using `react-syntax-highlighter`. Additionally, We’re using the `@material-ui/icons/Visibility` icon.
Here’s a breakdown of code:
1. State Management:
— We’re using the `useState` hook to manage the state of the Markdown input.
2. Textarea for Markdown Input:
— Wehave a `textarea` element for users to input Markdown text.
— The `onChange` handler updates the state (`markdownInput`) as the user types.
3. Markdown Preview:
— Weuse the `ReactMarkdown` component to render the Markdown content.
— The `children` prop is set to the `markdownInput` state.
— The `components` prop is used to customize the rendering of specific elements, in this case, the `code` element is customized using the `MarkComponent` function.
4. MarkComponent Function:
— This function is a custom renderer for the `code` elements within the Markdown content.
— It uses the `SyntaxHighlighter` component from `react-syntax-highlighter` to apply syntax highlighting.
— The `language` prop is passed to `SyntaxHighlighter` to determine the language for syntax highlighting.
5. Styling:
— It seems like you’re using some CSS classes (`App`, `wrapper`, `head`, `textarea`, etc.) to style your components. Make sure you have the corresponding styles defined.
6. Material-UI Icon:
— You’re using the `VisibilityIcon` from `@material-ui/icons` to represent the Markdown input and preview sections.
Make sure to import the required dependencies, such as `react`, `react-markdown`, `react-syntax-highlighter`, and `@material-ui/icons`, and ensure that your CSS classes are defined properly for styling.
If you have any specific questions or if there’s something specific you’d like to add or modify, feel free to ask!
Style Markdown Component
In this step, we will design the markdown component, open the src/App.css file and add the following code into the file.
body {
height: 100vh;
width: 100%;
overflow: hidden;
}
.App {
display: flex;
width: 100%;
height: 100vh;
align-items: center;
}
.wrapper {
width: 45%;
height: 60%;
margin: 25px;
outline: none;
display: flex;
padding: 20px;
background: #eceeee;
flex-direction: column;
border: 2px solid #ccc;
overflow: hidden;
overflow-y: auto;
}
.head {
width: 100%;
height: 40px;
border-bottom: 1px solid #ddd;
display: flex;
align-items: center;
font-size: 15px;
}
textarea {
padding: 15px;
border: none;
outline: none !important;
width: 96%;
height: 100%;
overflow-x: hidden;
font-size: 17px;
resize: none;
background: #eceeee;
}
.markdown {
padding: 15px;
border: none;
outline: none !important;
width: 96%;
height: 100%;
resize: none;
overflow-x: hidden;
background: #fff;
}Update App Js File
Open the App.js file, in this file you have to import the LiveMarkdown component at the same time declare the component inside the App() function.
import './App.css'
import React from 'react'
import LiveMarkdown from './components/LiveMarkdown'
function App() {
return (
<div>
<LiveMarkdown />
</div>
)
}
export default AppView App in Browser
We are now ready to test the live markdown in React, execute the given command:
npm startYour app will serve on the following URL:
http://localhost:3000
Conclusion
In this guide, we have learned how to pretty simply build a live markdown editor in React js application. We have built a markdown editor in React using the react markdown and react-syntax-highlighter packages.