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.