Static Sites with Sphinx and Markdown Transcripts
Chapter: Simple Markdown
Lecture: Formatting
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's take a look at some markdown formatting as it surfaces in Sphinx via MyST.
0:06
We'll do some simple formatting in this step will do some headings and paragraphs and character
0:11
styling and lists and things like that.
0:16
I have my editor on the screen with my markdown on one side.
0:19
The editors markdown preview on the other side and then I've got my live reload server
0:26
on this side with the web page.
0:28
So what we have first is I can add some Headings.
0:32
For example, we've got about us.
0:35
I could change it to an H3 and as I save you can see the
0:40
preview shows a smaller one. This is formatted differently because it is the title of
0:47
the page. If I reverted that and said heading 3 and saved.
0:55
Once the library loads server ran,
0:57
you'd see that I get a different heading style.
1:00
I can also do some inline styling.
1:03
I'll make a new paragraph just by having a blank line.
1:05
I say we are a bold company.
1:09
Yes, we are and we are innovative.
1:12
And these use of the asterix.
1:16
The first one is bold as you can see in the preview.
1:19
Second one is italics as you can see in the preview when I save in the
1:23
live reload server runs, we see that the rendering gets the bold and the innovative
1:28
as well. Let's say I want to do.
1:30
So we just showed headings, we showed in line character styling,
1:33
we showed paragraphs, let's say I wanted to do.
1:35
And inline for example, code I'll paste a little snippet and you see that
1:41
the back ticks put the code tag and then a colon followed by a blank line
1:48
And indentation puts a pre tag.
1:52
When I say, if you see the rendered output in html.
1:56
Markdown has indentation which you can use with a sequence of greater than and multiple greater
2:02
than signs. We can see in the preview that I got a first level of
2:07
indentation and then a second level of indentation,
2:09
which you also see when missed renders to the html.
2:15
What do markdown lists look like?
2:17
I have a bulleted list just by having a dash.
2:21
Could also be other kinds of symbols such as an asterix and then a numbered list
2:26
It is just a series of numbers.
2:28
They don't actually have to be in ascending order.
2:31
I could put them all as one and it would work.
2:34
I see in my preview and the editor and also in my pre in my rendering
2:40
thanks to MyST rendering into html.
2:44
That I get ordered lists and numbered lists from html.
2:47
How about links to URL's.
2:49
This is a place where markdown really excels relative to restructure text
2:53
I'll paste a little snippet and this is going to have a link to the
2:57
Python homepage. You can see the URL.
3:00
There, the URL.
3:02
Is in parenthesis and the link text is in square brackets and when I look at
3:10
the preview and my editor I see the link text and the fact that it's an
3:15
actual link that I could click on when I save and Sphinx renders via MyST.
3:20
I see that I have a paragraph with link text.
3:23
I hover over it and that's the link.
3:26
URL. I don't have to link just to
3:29
URL's out on the web. I can link to other resources on my in my
3:34
Sphinx site. For example, if I want to link to the homepage from this
3:40
about us, I can do a path to it.
3:44
I could leave off the ./ and when I save it will re render thanks
3:49
to MyST. I can also see in my editors preview and as I mouse over
3:54
here I see that's going to point to 'index.html'.
3:58
This starts to bring up some of the coolness of MyST.
4:03
Combined with Sphinx. The Sphinx knows all the pages on the site and knows the
4:07
title of all the pages in the site.
4:10
If you want this link text to just use the title of the site and update
4:14
Whenever the title changes, you can just leave empty link text.
4:20
Now, my tool doesn't know about Sphinx.
4:22
So it just removed the link text but over in the rendered site with MyST and
4:27
Markdown, it supplied link text from the title of the thing I like to.