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(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 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.
- 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 seems to be the most popular choice among the two. But I went ahead with using markdown-it because of mainly two reasons.
- It has 100% CommonMark support
- 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 feedback or suggestions to improve the blog post, please leave them in the comments. I will try to improve the post accordingly.
If this blog post was helpful to you, please consider liking it and sharing it so that it reaches more people.
If you want to get notified as soon as I write a new blog post, you can click on Subscribe button at the top of this page. You can also follow me here at Bhanu Teja P or on twitter at @pbteja1998 to get updated.
Links and References