1 00:00:00,210 --> 00:00:04,150 When we left off, we had confirmed that our div that we call 2 00:00:04,150 --> 00:00:09,150 Preview was loading correctly because we added this Hi, Mom flag. 3 00:00:09,150 --> 00:00:12,915 So let's go ahead and delete that placeholder text. 4 00:00:12,915 --> 00:00:15,315 And Save fieldset.html. 5 00:00:15,315 --> 00:00:17,140 Let's just close it. 6 00:00:17,140 --> 00:00:18,140 We don't need it anymore. 7 00:00:19,300 --> 00:00:20,250 Okay. 8 00:00:20,250 --> 00:00:22,930 Now, in order to create our markdown preview, 9 00:00:22,930 --> 00:00:26,270 we're going to use a JavaScript library called markdown-js. 10 00:00:26,270 --> 00:00:29,850 So I'm just gonna go to the GitHub repo for markdown-js. 11 00:00:29,850 --> 00:00:33,660 And if you scroll down, you see all the documentation and 12 00:00:33,660 --> 00:00:36,120 the installation instructions. 13 00:00:36,120 --> 00:00:39,360 We are using the browser version of markdown-js. 14 00:00:39,360 --> 00:00:42,370 So we'll go to the releases page. 15 00:00:42,370 --> 00:00:46,555 And then, if you were downloading this yourself, you would want the most recent, 16 00:00:46,555 --> 00:00:48,640 non-beta version. 17 00:00:48,640 --> 00:00:52,271 So here we've got a beta version, but if we scroll down, 18 00:00:52,271 --> 00:00:54,324 we get this non-beta version. 19 00:00:54,324 --> 00:00:59,232 Now you would want to download the source code, 20 00:00:59,232 --> 00:01:04,017 and one of the files that you would get as part of 21 00:01:04,017 --> 00:01:08,941 the source code would be called markdown.js. 22 00:01:08,941 --> 00:01:14,600 Now you would save that file up here in assets > js > vendor. 23 00:01:14,600 --> 00:01:16,200 And I've already included it for you. 24 00:01:16,200 --> 00:01:17,400 So you can see it here. 25 00:01:17,400 --> 00:01:18,730 This is markdown-js. 26 00:01:18,730 --> 00:01:20,630 This what you would be downloading. 27 00:01:21,810 --> 00:01:27,540 Since this is not a JavaScript class or a CSS class, I've also included this file 28 00:01:27,540 --> 00:01:33,690 called preview.css where I've added a little bit of CSS for our preview div, 29 00:01:33,690 --> 00:01:38,500 for that markdown preview, that kind of just indents it to set it apart. 30 00:01:38,500 --> 00:01:42,600 And then I've added this preview.js file that includes the JavaScript that will 31 00:01:42,600 --> 00:01:45,480 actually put some text into that preview box. 32 00:01:47,040 --> 00:01:49,590 Now, I am not a great JavaScript developer, so 33 00:01:49,590 --> 00:01:54,350 there are probably ways to improve this code, but I'll leave that to you. 34 00:01:54,350 --> 00:01:57,680 But basically, we have this editor function that 35 00:01:57,680 --> 00:02:03,450 converts the markdown syntax into HTML so we can render it in the browser. 36 00:02:03,450 --> 00:02:06,920 Then, we have this document ready function 37 00:02:06,920 --> 00:02:11,315 that takes the markdown text in the text area with the ID, 38 00:02:11,315 --> 00:02:16,190 id_description, and puts it in the div with the ID preview. 39 00:02:17,420 --> 00:02:21,507 Now, if you start your server and test it out by refreshing this page, 40 00:02:21,507 --> 00:02:24,084 you'll see that nothing has happened yet. 41 00:02:24,084 --> 00:02:28,891 And that's because we need to tell our course admin class that we want to use 42 00:02:28,891 --> 00:02:30,890 this JavaScript and this CSS. 43 00:02:32,090 --> 00:02:37,225 So to do that, we need to go back to admin.py. 44 00:02:37,225 --> 00:02:41,210 I'm just gonna close these other files here so we won't be distracted. 45 00:02:42,240 --> 00:02:49,242 All right, so here in course admin, we're going to create a media class, 46 00:02:49,242 --> 00:02:54,022 and inside that class we'll have a js attribute and 47 00:02:54,022 --> 00:02:57,157 that will be set equal to a tuple. 48 00:02:57,157 --> 00:02:59,035 And then inside the tuple, 49 00:02:59,035 --> 00:03:04,270 we just pass the paths to the different JavaScript files that we want to use. 50 00:03:04,270 --> 00:03:09,152 So in this case, we wanna use markdown.css, 51 00:03:09,152 --> 00:03:14,421 which is located in js/vendor/markdown.js. 52 00:03:14,421 --> 00:03:19,550 I think I might have said markdown.css a minute ago, I meant markdown.js. 53 00:03:19,550 --> 00:03:22,770 We also need to use preview dot js, so 54 00:03:22,770 --> 00:03:28,210 that's in js/preview.js. 55 00:03:28,210 --> 00:03:31,480 Now remember the markdown.js actually does the work of 56 00:03:31,480 --> 00:03:35,305 actually converting our markdown text to HTML and 57 00:03:35,305 --> 00:03:40,400 preview.js puts that HTML into the div that we call preview. 58 00:03:41,850 --> 00:03:46,650 For CSS, you create the CSS attribute and you set it equal to a dictionary. 59 00:03:48,250 --> 00:03:50,820 The keys to that dictionary are media types. 60 00:03:50,820 --> 00:03:57,310 So you could pass in things like screen or print or even TV to 61 00:03:57,310 --> 00:04:03,200 load different CSS files depending on the type of device that your user was using. 62 00:04:03,200 --> 00:04:07,390 The value would be the paths to the different CSS files. 63 00:04:07,390 --> 00:04:12,270 In our case, we'll just use all as the key, and then the value 64 00:04:12,270 --> 00:04:16,810 will be a tuple that contains the path to the CSS file that we wanna use, 65 00:04:16,810 --> 00:04:22,327 which in our case is called preview.css. 66 00:04:22,327 --> 00:04:26,490 All right, so whenever we save that and refresh our page, 67 00:04:26,490 --> 00:04:30,590 we should see something cool happen. 68 00:04:30,590 --> 00:04:31,610 Yeah. So right down 69 00:04:31,610 --> 00:04:33,780 here we've got our markdown preview. 70 00:04:33,780 --> 00:04:35,450 So let's go ahead and add some markdowns. 71 00:04:35,450 --> 00:04:40,794 So we can say, like, maybe we add a heading 72 00:04:40,794 --> 00:04:45,100 that says Part 1: Unittest, and 73 00:04:45,100 --> 00:04:52,090 let's actually keep the formatting here a little bit. 74 00:04:53,950 --> 00:04:55,910 And then we can maybe add a list. 75 00:04:57,410 --> 00:05:03,707 Learn unittest and Learn other cool stuff. 76 00:05:03,707 --> 00:05:09,522 And maybe we have a Part 2: Doctest, 77 00:05:09,522 --> 00:05:14,248 where we will Learn doctest and 78 00:05:14,248 --> 00:05:18,623 Learn even more cool stuff. 79 00:05:18,623 --> 00:05:24,248 And then, we can have just a regular paragraph says, 80 00:05:24,248 --> 00:05:29,379 This is the coolest course we've ever offered. 81 00:05:31,349 --> 00:05:35,750 So let's Save and continue editing and we can kinda see what happened. 82 00:05:35,750 --> 00:05:39,250 So you can see that these subheadings are showing up in some HTML. 83 00:05:39,250 --> 00:05:42,670 We have this blue bar that indicates that it's a subheading. 84 00:05:42,670 --> 00:05:44,630 And then we have these lists that are indented and 85 00:05:44,630 --> 00:05:47,330 these paragraphs that are not indented. 86 00:05:47,330 --> 00:05:49,810 So we have this awesome preview. 87 00:05:49,810 --> 00:05:50,420 Great job! 88 00:05:51,720 --> 00:05:54,460 That was a lot of new stuff. 89 00:05:54,460 --> 00:05:58,470 To add the markdown preview, we had to override some templates, 90 00:05:58,470 --> 00:06:03,370 add some JavaScript and CSS, and add some new things to admin.py. 91 00:06:03,370 --> 00:06:09,660 But now we have this super useful markdown previewer for our admin site. 92 00:06:09,660 --> 00:06:14,020 That will help us know how our course descriptions will look on the regular site 93 00:06:14,020 --> 00:06:15,915 without having to load an extra webpage. 94 00:06:17,730 --> 00:06:20,540 I've got one more trick up my sleeve to show you, and 95 00:06:20,540 --> 00:06:23,410 then you'll be a total pro at customizing the admin.