Build a Node.js Interactive Web-Based Simple Markdown Previewer

Written by

javascriptdebugged

in

Markdown is a lightweight markup language that allows you to format text using a simple syntax. It’s incredibly popular for writing documentation, creating README files, and even composing blog posts. But, writing Markdown can sometimes feel like a guessing game – you type your text, and then you have to preview it separately to see how it will look. Wouldn’t it be great to have a live preview, where you could see the formatted output as you type? That’s exactly what we’re going to build in this tutorial: a simple, interactive Markdown previewer using Node.js.

Why Build a Markdown Previewer?

This project is perfect for beginners and intermediate developers because:

  • It’s Practical: You’ll learn how to convert Markdown to HTML, a fundamental skill for web development.
  • It’s Engaging: You’ll create an interactive tool that provides immediate feedback, making the learning process more enjoyable.
  • It’s Educational: You’ll gain experience with Node.js, front-end technologies (HTML, CSS, JavaScript), and package management.
  • It’s a Great Portfolio Piece: This project showcases your ability to build a functional web application.

By the end of this tutorial, you’ll have a fully functional Markdown previewer that you can use for your own projects and expand upon. Ready to dive in?

Prerequisites

Before we begin, make sure you have the following installed on your system:

  • Node.js and npm (Node Package Manager): You can download these from the official Node.js website (https://nodejs.org/). npm comes bundled with Node.js.
  • A Text Editor or IDE: Such as Visual Studio Code, Sublime Text, or Atom.
  • Basic HTML, CSS, and JavaScript knowledge: While we’ll cover the basics, familiarity with these technologies will be helpful.

Project Setup

Let’s start by creating a new project directory and initializing our Node.js project. Open your terminal or command prompt and run the following commands:

mkdir markdown-previewer
cd markdown-previewer
npm init -y

This will create a new directory called markdown-previewer, navigate into it, and initialize a package.json file with default settings. The package.json file will manage our project dependencies.

Installing Dependencies

We’ll need two main dependencies for this project:

  • marked: A popular Markdown parser that converts Markdown text into HTML.
  • express: A web application framework for Node.js that simplifies creating web servers.

Install these dependencies using npm:

npm install marked express --save

The --save flag ensures that these dependencies are added to our package.json file.

Creating the Server (server.js)

Now, let’s create a file named server.js in the root of your project directory. This file will contain the code for our web server.

Open server.js in your text editor and add the following code:

const express = require('express');
const marked = require('marked');
const fs = require('fs');
const path = require('path');

const app = express();
const port = 3000;

app.use(express.static('public')); // Serve static files from the 'public' directory

app.get('/', (req, res) => {
  fs.readFile(path.join(__dirname, 'public', 'index.html'), 'utf8', (err, data) => {
    if (err) {
      console.error(err);
      return res.status(500).send('Error loading index.html');
    }
    res.send(data);
  });
});

app.get('/api/markdown', (req, res) => {
    const markdownText = req.query.text;
    if (!markdownText) {
        return res.status(400).send('Missing markdown text');
    }

    const html = marked.parse(markdownText);
    res.send(html);
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

Let’s break down this code:

  • Importing Modules: We import express for creating the web server, marked for parsing Markdown, fs for file system operations, and path for working with file paths.
  • Creating the App and Setting the Port: We create an Express app instance and set the port to 3000.
  • Serving Static Files: app.use(express.static('public')); serves static files (HTML, CSS, JavaScript) from a directory named ‘public’. We’ll create this directory in the next step.
  • Handling the Root Route (/): When a user visits the root URL (/), we read the index.html file (which we’ll create later) and send it as the response.
  • Handling the API Route (/api/markdown): This route handles the conversion of Markdown to HTML. It expects a text query parameter containing the Markdown text. It uses marked.parse() to convert the Markdown to HTML and sends the HTML as the response.
  • Starting the Server: app.listen(port, () => { ... }); starts the server and listens for incoming requests on the specified port.

Creating the Front-End (index.html, style.css, script.js)

Now, let’s create the front-end files. Create a new directory named public in your project’s root directory. Inside the public directory, create three files:

  • index.html
  • style.css
  • script.js

index.html

Open index.html in your text editor and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Previewer</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="input-container">
            <textarea id="markdown-input" placeholder="Enter Markdown here..."></textarea>
        </div>
        <div class="preview-container">
            <div id="preview"></div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

This HTML file sets up the basic structure of our Markdown previewer. It includes a textarea for entering Markdown and a div to display the preview.

style.css

Open style.css in your text editor and add the following code:

body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    display: flex;
    width: 80%;
    max-width: 1000px;
    margin: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.input-container {
    flex: 1;
    padding: 20px;
    background-color: #fff;
    border-right: 1px solid #ddd;
}

.preview-container {
    flex: 1;
    padding: 20px;
    background-color: #fff;
}

textarea {
    width: 100%;
    height: 80vh;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    resize: none; /* Prevent resizing */
}

#preview {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    min-height: 80vh;
    overflow-wrap: break-word; /* Prevents long words from breaking the layout */
}

/* Style for Markdown elements */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.5em;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.2em;
}

p {
    margin-bottom: 1em;
    line-height: 1.6;
}

ul, ol {
    margin-bottom: 1em;
    padding-left: 20px;
}

li {
    margin-bottom: 0.5em;
}

code {
    font-family: monospace;
    background-color: #f9f9f9;
    padding: 2px 4px;
    border-radius: 3px;
}

pre {
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto; /* Horizontal scroll for code blocks */
}

blockquote {
    border-left: 5px solid #ccc;
    padding-left: 10px;
    margin: 1em 0;
    color: #666;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

This CSS file styles the layout and appearance of our previewer, making it visually appealing and easy to use. It includes basic styling for Markdown elements like headings, paragraphs, lists, code blocks, and blockquotes.

script.js

Open script.js in your text editor and add the following code:

const markdownInput = document.getElementById('markdown-input');
const preview = document.getElementById('preview');

function updatePreview() {
    const markdownText = markdownInput.value;
    fetch(`/api/markdown?text=${encodeURIComponent(markdownText)}`)
        .then(response => response.text())
        .then(html => {
            preview.innerHTML = html;
        })
        .catch(error => {
            console.error('Error fetching markdown:', error);
            preview.innerHTML = '<p>Error generating preview.</p>';
        });
}

markdownInput.addEventListener('input', updatePreview);

// Initial preview on page load
updatePreview();

This JavaScript file handles the interactive part of the previewer. It does the following:

  • Gets the Elements: It gets references to the textarea (markdownInput) and the preview div (preview) from the HTML.
  • updatePreview Function: This function does the following:
    • Gets the Markdown text from the textarea.
    • Uses fetch to send a request to our server’s /api/markdown endpoint, passing the Markdown text as a query parameter.
    • When the server responds with HTML, it updates the preview div with the HTML.
    • If there’s an error, it logs the error to the console and displays an error message in the preview.
  • Event Listener: It adds an event listener to the textarea. Whenever the user types something (the input event), the updatePreview function is called, updating the preview.
  • Initial Preview: It calls updatePreview() once when the page loads to generate the initial preview.

Running the Application

Now that we have all the files set up, let’s run the application. In your terminal, navigate to the root directory of your project (where server.js is located) and run the following command:

node server.js

This will start the Node.js server. You should see a message in the console indicating that the server is listening on http://localhost:3000.

Open your web browser and go to http://localhost:3000. You should see the Markdown previewer. Type some Markdown in the left-hand textarea, and you should see the formatted HTML in the right-hand preview area.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Server Not Running: Make sure your Node.js server (node server.js) is running in the background. If you close the terminal window where you started the server, the server will stop.
  • Typo in File Paths: Double-check that the file paths in your server.js (e.g., for serving index.html) and index.html (e.g., for including style.css and script.js) are correct.
  • CORS Errors: If you’re getting CORS (Cross-Origin Resource Sharing) errors, it means your browser is blocking requests from the front-end to the back-end. This is unlikely in this simple setup, but if you encounter it, you might need to configure CORS on your server (using middleware like cors).
  • Incorrect Markdown Syntax: Ensure your Markdown syntax is correct. You can use online Markdown editors to test your syntax.
  • Dependencies Not Installed: Make sure you’ve installed the necessary dependencies (marked and express) using npm install.
  • Browser Caching: Sometimes, your browser might cache the old versions of your CSS or JavaScript files. Try hard-refreshing your browser (Ctrl+Shift+R or Cmd+Shift+R) or clearing your browser cache.
  • Error Messages: Check the browser’s developer console (usually opened by pressing F12) for any error messages. These messages can provide valuable clues about what’s going wrong. Also, check the server’s console for any errors.

Enhancements and Next Steps

Here are some ideas for enhancing your Markdown previewer:

  • Syntax Highlighting: Integrate a syntax highlighting library (like Prism.js or highlight.js) to highlight code blocks within your Markdown.
  • Toolbar: Add a toolbar with buttons to insert Markdown formatting (e.g., bold, italic, headings).
  • Real-time Saving: Implement a feature to save the Markdown content to local storage or a backend.
  • Image Uploads: Allow users to upload images and include them in their Markdown.
  • Customization Options: Provide options for users to customize the preview’s appearance (e.g., font size, theme).
  • Error Handling: Improve error handling to provide more informative error messages to the user.
  • Support for More Markdown Features: Expand the Markdown parser to handle more advanced features like tables, footnotes, and diagrams.

Key Takeaways

  • You learned how to set up a Node.js server using Express.js.
  • You used the marked library to convert Markdown to HTML.
  • You created a basic front-end with HTML, CSS, and JavaScript to provide an interactive Markdown preview.
  • You gained experience with handling user input and making API requests.

FAQ

Q: What is Markdown?

A: Markdown is a lightweight markup language with plain text formatting syntax. It’s designed to be easy to read and write, and it can be converted to HTML.

Q: Why use a Markdown previewer?

A: A Markdown previewer provides a real-time view of your formatted Markdown, allowing you to see how your text will look before publishing it. This saves time and helps you catch formatting errors early.

Q: Can I use this previewer for my blog?

A: Yes! You can integrate this previewer into your blog’s content creation process to provide a live preview of your Markdown posts.

Q: How can I deploy this application?

A: You can deploy this application using services like Heroku, Netlify, or Vercel. You’ll need to create a package.json file (if you haven’t already), commit your code to a Git repository, and then follow the deployment instructions provided by your chosen service.

Q: What are some alternative Markdown parsers?

A: Besides marked, other popular Markdown parsers include markdown-it, remarkable, and commonmark.

Building a Markdown previewer is more than just a coding exercise; it’s a journey into the world of web development. You’ve now equipped yourself with the knowledge to create a useful tool, and along the way, you’ve strengthened your understanding of fundamental web technologies. This project is a solid foundation for further exploration, allowing you to build upon your skills and tackle more complex web applications. Embrace the power of Markdown, the simplicity of Node.js, and the joy of creating something useful from scratch.

More posts