Advanced TypeScript Programming Projects
上QQ阅读APP看书,第一时间看更新

Writing a simple markdown parser

When I was thinking about the project that we are going to tackle in this chapter, I had a clear objective in mind. While we are writing this code, we are going to try out things such as patterns and good object-oriented (OO) practices, such as classes having a single responsibility. If we can apply these techniques right from the start, we will soon get into the habit of using them and this will translate into useful development skills.

As professional developers, before we write any code, we should gather the requirements that we are going to use and ensure that we are making no assumptions about what our application will do. We may think that we know what we want our application to do, but if we make a list of our requirements, we'll make sure that we understand everything that we are meant to deliver and we'll come up with a handy checklist to tick features off as we complete them.

So, here is my list:

  • We are going to create an application to parse markdown
  • The user will type into a text area
  • Every time the text area changes, we will parse the entire document again
  • We will break the document down based on where the user presses the Enter key
  • The opening characters will determine whether or not the line is markdown
  • Entering # followed by a space is replaced by an H1 heading
  • Entering ## followed by a space is replaced by an H2 heading
  • Entering ### followed by a space is replaced by an H3 heading
  • Entering --- is replaced by a horizontal rule
  • If the line does not start with markdown, the line is treated as a paragraph
  • The resulting HTML will be displayed in a label
  • If the content in the markdown text area is empty, the label will contain an empty paragraph
  • The layout will be done in Bootstrap and the content will stretch to 100% height

Given those requirements, we have a good idea of what we are going to deliver, so we are starting off by creating our UI.