Create Custom Markdown Parser

Embed Youtube Videos into Your Markdown Editor

Every developer would have come across some sort of a markdown editor at least 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(@Hashnode Editor) 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 on 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.

An editor to write our markdown text in.

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 1. 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 <be>
})

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-insnpm 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 the same to add any of the markdown-it plugins. You just need to use the 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