Episodes
01. Introduction
47s
0%
02. Installing and x-data
3m 57s
0%
03. Visibility
5m 21s
0%
04. Model
7m 9s
0%
05. Project - Image finder
6m 35s
0%
06. More inputs
10m 25s
0%
07. Attribute binding
7m 46s
0%
08. Attribute binding examples
13m 22s
0%
09. Text and HTML
3m 3s
0%
10. Project - Markdown parser
3m 53s
0%
11. Looping
10m 59s
0%
12. x-show vs x-if
5m 57s
0%
13. Event handling
12m 2s
0%
14. Project - Modal with custom events
10m 35s
0%
15. $el
4m 45s
0%
16. Watching
5m 13s
0%
17. Project - Hackernews search
8m 10s
0%
18. Refs
7m 45s
0%
19. Cloak
2m 46s
0%
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•2 years ago
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
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.