Build a Simple React Markdown Previewer: A Step-by-Step Guide

Written by

learnmodernjavascript

in

In the world of web development, we often need to display content that’s been written in Markdown, a lightweight markup language. Markdown is popular because it’s easy to read and write, making it ideal for documentation, blog posts, and more. However, browsers don’t natively understand Markdown. This is where a Markdown previewer comes in handy. It takes Markdown text as input and renders it as HTML, allowing users to see how their Markdown will look when published.

This tutorial will guide you through building a simple React Markdown previewer. We’ll cover everything from setting up your React project to implementing the Markdown parsing and displaying the rendered HTML. By the end, you’ll have a functional previewer that you can use for your own projects or extend with more features.

Why Build a Markdown Previewer?

Markdown previewers are incredibly useful for several reasons:

  • Real-time Feedback: They provide instant feedback on how your Markdown content will appear, helping you catch formatting errors early.
  • Improved Workflow: They streamline the content creation process by allowing you to write and preview your Markdown in the same place.
  • Learning Tool: They’re a great way to learn Markdown syntax by seeing how different elements are rendered.
  • Accessibility: They can help ensure your content is accessible by allowing you to preview how it will look to users with different needs.

Whether you’re a blogger, a developer writing documentation, or just someone who enjoys writing in Markdown, a previewer can significantly improve your workflow.

Prerequisites

Before we dive in, make sure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing your project’s dependencies.
  • A basic understanding of React: You should be familiar with components, JSX, state, and props.
  • A code editor: Choose your favorite (VS Code, Sublime Text, Atom, etc.).

Setting Up Your React Project

Let’s start by creating a new React project. Open your terminal and run the following command:

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

This command sets up a new React project with all the necessary files and dependencies. Once the project is created, navigate into the project directory using cd react-markdown-previewer.

Installing Dependencies

We’ll need a library to parse the Markdown. A popular choice is marked, which is a fast and feature-rich Markdown parser. Install it using npm:

npm install marked

Alternatively, if you’re using yarn:

yarn add marked

Building the Markdown Previewer Component

Now, let’s create the core component for our previewer. Open src/App.js and replace its contents with the following code:

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

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

  const handleChange = (event) => {
    setMarkdown(event.target.value);
  };

  const html = marked.parse(markdown);

  return (
    <div className="container">
      <h2>Markdown Previewer</h2>
      <div className="input-container">
        <label htmlFor="editor">Enter Markdown:</label>
        <textarea
          id="editor"
          className="editor"
          value={markdown}
          onChange={handleChange}
        />
      </div>
      <div className="preview-container">
        <h3>Preview:</h3>
        <div
          id="preview"
          className="preview"
          dangerouslySetInnerHTML={{ __html: html }}
        />
      </div>
    </div>
  );
}

export default App;

Let’s break down this code:

  • Import Statements: We import useState from React, the marked library, and our stylesheet ./App.css.
  • State: We use the useState hook to manage the markdown state, which holds the Markdown text entered by the user. It is initialized as an empty string.
  • handleChange Function: This function is triggered whenever the user types in the textarea. It updates the markdown state with the new value.
  • marked.parse(): This is where the magic happens. We use the marked.parse() function to convert the Markdown text into HTML.
  • JSX Structure: The component returns JSX that renders the following:
    • A container div with the class “container”.
    • An h2 heading for the title.
    • An input container div with a label and a textarea where the user enters Markdown.
    • A preview container div with an h3 heading and a div with the id “preview” that displays the rendered HTML. The dangerouslySetInnerHTML prop is used to inject the HTML into the preview div.

Styling the Previewer

To make the previewer look good, let’s add some CSS. Open src/App.css and add the following styles:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  font-family: sans-serif;
}

.input-container {
  width: 80%;
  margin-bottom: 20px;
}

.editor {
  width: 100%;
  height: 200px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

.preview-container {
  width: 80%;
}

.preview {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  background-color: #f9f9f9;
}

/* Add more styles as needed for headings, paragraphs, etc. */

This CSS provides basic styling for the layout, input area, and preview area. You can customize these styles to match your preferred design. For example, adding styles for headings (h1, h2, etc.), paragraphs (p), and other Markdown elements will improve the readability of the preview.

Running the Application

Now, start the development server by running the following command in your terminal:

npm start

This will open your application in your browser (usually at http://localhost:3000). You should see the Markdown previewer with a text area and a preview area. Start typing Markdown in the text area, and the preview area will update in real-time.

Adding More Features

Our basic previewer works, but we can enhance it with more features. Here are some ideas:

  • Toolbar: Add a toolbar with buttons to insert Markdown elements like bold, italic, headings, etc.
  • Live Preview: Update the preview as the user types, without waiting for a key press or a change event. (We already have this!)
  • Syntax Highlighting: Use a library like highlight.js to add syntax highlighting to code blocks in your Markdown.
  • Custom Styles: Allow users to customize the styles of the preview.
  • Markdown Editor Integration: Integrate with a Markdown editor library for a richer editing experience.

Common Mistakes and How to Fix Them

Here are some common issues you might encounter and how to solve them:

  • Markdown Not Rendering: Double-check that you’ve installed the marked library correctly and that you’re importing it and calling marked.parse(). Make sure you’re using the correct syntax for Markdown.
  • HTML Injection Security: Be careful when using dangerouslySetInnerHTML. Only use it with trusted input (in this case, the output of the marked library). Always sanitize user input if you allow users to enter Markdown directly.
  • Styling Issues: Ensure your CSS is correctly linked to your component. Check for typos in your CSS class names and make sure your CSS selectors are specific enough. Use your browser’s developer tools to inspect the elements and see if your styles are being applied.
  • Performance Issues: For very large Markdown documents, consider optimizing the parsing process. You might use techniques like memoization or debouncing to improve performance.

Step-by-Step Instructions: Recap

Let’s summarize the steps involved in building this simple Markdown previewer:

  1. Create a React App: Use create-react-app to set up a new React project.
  2. Install marked: Install the Markdown parsing library using npm or yarn.
  3. Create the Component: Create a React component (e.g., App.js) with a textarea for Markdown input and a div to display the rendered HTML.
  4. Handle Input: Use the useState hook to manage the Markdown input and update the state when the user types.
  5. Parse Markdown: Use marked.parse() to convert the Markdown to HTML.
  6. Display the Preview: Use dangerouslySetInnerHTML to display the HTML in the preview area.
  7. Add Styling: Add CSS to style the input area, preview area, and other elements.
  8. Run the App: Start the development server and test your previewer.
  9. Extend and Customize: Add more features and customize the styling to meet your needs.

Key Takeaways

  • You’ve learned how to integrate a Markdown parser (marked) into a React application.
  • You’ve seen how to use the useState hook to manage user input and update the preview in real-time.
  • You’ve understood the importance of HTML injection security and how to use dangerouslySetInnerHTML safely.
  • You’ve gained a practical understanding of building a functional and useful component.

FAQ

  1. Can I use a different Markdown parser? Yes, you can. There are other Markdown parsing libraries available, such as markdown-it. The basic process of integrating them into your React component would be similar. Just make sure to install the library and use its parsing functions instead of marked.parse().
  2. How do I add syntax highlighting? You can use a library like highlight.js. Install the library, import it into your component, and then use its functions to highlight code blocks in your HTML before rendering them in the preview. You might need to configure marked to add the appropriate classes to code blocks.
  3. How can I allow users to upload Markdown files? You would need to add an input element of type “file”. When the user selects a file, you can read its content using the FileReader API. Then, you can pass the file content to your setMarkdown state to render it in the preview.
  4. Is it possible to make the preview area editable? Yes, but it’s more complex. You would need to use a rich text editor component that supports Markdown or implement your own custom editor with features like a Markdown-to-HTML converter and real-time preview.
  5. How do I deploy this app? You can deploy your React app to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide simple deployment processes for static websites, and React apps can be easily built and deployed as static assets.

Building a Markdown previewer is a great way to learn about React, Markdown, and how to integrate third-party libraries. This project provides a solid foundation for more complex projects. By understanding the fundamentals and the steps to render Markdown, you’re well-equipped to create more sophisticated applications that handle and display formatted text. The ability to process and display Markdown is a valuable skill for any web developer, opening up possibilities for building content-rich applications that are easy to manage and maintain.

More posts