Create Custom Markdown Parser

Every developer would have come across some sort of a markdown editor atleast once in their life. If you have edited/written a README file in github/gitlab, you most probably would have used a markdown editor without even knowing. Even the editor which I am using to write this article is a markdown editor. So, in this article let's see what it takes to create a markdown editor. I am going to outline exactly the process that I used to create the markdown editor in my website.

This blog post is the first post in the series of blog posts that are related to creating a full-fledged markdown editor with custom embeds for YouTube videos, CodePens, CodeSandBoxes and many others.

Let's get into it then.

We essentially need two things to create a markdown editor.

1. An editor to write our markdown text it.
2. A markdown parser - to convert the markdown text to html.

Let's start with creating a markdown parser.
We need a parser to convert the markdown text to html.
We can create our own parser, but it's time consuming and honestly not necessary. There are already many wonderful open source markdown parsers out there. Let's choose one from them.

My favourite markdown parsers are

• marked
• markdown-it

Marked seems to be the most popular choice among the two. But I went ahead with using markdown-it because of mainly two reasons.

1. It has 100% CommonMark support
2. It has extension and plugins support - which means I can use all the open source plugins that people have created for this parser and I can even create my own plugins if necessary.

Because of the above two reasons, I went ahead with markdown-it parser.

Now, let's setup markdown-it in our project.

First let's install the markdown-it package.

npm install markdown-it

Let's use markdown-it and configure the parser to our needs.

// customMdParser.js
const MarkdownIt = require('markdown-it')

const customMdParser = new MarkdownIt({
    html: false, // do not allow embedding html
    linkify: true, // auto-detect links and convert them to links
    breaks: true, // convert \n to <br>
})

You can configure your parser to however you like. These are the configurations that I like and used. To see the full list of options and presets that are available, checkout the official repo.

Next let's add some plugins to our parser. To add plugins, you need to use .use(Plugin) syntax.

I am going to add two plugins to our parser - one to add the ability to underline text, and the other to make the links open in new tab.

Let's install them to our project

npm install markdown-it-ins
npm install markdown-it-link-attributes

Let's use these plugins and add them to our markdown parser.

// customMdParser.js
...
const insert = require('markdown-it-ins')
const mila = require('markdown-it-link-attributes')
    ...
    ...
    .use(insert) // used for adding underlines to text
    .use(mila, {
      attrs: {
        // For opening all the links in new tab
        target: '_blank',
        rel: 'noopener',
      },
    })

Even though, I just showed you how to add only two plugins, the process is almost same to add any of the markdown-it plugins. You just need to use use(Plugin, options) syntax and you would be good to go.

That is it. Now we now have a basic markdown parser which can convert any markdown text into html.

In the next article, We will add a basic editor which uses our custom parser, converts markdown text into HTML and renders it. We will also see how to add embeds like YouTube embed, CodePen embed etc to our custom markdown parser.

All the code that is written in this article is available on my github at pbteja1998/markdown-editor

If you have any doubts related to this article or anything related to tech or software-engineering in general, drop a comment here or you can message me on twitter at @pbteja1998.

If you want to be notified as soon as I drop the next article, please consider subscribing to my newsletter which is available here or you can follow me at @Bhanu Teja P.

If you like what you see here, chances are that you will also like what I tweet, checkout my twitter profile at @pbteja1998

Links and References

• MarkdownIt
• MarkdownIt - Insert
• Linkify It
• MarkdownIt Link Attributes
• Community MarkdownIt Plugins
• Marked
• Source Code