Approach 2 Framework/Library Integration (e.g., React)

Approach 1: Vanilla JavaScript Implementation

Using a framework like React simplifies the development process by providing reusable components, state management, and a virtual DOM for efficient rendering. You can create separate components for the input text and preview container, making the code more modular and maintainable.

Steps to Build a MarkDown Previewer using ReactJS:

Step 1: Create a React app using the following command.

npx create-react-app markdown-previewer
cd markdown-previewer

Step 2: Install the react-markdown library to parse and render Markdown content.

npm install react-markdown

Step 3: Create two components: Editor for inputting Markdown content and Previewer for displaying the parsed Markdown.

Example: Below is an example of MarkDown Previewer using ReactJS.

CSS

.app {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

textarea {
  width: 45%;
  height: 80vh;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
}

.preview {
  width: 45%;
  height: 80vh;
  padding: 10px;
  border: 1px solid #ccc;
  overflow-y: auto;
}

JavaScript

// Create the main App component to render 
// both the Editor and Previewer components.
// App.js

import React, { useState } from 'react';
import Editor from './Editor';
import Previewer from './Previewer';
import './App.css';

function App() {
  const [markdown, setMarkdown] = useState('');

  return (
    <div className="app">
      <Editor markdown={markdown} setMarkdown={setMarkdown} />
      <Previewer markdown={markdown} />
    </div>
  );
}

export default App;

JavaScript

//Editor.js

import React from 'react';

function Editor({ markdown, setMarkdown }) {
  return (
    <textarea
      value={markdown}
      onChange={(e) => setMarkdown(e.target.value)}
      placeholder="Enter Markdown here..."
    />
  );
}

export default Editor;

JavaScript

// Previewer.js

import React from 'react';
import ReactMarkdown from 'react-markdown';

function Previewer({ markdown }) {
  return (
    <div>
      <h2>Preview</h2>
      <div className="preview">
        <ReactMarkdown>{markdown}</ReactMarkdown>
      </div>
    </div>
  );
}

export default Previewer;

Start your app using the following command:

npm start

Output:

Markdown Previewer Using React

Build a Markdown Previewer

The Markdown Previewer is a simple web application that allows users to input Markdown syntax and preview the rendered HTML output in real-time. This article will cover the implementation of a Markdown Previewer using HTML, CSS, and JavaScript.Markdown is a lightweight markup language that is commonly used for formatting text on the web.

Markdown is a lightweight markup language with plain-text formatting syntax. Common Markdown syntax includes headings, links, inline code, code blocks, lists, blockquotes, images, and emphasis (bold and italic text).
The Markdown syntax consists of simple formatting rules such as using # for headers, * or _ for italics, ** or __ for bold, and so on.
# Hello, Markdown!’

Table of Content

Vanilla JavaScript Implementation
Framework/Library Integration (e.g., React):

Tags:

#HTML #ReactJS #Web Technologies

Approach 1: Vanilla JavaScript Implementation

Approach 2 Framework/Library Integration (e.g., React)

Steps to Build a MarkDown Previewer using ReactJS:

Build a Markdown Previewer

Similar Reads

Contact Us