🥑 A Markdown parser from scratch.
TypePrint is a modern Markdown editor built, designed to provide real-time preview of Markdown content.
CSS
React
TypeScript
I started by making the UI, focusing on getting the text from the textarea to show up in the preview area right away.
Then, I worked on the Markdown features. I began with headings because I already had an idea for that.
Next was bold text, which was trickier. I did some research online about how to make text bold. I saw many functionalities involving regex. However, I didn't use regex because I'm not very familiar with it.
As a result, I ended up trying to figure it out myself. I used a while loop and for loop to make a function that turns text bold in HTML. This function looks for **
or __
and makes the text between them bold.
After that, I made similar functions for italics and other features. The bold text function was the trickiest part, but once that was done, it was easier to make the other functions.
The whole process was about building things step by step, starting with the basics and adding more features as I went.
I got a chance to use while loops and other types of loops a lot. It had been a while since I last used them this much, so it was good practice.
In this project, I worked with dangerouslySetInnerHTML
, which is used for adding HTML directly to a web page. I learned that it needs to be used very carefully because bad scripts could get into the site.
So, I handled it in a way where I created special functions to convert Markdown to HTML. These functions identify the correct parts of Markdown and safely turn them into HTML.
By doing this, I made sure that no dangerous code, like a script that might try to steal information I don't have or cause problems on the site, got through.
It has some issues with nested markdown elements, like a list inside a blockquote or a blockquote inside a list.
To run the project in your local environment, follow these steps:
npm install
or yarn
in the project directory to install the required dependencies.npm run start
or yarn start
to get the project started.https://github.com/mirayatech/TypePrint/assets/71933266/ab7ca47d-7f73-475d-8217-18913159ce28