Static Sites with Sphinx and Markdown Transcripts
Chapter: Simple Markdown
Lecture: Images
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Markdown really is a simple syntax, gets a lot of things, right. One of the things that really gets right is images.
0:09
Let's take a look at how you can use markdown image syntax for your images in Sphinx. I'm back in the About us document and I'd like to add a little
0:22
section. It says something cool about the usage of Python, Schlockchain and I want to include the Python logo and I want to do that
0:33
just after this paragraph. So I'll put a blank line in and I'll paste in some text. And this looks a lot like the link syntax that we just saw
0:43
from Markdown. It's got the URL in parenthesis in this case it's the URL to the Python logo as a PNG file and it's got some text
0:54
in square brackets. In this case it will be the alt text for an image But we're telling Mark down this is an image by putting the exclamation point,
1:04
the exclamation point in front. I get a preview in my tool that shows the rendered image and when I save and Sphinx runs MyST,
1:15
converts that into an image that is displayed in line using the URL to.
1:22
That logo. Now, that's going to have visitors retrieve the image from the Python site every time maybe you want to have a local image.
1:33
Let's do that instead. Let's go to the terminal and let's run 'wget' to go download the Python logo to something local and now what I can do instead of
1:44
providing the full URL. I can just say get Python-logo, which is here in my file system as Python-logo,
1:56
right beside the markdown file that we're editing and when I save my tool previews the
2:04
markdown correctly, but also it still works when rendered in Sphinx.
2:10
in markdown more specifically what it's going to do is take that file that's on disk
2:17
here and it's going to copy it into the build output into the target of HTML
2:22
that we're building towards. And there's now a subdirectory called images with all the images They're part of our content.
2:30
And when I look in there I will see this file Python-logo, the 'AboutUs.html' file that was just built We'll have a URL
2:40
that's relative to go up and down into images to point at that logo file just to ramp up and show one last part of this markdown syntax,
2:52
If I made a mistake in the file name, we'll see that the all text is displayed in place of the image.
3:01
This is the simple image syntax using the existing markdown image syntax as we'll see in later sections, MyST has a much more interesting,
3:13
much more useful, much more powerful syntax that taps into the underlying Sphinx directive for images.