How to Render Markdown to HTML in TypeScript

How to render Markdown to HTML in TypeScript

Rendering Markdown to HTML is a crucial task in many web applications, allowing developers to generate dynamic content from user input or stored data. Markdown is a lightweight markup language that is easy to read and write, making it a popular choice for formatting text. In this article, we will explore how to render Markdown to HTML in TypeScript, providing a concise and practical guide for developers.

Quick Example

Here is a minimal example that demonstrates how to render Markdown to HTML using the marked library:

import * as marked from 'marked';

const markdownText = '# Hello World!';
const html = marked(markdownText);
console.log(html); // Output: <h1 id="hello-world">Hello World!</h1>

To use this example, install the marked library by running npm install marked or yarn add marked in your terminal.

Step-by-Step Breakdown

Let's break down the code line by line:

import * as marked from 'marked';

We import the marked library, which is a popular Markdown parser for JavaScript. The * as marked syntax imports all exports from the marked module and assigns them to a single object called marked.

const markdownText = '# Hello World!';

We define a string variable markdownText containing the Markdown text to be rendered.

const html = marked(markdownText);

We call the marked function, passing the markdownText variable as an argument. The marked function returns the rendered HTML string, which we assign to the html variable.

console.log(html); // Output: <h1 id="hello-world">Hello World!</h1>

Finally, we log the rendered HTML to the console.

Handling Edge Cases

Here are some common edge cases to consider when rendering Markdown to HTML:

Empty/Null Input

When handling empty or null input, we can add a simple check to return an empty string:

function renderMarkdown(markdownText: string | null): string {
  if (!markdownText) return '';
  return marked(markdownText);
}

Invalid Input

If the input Markdown is invalid, the marked library will throw an error. We can catch and handle this error using a try-catch block:

function renderMarkdown(markdownText: string): string {
  try {
    return marked(markdownText);
  } catch (error) {
    console.error('Error rendering Markdown:', error);
    return '';
  }
}

Large Input

When dealing with large Markdown input, we can use the marked library's built-in streaming API to process the input in chunks:

import { marked } from 'marked';

const markdownText = '...large markdown text...';
const renderer = new marked.Renderer();
const stream = marked(markdownText, { renderer });

stream.on('data', (chunk) => {
  console.log(chunk); // rendered HTML chunk
});

Unicode/Special Characters

The marked library supports Unicode characters out of the box. However, if you need to handle special characters, you can use the marked library's built-in escaping mechanism:

const markdownText = 'Hello & World!';
const html = marked(markdownText, { smartypants: true });
console.log(html); // Output: <p>Hello &amp; World!</p>

Common Mistakes

Here are some common mistakes developers make when rendering Markdown to HTML:

Mistake 1: Forgetting to handle errors

// Wrong
const html = marked(markdownText);

// Correct
try {
  const html = marked(markdownText);
} catch (error) {
  console.error('Error rendering Markdown:', error);
}

Mistake 2: Not sanitizing user input

// Wrong
const userMarkdown = request.body.markdown;
const html = marked(userMarkdown);

// Correct
const userMarkdown = request.body.markdown;
const sanitizedMarkdown = sanitize(userMarkdown); // use a sanitization library
const html = marked(sanitizedMarkdown);

Mistake 3: Not handling edge cases

// Wrong
const html = marked(markdownText);

// Correct
function renderMarkdown(markdownText: string | null): string {
  if (!markdownText) return '';
  try {
    return marked(markdownText);
  } catch (error) {
    console.error('Error rendering Markdown:', error);
    return '';
  }
}

Performance Tips

Here are some performance tips for rendering Markdown to HTML:

Tip 1: Use caching

const cache = {};
function renderMarkdown(markdownText: string): string {
  if (cache[markdownText]) return cache[markdownText];
  const html = marked(markdownText);
  cache[markdownText] = html;
  return html;
}

Tip 2: Use a streaming API

import { marked } from 'marked';

const markdownText = '...large markdown text...';
const renderer = new marked.Renderer();
const stream = marked(markdownText, { renderer });

stream.on('data', (chunk) => {
  console.log(chunk); // rendered HTML chunk
});

Tip 3: Optimize the marked library

const markedOptions = {
  gfm: true,
  tables: true,
  breaks: true,
  pedantic: false,
  sanitize: false,
  smartLists: true,
  smartypants: true,
};
const html = marked(markdownText, markedOptions);

FAQ

Q: What is the best Markdown library for TypeScript?

The marked library is a popular and well-maintained choice for rendering Markdown to HTML in TypeScript.

Q: How do I handle errors when rendering Markdown?

You can use a try-catch block to catch and handle errors when rendering Markdown.

Q: Can I use the marked library with React?

Yes, you can use the marked library with React by rendering the HTML output in a React component.

Q: How do I optimize the performance of Markdown rendering?

You can use caching, streaming APIs, and optimize the marked library options to improve performance.

Q: What is the difference between Markdown and HTML?

Markdown is a lightweight markup language that is easy to read and write, while HTML is a standard markup language for web pages.