Creating Your Own Markdown Parser
Have you ever wondered what it would be like to implement your project idea in reality? Here’s what mine looks like!
I learned Markdown while documenting my projects on GitHub and I realized it was an amazing markup language. I got curious about how one might build their own markdown parser and that’s when I started this project!
Here is the basic syntax of markdown language.
What is a parser?
A parser is a compiler or interpreter component that breaks data into smaller elements for easy translation into another language.
Firstly, why did I use Vue.js to build this project? Vue.js is a phenomenal templating engine.
Now, What is a template engine?
You can use static template files in your application with the help of a template engine. The template engine replaces variables in a template file with actual values during runtime. It uses double curly braces {{ }} to bind data to your template and converts it into an HTML file that is given to the client.
Application Preview
Basic File Structure
You can easily set up a basic project following this documentation !
markdown
├── src
| └── assets
| └── style.css
| └── components
| | └── HelloWorld.vue
| └── directives
| | └── markdown.js
| └── App.vue
| └── main.js
├── node_modules
├── public
├── .gitignore
├── package.json
├── package-lock.json
├── babel.config.js
└── README.mdWhat are the basic Markdown rules covered in this project?
|-------------------------------------|---------------------------|
| Markdown |HTML |
|-------------------------------------|---------------------------|
|# Heading level 1 |<h1>Heading level 1</h1> |
|## Heading level 2 |<h2>Heading level 2</h2> |
|### Heading level 3 |<h3>Heading level 3</h3> |
|#### Heading level 4 |<h4>Heading level 4</h4> |
|##### Heading level 5 |<h5>Heading level 5</h5> |
|###### Heading level 6 |<h6>Heading level 6</h6> |
|__bold text__ |<strong>bold text</strong> |
|**bold text** |<strong>bold text</strong> |
|_italic text_ |<em>italic text</em> |
|*italic text* |<em>italic text</em> |
|`word` |<code>word</code> |
|Unorderered list with "+", "*" | |
| + First item | • First item |
| + Second item | • Second item |
|Link [Guide](https://www.google.com) | Guide |
|-----------------------------------------------------------------|Project Set-Up
Our first step would be to create a template in App.Vue.Vue v-model is a directive that provides two-way data binding between an input and form data or between two components.
So, here v-model binds our input data, parses it with the help of directives.js.
Here, it binds the data {{markdown}} from the input component to the output component using our key.
You can add your CSS either to <style scoped> or in a separate CSS file!
This is a very basic and minimal style.css file. Here’s how you can get creative and make your project look appealing!
It's time to make the directives! I highly recommend the use of regex101 to test your regex expressions with test strings. You can read about regex over here.
At last, we need to apply the rules we just made with regex to the template passed. The rules parse the template and innerHTML sets the HTML contents of an element on a web page.
And finally, Don’t forget to import the directives and style.css in main.js, which is the main rendering file of the app.
Here’s what your main.js should look like!
Now run the following commands assuming you are in MarkdownParser directory or simply follow this documentation:
> cd markdown
> npm run serveThe app would be running on your localhost, you can Ctrl + Click on the link to open the app on your browser.
Viola! You just created your very own Markdown Parser!
Future Scope
I plan on working more on the rules and increasing the functionality of the directives in the future.
I learned so much about regex, javascript, and Vue while building this project. I hope this blog helped you too!
Feel free to contribute to this project following these guidelines!!
Want to Connect?Here’s my LinkedIn handle.
