Finishing the Markdown Preview

When we left off, we had confirmed that our div that we call 0:00 Preview was loading correctly because we added this Hi, Mom flag. 0:04 So let's go ahead and delete that placeholder text. 0:09 And Save fieldset.html. 0:12 Let's just close it. 0:15 We don't need it anymore. 0:17 Okay. 0:19 Now, in order to create our markdown preview, 0:20 we're going to use a JavaScript library called markdown-js. 0:22 So I'm just gonna go to the GitHub repo for markdown-js. 0:26 And if you scroll down, you see all the documentation and 0:29 the installation instructions. 0:33 We are using the browser version of markdown-js. 0:36 So we'll go to the releases page. 0:39 And then, if you were downloading this yourself, you would want the most recent, 0:42 non-beta version. 0:46 So here we've got a beta version, but if we scroll down, 0:48 we get this non-beta version. 0:52 Now you would want to download the source code, 0:54 and one of the files that you would get as part of 0:59 the source code would be called markdown.js. 1:04 Now you would save that file up here in assets > js > vendor. 1:08 And I've already included it for you. 1:14 So you can see it here. 1:16 This is markdown-js. 1:17 This what you would be downloading. 1:18 Since this is not a JavaScript class or a CSS class, I've also included this file 1:21 called preview.css where I've added a little bit of CSS for our preview div, 1:27 for that markdown preview, that kind of just indents it to set it apart. 1:33 And then I've added this preview.js file that includes the JavaScript that will 1:38 actually put some text into that preview box. 1:42 Now, I am not a great JavaScript developer, so 1:47 there are probably ways to improve this code, but I'll leave that to you. 1:49 But basically, we have this editor function that 1:54 converts the markdown syntax into HTML so we can render it in the browser. 1:57 Then, we have this document ready function 2:03 that takes the markdown text in the text area with the ID, 2:06 id_description, and puts it in the div with the ID preview. 2:11 Now, if you start your server and test it out by refreshing this page, 2:17 you'll see that nothing has happened yet. 2:21 And that's because we need to tell our course admin class that we want to use 2:24 this JavaScript and this CSS. 2:28 So to do that, we need to go back to admin.py. 2:32 I'm just gonna close these other files here so we won't be distracted. 2:37 All right, so here in course admin, we're going to create a media class, 2:42 and inside that class we'll have a js attribute and 2:49 that will be set equal to a tuple. 2:54 And then inside the tuple, 2:57 we just pass the paths to the different JavaScript files that we want to use. 2:59 So in this case, we wanna use markdown.css, 3:04 which is located in js/vendor/markdown.js. 3:09 I think I might have said markdown.css a minute ago, I meant markdown.js. 3:14 We also need to use preview dot js, so 3:19 that's in js/preview.js. 3:22 Now remember the markdown.js actually does the work of 3:28 actually converting our markdown text to HTML and 3:31 preview.js puts that HTML into the div that we call preview. 3:35 For CSS, you create the CSS attribute and you set it equal to a dictionary. 3:41 The keys to that dictionary are media types. 3:48 So you could pass in things like screen or print or even TV to 3:50 load different CSS files depending on the type of device that your user was using. 3:57 The value would be the paths to the different CSS files. 4:03 In our case, we'll just use all as the key, and then the value 4:07 will be a tuple that contains the path to the CSS file that we wanna use, 4:12 which in our case is called preview.css. 4:16 All right, so whenever we save that and refresh our page, 4:22 we should see something cool happen. 4:26 Yeah. So right down 4:30 here we've got our markdown preview. 4:31 So let's go ahead and add some markdowns. 4:33 So we can say, like, maybe we add a heading 4:35 that says Part 1: Unittest, and 4:40 let's actually keep the formatting here a little bit. 4:45 And then we can maybe add a list. 4:53 Learn unittest and Learn other cool stuff. 4:57 And maybe we have a Part 2: Doctest, 5:03 where we will Learn doctest and 5:09 Learn even more cool stuff. 5:14 And then, we can have just a regular paragraph says, 5:18 This is the coolest course we've ever offered. 5:24 So let's Save and continue editing and we can kinda see what happened. 5:31 So you can see that these subheadings are showing up in some HTML. 5:35 We have this blue bar that indicates that it's a subheading. 5:39 And then we have these lists that are indented and 5:42 these paragraphs that are not indented. 5:44 So we have this awesome preview. 5:47 Great job! 5:49 That was a lot of new stuff. 5:51 To add the markdown preview, we had to override some templates, 5:54 add some JavaScript and CSS, and add some new things to admin.py. 5:58 But now we have this super useful markdown previewer for our admin site. 6:03 That will help us know how our course descriptions will look on the regular site 6:09 without having to load an extra webpage. 6:14 I've got one more trick up my sleeve to show you, and 6:17 then you'll be a total pro at customizing the admin. 6:20