Static Sites with Sphinx and Markdown Transcripts
Chapter: Simple Markdown
Lecture: Formatting

Learn more about this course
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.