Creating a Markdown Editor with TypeScript

It is hard to deal with content on the internet without encountering markdown. Markdown is a simplified way to create content using plain text that is easily converted into simple HTML. In this chapter, we are going to investigate what it takes to create a parser that will convert a subset of the markup format into HTML content. We will automatically convert relevant tags into the first three header levels, the horizontal rule, and paragraphs.

By the end of this chapter, we will have covered how to create a simple Bootstrap web page and reference the JavaScript generated from our TypeScript, as well as hooking up to a simple event handler. We will also cover how to create classes using simple design patterns and how to design classes with single responsibilities, which are techniques that serve us well as professional developers.

The following topics will be covered in this chapter:

• Creating a Bootstrap page that overrides the Bootstrap styling
• Choosing which tags we are going to use in our markdown
• Defining requirements
• Mapping our markdown tag types to HTML tag types
• Storing our converted markdown in a custom class
• Using the visitor pattern to update our document
• Using the chain-of-responsibility pattern to apply tags
• Hooking this back to our HTML