Markdown Viewer

Markdown has become the go-to syntax for writing lightweight and easily readable formatted text. Whether documenting a project, writing a blog post, or creating content for a web application, Markdown offers simplicity and flexibility. However, when it comes to displaying this content on the web, you need to convert it into HTML—a format browsers understand. In this article, we'll explore how to transform Markdown into HTML using JavaScript and npm. We'll leverage the power of the `marked` package, a fast and robust Markdown parser. By the end of this guide, you'll be able to seamlessly convert Markdown content into HTML, whether you're building a web application or automating content processing. Let's dive in! ## Prerequisites Before we begin, make sure you have the following: 1. **Node.js and npm installed**: Node.js allows you to run JavaScript outside a browser, and npm (Node Package Manager) is used to install packages like `marked`. If you don't have them installed, download them from nodejs.org and follow the installation steps. 2. **A basic understanding of JavaScript**: You should know how to write and run simple JavaScript code. 3. **A code editor**: Any text editor will work, but something like Visual Studio Code makes writing and managing code easier. ## Installing the marked package Once you have created a folder, now we need to install `marked` package using npm. ```bash npm init -y npm install marked ``` ## Setting Up the Project To start, let's create a simple project that reads a Markdown file and converts it into HTML using JavaScript. ### Step 1: Create a Sample Markdown File Create a file named `example.md`: ```markdown ### Markdown to HTML - This is a markdown file example. ```javascript function sum(int a, int b) { return a + b; } ``` ### Step 2: Script using Javascript Create a file named `render-markdown.js`: ```javascript const fs = require('fs'); const { marked } = require('marked'); // Use named import const http = require('http'); const path = require('path'); // Path to your markdown file const markdownFilePath = path.join(__dirname, 'example.md'); // Function to convert Markdown to HTML function renderMarkdownToHtml(markdownFilePath) { const markdown = fs.readFileSync(markdownFilePath, 'utf8'); return marked(markdown); // Call the `marked` function } // Create an HTTP server to serve the HTML http.createServer((req, res) => { if (req.url === '/') { const htmlContent = renderMarkdownToHtml(markdownFilePath); res.writeHead(200, { 'Content-Type': 'text/html' }); res.end(` Markdown Viewer

${htmlContent}

`); } else { res.writeHead(404, { 'Content-Type': 'text/plain' }); res.end('404 Not Found'); } }).listen(3000, () => { console.log('Server is listening on port 3000'); }); ``` ### Step 3: Run the Script Open your terminal and navigate to the folder containing `example.md` and `render-markdown.js`. Run the following command to start the server: ```bash node render-markdown.js ``` Open a browser and go to `http://localhost:3000`. You'll see the content of `example.md` rendered as HTML! > **Note:** In this example, both `example.md` and `render-markdown.js` are in the same folder. If your files are organized differently, update the path in `markdownFilePath` accordingly. ## Surprise! Render Markdown with Just One Line Here's a simpler way to render Markdown files directly in your browser without writing a server script. With the `zero-md` web component, you can display a Markdown file with a single HTML tag! ```html Markdown Viewer with zero-md ``` ### How It Works 1. The `` tag fetches the specified Markdown file (`example.md`) and automatically converts it into HTML. 2. It's perfect for static sites where you want to render Markdown quickly without running JavaScript or setting up a server. ## Conclusion Converting Markdown to HTML has always been challenging! Whether you're building a robust server-side application with `marked` or taking advantage of the simplicity of `` for static rendering, you now have the tools to display Markdown beautifully on the web. For dynamic and programmatic use, `marked` is a powerful choice. On the other hand, `` offers a seamless, no-code solution for quick rendering. Pick the method that best suits your project and bring your Markdown content to life with ease!

All Posts

How to Transform Markdown into HTML Using JavaScript and npm