Lets Build Live Markdown Editor in 5 minutes with React JS. βš‘πŸš€

Featured on Hashnode

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

I am Savio Martin, A 13-year-old passionate Full Stack Web Developer from India. This is my second post on the Hash node. Today, I'm gonna make something super awesome and in-demand project In Just 5 Minutes.

Let's Build The Live Markdown Editor with React Js. Let's get Started ✌️πŸ”₯

Stuffs Required for making the project

  1. NPM (Node Package Manager)
  2. Node JS
  3. Chrome or any other browser

Project Dependencies

  1. React Markdown
  2. React Syntax Highlighter
  3. Material UI

Lets Start Coding

First of all, let's create a react app by copy-pasting this code in the terminal.

npx create-react-app markdown-editor

Getting Into the project directory

cd markdown-editor/

Let's install all the dependencies using NPM. We are using 3 dependencies for our project mentioned above.

npm i react-markdown react-syntax-highlighter @material-ui/icons

Starting our server

npm start

Now we can see our app running in localhost:3000

welcome-to-react.png

Lets start coding

We are not going to touch some unwanted files in the Src folder as well as Public folder. Editing the App.js and App.css is only necessary. So, let start.⚑

First of all, let go edit the main part of our project that is the src/App.js. For making the project markdown supportive, we are using the npm module React Markdown, Everything will now work expect the code, So, to make it code supportive we are using the npm module React Syntax Highlighter, And our next step is to style our app, For it I am gonna write some code manually and also make use of Material UI.

This is how our App.js should look.

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

function App() {
  const [input, setInput] = useState();
  return (
    <div className="App">
      <div className="cont">
        <div className="nav">
          <VisibilityIcon />
          MARKDOWN
        </div>
        <textarea
          className="textarea"
          value={input}
          autoFocus
          onChange={(e) => setInput(e.target.value)}
        ></textarea>
      </div>

      <div className="cont">
        <div className="nav">
          <VisibilityIcon />
          PREIVEW
        </div>
        <ReactMarkdown
          source={input}
          renderers={{
            code: Component,
          }}
          className="markdown"
        />
      </div>
    </div>
  );
}
const Component = ({ value, language }) => {
  const codeString = "(num) => num + 1";
  return (
    <SyntaxHighlighter language={language ?? null} style={docco}>
      {value ?? ""}
    </SyntaxHighlighter>
  );
};
export default App

Now, for making our app look great we can go write some code manually in App.css

@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
* {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
}
body {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.App {
  display: flex;
  height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.cont {
  width: 45%;
  height: 95%;
  margin: 20px;
  background: #f7fafc;
  outline: none;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
}
.nav {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #ddd;
  display: flex;
  background: #fff;
  align-items: center;
  font-size: 15px;
}
.MuiSvgIcon-root {
  padding: 10px;
  color: #888;
}
textarea {
  padding: 12px;
  border: none;
  outline: none !important;
  width: 96%;
  height: 100%;
  overflow-x: hidden;
  font-size: 18px;
  resize: none;
  background: #f7fafc;
}

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

Hurray, We completed our App under 5 minutes. Now, The app's work is finished and it is to be reviewed. Our App now works perfect and have very good UI. Share it with friends, help me grow.

App Demo βœŒοΈπŸ˜…

screely-1604910483435.png

Full Code is here but try to code on your own and boost up your skills. πŸš€πŸš€

Don’t forget to follow me on Github and Instagram.

Wishing You A Good Day! Thank you! Happy Hacking! πŸ’»βš‘

Mohd Shad Mirza's photo

Cool demo Savio Martin. Did you say "13 year old"? πŸ™€
Lots of respect buddy. Keep learning and building useful projects.

Savio Martin's photo

Thanks a lot, bro, I will keep building more projects

Hrithwik Bharadwaj's photo

Ikr Mohd Shad Mirza. I was sleeping and playing games at that age.

Hrithwik Bharadwaj's photo

Woah this is awesome Savio Martin. More power to you

Edidiong Asikpo's photo

Reading this made me ask myself what I was doing with my life when I was 13 πŸ˜‚.

I love seeing young people strive in tech. Keep up the good work Savio Martin.

Savio Martin's photo

Thanks a lot Edidiong Asikpo ❀️❀️

Favourite Jome's photo

Wow, it worked properly and the React code is so short and powerfully though I don't fully understand what you did.

Great Job Savio Martin πŸ‘

Savio Martin's photo

Thanks a lot, brother, visiting the modules could give you a good understanding of those modules.

Hope it helps

Roger Colque Calcina's photo

nice project ✌

Savio Martin's photo

Thanks, bro πŸ‘

Yatrik Patel's photo

cool project. thanks for sharing.