Adding a CMS to Your Flask Web App Transcripts
Chapter: Markdown as our format
Lecture: Markdown to HTML
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Well, here's our beautiful HelpAge we wrote it marked down, and it got thrown out and completely scrambled by hte email by the browser.
0:09
And so what we need to do is convert this over to HTML now in Python this could be really easy or really hard. If you try to do this yourself,
0:19
that would be crazy. There's already a ton of libraries that we can go and just install, and they automatically already know how to do this.
0:26
And they're built to do this. So let's go over here and just add a new requirement. And when ad mark down to,
0:35
there's a lot of different libraries that we can have four Python that work with mark down. But this is the one I want to use and let's just make sure
0:43
that it's installed. So say, Pip, install, dash our requirements for the development version. Yeah, no, it was not. So it installed mark down to force.
0:55
Well, now we can start using marked down, and it will be here recorded So other systems, Johnny's it. And then if we just go over here to our CMS,
1:05
we look remember I said we're going to store our data and not just past page
1:09
dot contents, but we're going to store it sort of store this variable called HTML here. And this is why what we need to do.
1:17
Instead of just taking the raw contents which are marked down, we want to transform them over into HTML.
1:22
So let's go and add a little function and down here invert to mark down. All right, it's gonna take some markdown text and it is going to return a
1:34
string, which is going to be the HTML. So let's just go and call that and pass the content tour. All right, so then down here,
1:46
how do we make this happen? What do we got to dio? Well, using Mark down to is pretty easy to say.
1:51
HTML equals Mark down to and PyCharm needs to import that at the top for us. And we just say mark down and we give it the text.
2:03
And for the moment, let's say safe mode is true and we'll just return our HTML now by germs saying this could be a static function.
2:13
I kind of don't want it to be static. Someone told Toe not bugging me about it. Save this. Should auto restart,
2:19
it does. Let's just go refresh that page and see what we got. Right? Fingers crossed and look at that man. That looks pretty good, doesn't it?
2:30
All right, well, we now have our proper bulleted lists. We have our bold sections that we put with our double stars.
2:37
We have our code looking pieces we did with our back slashes. We have our h one or H to do with their double hashes and so on So yeah, look at this.
2:47
This is really, really good. Some of the styles were already in our CSS like the style to make code look pink. That was already in our CSS.
2:56
But for the most part, this is just raw HTML generated by are marked out until we go look at the page source. Not very pretty, but there it is.
3:08
That's all the stuff generated by our mark down that we wrote. And of course, if you go look at it over here,
3:15
it's still written like this so we could come over and say, maybe we want to say, put little single star on both ends of you
3:24
to make it italicized And if we go get help again, do you have buy and sell right? We can edit in, mark down,
3:32
but then we get this rich HTML rendering that we needed. So that's beautiful. That's exactly what we want.
3:39
Now there's two things to issues I guess that I want to address. The first one is performance. So what we're doing here looks beautiful and we click
3:48
on help. It looks like this. You know, it looks like the site is really fast as I'm clicking around,
3:53
but let's look more carefully if I go and say over the network, have and just look at hte email and we click on Let's Click on Account notice
4:05
that we're getting this in super quick three milliseconds clicking a few times 33 We go over to the admin section that takes five milliseconds.
4:14
We go to the home page second time for the first time, a tiny bit slower, even with all the database queries and all the stuff that's
4:21
happening over here, these are quite quick right, 10 milliseconds and so on. It's going to help 53 minutes a little bit more
4:30
Where's the time being spent is being spent converting to mark out. But if you look, if you look over here,
4:37
that's really not that much. It's like a page and a half. What if we had more? But if we had just a little bit more so
4:43
let's go and or to give it more data to here were just create a string that has an extra new line on the end. But let's multiply that by 20.
4:52
So instead of having a page and a half a continent, let's have 15 pages of content.
4:57
Okay, if we rerun this like over here and requests the help page again, notice the scroll bar is way longer.
5:08
But more importantly, notice up here watches. I click. See it spinning computing, computing, computing Are HelpAge our admin page still super quick?
5:20
All right? Or are our donate page Our campaigns, like everything other than help is fast, right? But help Brian me grind,
5:26
grind very slow. And if we look at get the actual numbers, it's a new it's unacceptably slow. Look at this Who it took 860 milliseconds.
5:38
That is a really long time now, You know, if you go visit a site, it might not feel about that bad that it gets back to you this quickly in
5:46
practice, like to me, that still feels super slow. But maybe the sites busy, who knows? But in practice, if this is how slow the server is,
5:53
there's a whole lot of other stuff going on, making it even feel more slow. And if you have a lot of users,
5:58
it's gonna be really hard for the site to support a lot of users. Because it for over here and the pages were taking for milliseconds,
6:05
right? It's You could handle a ton of request for second. Well, over here, this one not so much like one request a second.
6:12
Basically, that's probably not good for a lot of sites. Moreover, you wanna have a fast experience for users and faster sites rank higher in
6:21
Google as well. So there's all sorts of reasons this is not okay. How we gonna fix it? Well,
6:26
we're gonna fix that with a little bit of help from another library later on, so I'm not going to try to solve it here in this chapter,
6:33
but we're gonna come back in and get to it soon. Now let me Just leave this here for you. So you have it to play with it in case you want.
6:40
But let's roll us back to the normal working Rusian. There we go. Now we got our our normal length scroll bar back on. Got our stuff. All right,
6:50
so that was is you one of two issues that we caused for ourselves when converted to mark down the other is Well,
6:58
our donate page doesn't look so awesome anymore. What do you think? Nice.
7:02
Well, the safe mode said somebody tried to put some script in where markdown was expected. And so we took it out,
7:10
right? But it didn't Just taking it out there like, I want to be clear. Just so you know,
7:14
we removed all this. HTML is probably not gonna look like you expected. So the next thing to dio real quickly will just to be fixed that now we
7:23
could do things with turning safe mud off, but we're not ready for that. So let's just go and actually turn this into markdown.
7:29
Super easy to do. Actually, though, all that stuff is kind of done on its own paragraphs or just separate like that if we want. Ah,
7:39
hyperlink. We just take the text that goes in there and for that in the rackets. And then put the destination Neural in Privacy's like that.
7:53
Actually, this should be all we have to do to fix our page. Let's check out. Donate Now who are site?
7:59
Looks like it's working again. Let's click on that, Steve. It does. Yes. We could donate your the PSF awesome.
8:06
Well, there it is. We've now converted to mark down and our pages. Let's go. Just double check these other two pages here.
8:15
Company history and getting help with Pipi I not that one. The company history and our team of those to those look good,
8:22
right? They actually didn't really have any HTML. So they're fine as well to all four of our pages that are part of our
8:28
CMS are now working with mark down,