Learn Alpine.js
Playing
10. Project - Markdown parser

Episodes

0%
Your progress
  • Total: 2h 10m
  • Played: 0m
  • Remaining: 2h 10m
Join or sign in to track your progress

Transcript

00:00
Let's build out a really simple markdown parser with Alpine. We're not going to make this too complicated yet, because if we were to, that would involve looking at watchers, which we're going to look
00:10
at a little bit later on. So we'll return to this example later on in the course just so we can kind of improve it. Now, we're going to go ahead and choose a markdown parser
00:20
for this. I'm going to choose Mark since it's incredibly popular. Works really, really nicely. And we're going to go ahead and copy the URL to the clipboard
00:28
just so we can include it on the page. Of course, if you had some kind of bundling set up, it would be better to pull that in that way. But for now, we'll just pull it in at the top
00:36
so we can access it on the window object. So let's create out our Alpine component. And of course, inside of here, we're going to have some kind of text area
00:45
that we can start to type in. I'm going to go ahead and get rid of the name and the ID in here. And let's go ahead and just set the rows, bump them down to 4.
00:53
Let's check this out real quick. And there we go. So that should be enough to get this working. Now, down here, we want a preview of the markdown.
01:01
So let's go over. And that's going to be where our preview of whatever we type inside of here is going to show. So let's wrap this in a div.
01:10
And let's create a button which will allow us to click and generate a preview. So let's just have this as a normal button. And let's say Preview.
01:19
And then when we click on that, that's going to generate the markdown preview and show it inside of here. So that looks something like that.
01:27
And again, we can just wrap this in a div just to pull it down a little bit. There we go. That will do for now.
01:35
We're not too worried about the styling of this. OK, so inside of xdata, what are we going to have? Well, we're going to have the two-way binding between the text area.
01:44
And that's going to be the actual body itself. So let's go ahead and add in some body in there. And then on here, let's say xmodel body. So that's going to store what's being typed
01:54
into the text area for us. We want another property with the actual markdown itself, which remember is going to end up as HTML. So that is where we're going to bring in xHTML
02:05
to actually show this. And then we probably want some kind of preview method to generate the markdown using the marked library. So let's go and hook this method up to this.
02:18
So onClickPreview. And then down here, we want to show the preview. How do we generate the preview? Well, with marked, very, very simple.
02:28
We're going to set the markdown property that we have here to window marked. And then in here, we just pass in the markdown that we want to go ahead and render.
02:39
In this case, it's the body that we're binding through to the input. So if we come over and just type in hello, hit preview, that should have worked.
02:49
We're not doing anything yet because we're not doing the preview. But what we can now do is go ahead and use xHTML to output the markdown that's been processed.
03:00
Let's do this as xText first of all, just to see what this looks like. So I'm going to say hello. And there we go.
03:06
We get hello in a paragraph tag. Let's go ahead and wrap this in asterisks. And we get strong in there for bold. So you can see it's working.
03:14
But now we just need to switch this over to xHTML. And if I were to do exactly the same thing, there we go. There is our markdown preview. And again, we can just do more.
03:24
So another line here. And you can include images, whatever. It's going to work in exactly the same way. It's just going to parse that markdown and output it,
03:32
preview it inside of the browser. Now, this is a really simple version of a markdown parser. Ideally, what we'd want to happen is as we type, we would see a preview perhaps on the right-hand side here.
03:43
Like I said, that involves slightly more advanced functionality within Alpine. So we'll cover that later. And we'll return back to our markdown parser to improve it.
19 episodes•2 hrs 10 mins

Overview

Alpine.js is a refreshingly minimal JavaScript framework that gives you the reactive nature of Vue and React, but with much more simplicity. This course will get you up to speed on how to use it, with plenty of practical examples along the way.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!