Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
We still have a little work to do on our preview. Let's finish up the necessary code to have a handy preview on our admin page.
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
You need to sign up for Treehouse in order to download course files.
Sign up