Adding a CMS to Your Flask Web App Transcripts
Chapter: Advanced markdown
Lecture: Formatted elements and custom HTML

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Let's talk about formatting for a minute. We come back over here to our donate page or any of the pages that use
0:06 this shared content. We see this section here, but really, this kind of supposed to be like an extra thing at the end
0:12 It shouldn't have the same prominence as the rest of the stuff on the page to what we would like to do is just,
0:19 you know, control how this looks a little bit more. Let me give you a bigger example over on talk Python training if we go down
0:26 to our environmental renewable statement. So here's a big, bold boom. Welcome to this part of our site. Type of design says renewable energy.
0:38 Our infrastructure is back with renewable energy. Okay, come down here. We've got this header or h two. Possibly. I'm not sure what size it is,
0:47 but it's green. And then we have standard stuff that would totally fit well within Mark down. We've got texts,
0:54 we've got some bolds. We've got links and things like that. This page is actually built on.
1:00 The same basic idea is that or building for this course as well as a bunch of stuff in our our website over here.
1:08 But this part, this part has not easily done with basic markdown. It requires a bunch of CSS styles,
1:16 nested things and so on. So what we want to do is we'd like to be able to mix in a little tiny bit of HTML just to create thes like
1:25 big moments or format a particular thing in a special way so that it fits within this whole overall mark down rendering story,
1:34 but has a little bit more design or a little bit more power. Like if we want to embed some kind of like YouTube player, how would we do that mark down?
1:43 So what? So let's go and try to make this better. Let's just go and add this here So we'll come over here and say,
1:50 you know, one way we could do this is we could put this into a div and we could say the size So I font size is 70% the way we
2:03 say that. And CSS as we say, it's 700.7 e m. And we want the color to be gray. Okay, something really simple. We could even invent that.
2:13 I just can't get that one over. But we could give some indication that it's meant to be part of this, right? Let's go and see if this made it better,
2:21 we go back to donate now, had to restart the web app just because the way the cashing works here to get this to notice the change. But now that I did,
2:33 this looks cool, Right? So we've got our big header, and then we've got the smaller grey text. Except wait a minute. What is this?
2:40 What has happened here? That's kind of hard to see. Probably certain players are certain devices,
2:45 but it's just left the markdown in there are Link is gone. And what we had that was being converted to a link is just con what happened
2:56 The way that marked down to works and maybe the way mark down in general works
3:01 I'm not entirely sure, but certainly the way mark down to interprets it is it's as this part over here.
3:10 This is fine. We're gonna turn that into convertible markdown to HTML. But anything once you have my proper HTML anything embedded within that.
3:20 So this is inside that Div is now just treated as HTML as well. Okay, so it says, Look, mark down is often we're just going to drop this in the page.
3:30 However, it happens to land safe mode off, basically, is the way that works.
3:36 That's what's happening. So if we want to make that change and make this little tiny bit more styled and more have more features,
3:43 more stylistic, we need to actually write proper HTML. So the way we would do that as we were coming out here,
3:49 we'd have in a trap equals standard HTML. The link goes there, the text goes there.
4:06 We could even do extra stuff like target equals blank to get it onto a new page. Now, if we could save that refresh the had to clear the cache
4:17 go back over to donate. Yes, there it is. All right. So do you see the problem? Ah, here we go. Click on this and it opens into a new tab
4:25 So, just like this page where some of it is HTML. But the majority of the content is actually marked down. That's what we've got going on here.
4:34 This part got rendered as mark down, but this little tiny part that We wanted to control Mawr than standard mark down what
4:42 we had to drop a little tiny sliver of HTML in there. So even though mark down is a little limited,
4:49 this ability to add custom HTML in little tiny segments is how we get back the
4:55 full power of the Web while requiring not requiring most of the people to actually go in right HTML and deal with all of the weirdness is of it.


Talk Python's Mastodon Michael Kennedy's Mastodon