FCC Speedrun — Markdown Previewer
Today, I jumped over to the data visualization projects for the Chingu FCC Speedrun Challenge speed run and first on the list was the Markdown Previewer. Basically, the only real requirement for this one is to make an app where you type markdown in one box, and the app renders the markdown in another. The instructions point out that you don’t actually have to write a parser yourself, you can use the npm package marked.
Initially, my thoughts were “wow, this is going to be tough”. My initial thoughts were wrong. Angular 2 has the concept of a pipe built in — and I’ve been using pipes on Linux/Unix forever. Basically, a pipe just accepts some input, transforms it according to some rules, and then returns the transformed data as an output. Markdown previewer with pipes = easy peasy.
First, I scaffolded out the application with the Angular CLI and setup Material, just like I’d been doing for the frontend projects. Then, I npm installed marked to the project and created a pipe to “marked” whatever input was piped into it. Sure enough, marked is easy to use and just plain works with very little fuss. Here’s my pipe:
Basically, it’s just the boilerplate you get by running ng generate pipe mark with three lines added, lines 2, 10 and 11, all of which were totally explained in the marked documentation.
Once I had my pipe ready to roll, it was just a simple matter of setting up a text area for the user to type in and a div for the “marked” version to be displayed. Again, Angular 2 to the rescue — data binding lets you handle this type of use case just by setting up the elements’ properties. I set the ngModel of the text area to grab the data as the user types it, and set the output div’s source as that input piped through marked.
The “nitty gritty” of that is setting [(ngModel)]="input" on the input text area and innerHtml={{input|mark}} on the output div. Basically it makes it so the component’s “input” variable is kept updated whenever the user types in the text area — plus, whenever that input variable changes, it’s piped through the mark pipe and the innerHtml of the output div is updated with the new value.
I know I could have done a whole lot more with this project. For instance I could have setup a service and some number of buttons (for bold, italic, headers and the like) and really done the whole thing up “nice” like an actual text editor. I may do that someday but today I want to cruise on into the next project and, for me, it was enough to complete the use cases for this project.
Notes:
- You can view the source code here
- You can see a live demo on Surge.
My progress in the Speedrun thusfar:
- Tribute Page
- Random Quote Machine
- Timestamp Microservice
- Request Header Microservice
- File Metadata Microservice
- Markdown Previewer — this post
