Project - Markdown parser: Learn Alpine.js

Learn Alpine.js

Sign in Get started

Playing

10. Project - Markdown parser

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.

Episode summary

In this episode, we're putting together a simple Markdown parser using Alpine.js. Don't worry, we're keeping things straightforward for now—there's no advanced stuff yet, like watchers or live previewing as you type. We'll come back and improve this project later in the course when we cover more advanced concepts.

We start by picking out a popular Markdown parsing library: marked. We just grab its CDN link so we can use it quickly on the page. After that, we create our Alpine component, which mainly has a textarea for typing in Markdown and a button that lets us generate a preview.

The way it works is: you type your Markdown content into the textarea, click the 'Preview' button, and see the rendered HTML version of your input appear below. We're using Alpine's data binding for the textarea input, and a method to turn your raw Markdown into HTML with the marked library when the preview button is pressed. For now, the parsing is triggered manually—no live updating yet.

You'll see the output first using Alpine's x-text, and then we'll switch to x-html so you can render actual HTML from your Markdown. We'll quickly play around with the parser, confirming that Markdown constructs like bold or multiple lines work as you'd expect.

This is just the beginning—a basic, button-triggered Markdown preview. Down the line, we'll revisit this and make it update live as you type, using more of Alpine's features!

Episode discussion

No comments, yet. Be the first!