Markdown, a lightweight markup language with plain text formatting syntax, has gained immense popularity due to its ease of use and broad compatibility. This article will guide you on how to parse and generate markdown documents in Javascript. We chiefly use a powerful Javascript package known as Markdown-it for our examples.

Preliminary Concepts

Markdown consists of a collection of symbols and characters that represent tags in HTML. For instance, to make a word bold in markdown, you can wrap it inside double asterisks or double underscores as **bold word** or __bold word__. This markdown is equivalent to the following HTML: <strong>bold word</strong>.

Markdown makes documentation simpler. Instead of manually crafting HTML tags, you can use the easy-to-remember markdown syntax. Most importantly, you can read markdown documents without any rendering, making it extremely accessible.

Markdown in Javascript

In JavaScript, there are several libraries available to parse markdown text and generate HTML outputs. Our focus will be on the popular markdown-it library, which parses markdown text in JavaScript and outputs HTML text.

To use markdown-it, you will first need to install it using npm:

npm install markdown-it --save

Examples with Markdown-it

Let’s work on real-life examples of using markdown-it. This section covers the core implementation details.

Basic Usage

After installing markdown-it, require it in your file and create an instance of markdown-it:

const MarkdownIt = require('markdown-it')
const md = new MarkdownIt()

Now, to convert any markdown string to HTML, just pass the markdown string to the instance’s .render method:

const markdownText = '**Hello, world!**'
const htmlText = md.render(markdownText)
console.log(htmlText)

The output should be:

<p><strong>Hello, world!</strong></p>

Advanced Usage

markdown-it provides several options for configuring the markdown parser. For example, you can add HTML support (disabled by default) by passing an options object:

const md = new MarkdownIt({html: true})

Now, the parser will pass through any HTML tags included in the markdown text:

const markdownText = '<span style="color:red">**Hello, world!**</span>'
const htmlText = md.render(markdownText)
console.log(htmlText)

The output should be:

<p><span style="color:red"><strong>Hello, world!</strong></span></p>

Adding Plugins to markdown-it

markdown-it supports plugins, allowing you to extend its features. A commonly used plugin is markdown-it-anchor, which adds anchor headings to the generated HTML. To install and use it:

npm install markdown-it-anchor --save

Then, require and use it in your file:

const MarkdownIt = require('markdown-it')
const markdownItAnchor = require('markdown-it-anchor')

const md = new MarkdownIt().use(markdownItAnchor)

const markdownText = '# Hello, world!'
const htmlText = md.render(markdownText)
console.log(htmlText)

The output should be:

<h1 id="hello-world">Hello, world!</h1>

Conclusion

In this blog post, we explored how to incorporate and use markdown parsing in Javascript using markdown-it. This allows for simple markdown-to-HTML conversions, making the generation of formatted text effortless. With its ability to accept plugins, markdown-it is highly versatile and can tackle any markdown-related tasks.

Remember, the power of markdown is to write and read documents easily, and JavaScript libraries like markdown-it make it possible to use this power anywhere on the web. Enjoy writing!