Create slideshows with Markdown & Python Code! (Quarto Tutorial)
Learn how to transform Markdown and Python code into interactive slide presentations using Quarto and reveal.js. This tutorial covers essential features like code execution, data visualization, LaTeX equations, custom styling, and slide transitions. Starting with basic slides, we'll explore advanced functionality including background customization, animations, chalkboard annotations, and brand theming. Perfect for data scientists, educators, and developers looking to create engaging technical presentations. Github repo: https://github.com/KeithGalli/quarto-projects Quarto slideshow demo page: https://quarto.org/docs/presentations/revealjs/ Quarto crash course video: https://youtu.be/_VKxTPWDhA4?si=VZxkW3kgtx1W_AIW Blog article on _brand.yml: https://posit.co/blog/unified-branding-across-posit-tools-with-brand-yml/ Video by @KeithGalli Video timeline! 0:00 - Video Overview 0:39 - Getting Started with the Code (link in description) 2:22 - Quarto Slideshow Basics 6:15 - Generating Powerpoint (pptx) Presentation Outputs 7:14 - RevealJS HTML Output Options & Features (Code Animation, Line Highlighting) 11:00 - Data Visualization in Quarto (Matplotlib, Plotly, Seaborn) 14:40 - Displaying Dataframes on Slides 18:15 - Presentation Features (Incrementally Revealing Items, Image Positioning, Slide Transitions, etc.) 25:02 - Keyboard Shortcuts Functionality (Zoom in, Chalkboard, Save Presentation as PDF, etc.) 29:14 - Styling Presentations with a _brand.yml File (New in Quarto 1.6) 34:39 - Jupyter Notebook to RevealJS Slideshow #Python #Quarto #DataVisualization #pythoncontent
image: thumbnail.jpg
Transcript#
This transcript was generated automatically and may contain errors.
Hey what's up everyone and welcome back to another video. In this video we're going to see how we can take a combination of Markdown and Python that looks like this and turn it into an interactive slideshow presentation that looks like this with all sorts of cool features, code embedding, plots being visible in the slide presentation, just a lot of cool stuff that we can see.
So we're going to start with the basics and then work our way up to all sorts of more advanced features and functionality of Quarto slideshows using Python. Should be a lot of fun let's get into it.
Getting started
All right so the first step that we're going to want to do is there's a github repo and I'll link this in the description and as part of that github repo there's this slideshow folder that has the files that you'll see in this this presentation and also some extra assets and logos and all that.
I think before I even dive into the code I think one thing that I do whenever I'm trying to build presentations in Quarto using Python is I always just look up like Quarto reveal.js docs and I find that this page docs slash presentation slash reveal.js is so so useful. There's this interactive slide presentation that's there that shows a lot of this functionality that we will see in this video and to make this more Python focused I kind of adapted some of the details that you see here which I'll also link in the description to a more Python based visualizations but it's basically the same as we'll see here but we'll kind of start with some basics first.
Also if you've never used Quarto before if this term sounds new to you I recommend checking out the recent Quarto crash course that we posted which will be linked also everything's linked in the description today link that in the description you don't need to watch that to check out this video but some of the basics might be helpful to see in that video first before you kind of dive into some more advanced slideshow type features.
Creating a basic slideshow
Enough talking though let's get into the code. So whenever you're starting a presentation in Quarto I recommend creating a qmd file so we're going to create a I'm just going to call this like slideshow.qmd file this is totally blank to start and we will add some I guess initial yaml parameters so I'm going to open and close these three bracket or these three dashes to specify my yaml parameters and then if I want to make this a slideshow I have two main options so I'm going to go format and I'm going to do reveal.js as the first option.
And I can add big sections like this so section one and then I could do like slide with two pound signs a level two header I can do slide one slide two slide three and then I can you know insert some random text insert some more text this is all out of order but in some some random text a lot of fun stuff here and if I render this with Quarto so if you install the Quarto VSCode extension and also install the Quarto CLI that's all in the crash course linked in the description but if I preview this we see we get a little slide presentation here.
I'm also going to give this a title slide so title my cool Quarto slideshow how about that I'll give it an author which is going to be my name Keith Galley and we will go with that for now. There's other parameters you can add here but we see my cool slideshow we see our first section we see our section headings with our text if I keep scrolling over we see the slides switch.
That's all good not super fancy right now this is just markdown but where it starts getting cool is like let's say on slide three I wanted to insert some Python code I could do something like bracket Python I accidentally added an extra bracket and I could do something like import matplotlib.pyplot as plt plt.plot1234 very fun stuff I could run this and we see on that slide three we get our plot.
If I also wanted to see the corresponding code alongside that I could do echo is true and that's going to display not only my plot but also the code. I could also do other things like output location and maybe I want it to be on a different slide so this is going to now put that graph on the next slide over here so we go to slide three again we're going to just see the code but then on slide four we see the graph I guess it's still part of slide three but it's just separate from the code.
You can also add it as this column format and now we look and we have our code over here and we get the graph output on the right and I could also open this up and you know see this.
So that's some of the very very basics another cool thing that you can do you don't have as much styling functionality and like abilities but you can also if you needed to change this to pptx make it a powerpoint presentation I re-render this what we're going to see over here is we've been working with an html file but now we have this powerpoint file if I go ahead and open this up on my side we see that we do get a presentation in powerpoint format which could be very helpful if you are working at a company that needs to use powerpoint and you want to like set up a template for your slide presentations.
You don't have as much flexibility with the powerpoint format you can look up pptx Quarto and learn more but I'm going to focus on this reveal.js format because I think that's where you get the most interactivity the most benefit of really using Quarto.
You don't have as much flexibility with the powerpoint format you can look up pptx Quarto and learn more but I'm going to focus on this reveal.js format because I think that's where you get the most interactivity the most benefit of really using Quarto.
Walking through the demo presentation
So I think to best demonstrate all of these different features and what functionality you have available to you in this github repo that is linked in the description I think we need to get like a linked in the description count counter on the screen or something because I've said that probably seven times already but in that file we basically adapted that demo presentation that I just kind of shared and we made it a little bit more python specific.
I'm going to remove some parameters first and then kind of walk into some more sophisticated details so I'm going to render this make this full screen I'll hide the files pull this down a bit but we get this slide presentation and I think probably to show a lot of the functionality I'll show my code over here on the left side and hopefully it is big enough that you can see and I'll share the corresponding slide on the right side.
So the title and all that is specified up here with these yaml parameters we specify that it's a reveal.js format here in the format spot and we specify some other things like slide number we see that down at the bottom right we see we get a footer which can use the markdown syntax so I could do this as like Quarto docs or something and what you'll see is that the footer changes to Quarto docs down here instead of the actual url so you have flexibility with how you specify this.
Embed resources just puts everything in a single html file versus having extra files little nuance there but let's get into some of the actual code here.
Code features: animation and line highlighting
All right so starting with like hello there slide nothing crazy here I'm going to just keep walking through until we get some more interesting things. So here we can see that on these corresponding slides we just basically animate a little bit of a difference between two python cells this and this and so when I run these two between these two it animates the code between them but we don't see any output.
Part of the reason we don't see any output is because we are just using this python class versus actually making this python code and so when we're just showing off our actual code and we don't want anything output sometimes it's best to use this dot python syntax but if we're actually running the code use the python syntax like that.
Other cool things you might want to do code specifically is line highlighting so as we can see in this example we start by highlighting lines four to five and then we highlight line seven and then we highlight line 10 and when I step through this presentation we see that that happens. I could also then put at the end you can add as many of these highlights as you want so maybe I wanted to show one through ten I could do something like this and then at the very last moment of this I step through step through and then the last one all all 10 lines are highlighted.
We also see that we can specify separate footers than the one we specified at the top using this footer syntax.
Data visualization in slides
Getting into some data visualization we can see some basic matplotlib code here just as I showed in the simple example we have output location slide here so when we actually get an output for this plot it's going to show up on the next screen.
We also have interactive plots and for whatever reason this one's not loading right now refresh this if it will let me just double check what's going on here I'm going to rerun this real quick on the plotly slide okay we see our plotly chart.
So we see a little plotly graph and you know you can interact with this I can zoom in on certain areas I can see information on if the plotly chart and this one's below so it overruns a bit so you could if you wanted to as we did with the matplotlib example I could do output location as slide and then just have this fully on the next slide and so now we see on the next slide this graph just fully by itself.
That's plotly so matplotlib plotly we do other things so like one cool thing is maybe we wanted a matplotlib visualization and we wanted to show the code but then we wanted to pop up the chart right next to it but maybe we didn't want them to appear at the same time one thing we can do is this column fragment way of doing things.
Also worth mentioning is I've surrounded a lot of these code blocks with this smaller class if I remove this you're going to see that the content within our slide gets bigger so when we rerun this the code it might actually overrun and not fit in the screen go to the next slide so you see it fills up a bit more space and I often like if I have a lot of code passing in this smaller tag just to make things fit a bit better.
But we did see that with this slide this column fragment one it starts without the chart and then you click in and we see the animation and we see our code because we're specifying this echo is true. I could also specify just column instead of column fragment and then when we run this they will already the sine wave and the cosine wave will already be on the screen as you can see there.
Again we can do seaborne visualization so you can do all the different visualizations you expect we can also do things like showcase just data frames so here's a simple data frame and I'm just passing df at the bottom of my code cell we see that tables example.
You can explore different ways to visualize your table so one cool posit library is this library called great tables which is pretty new in the python ecosystem but using code like you see here we can generate cool charts like this cool tables so maybe you wanted a little bit more fancy of a table within your slide presentation as you can see the code over here that can be done with a combination of great tables and we just display your table down here.
You can also lay out things in columns so maybe you wanted a column describing your data set and then you wanted to actually specify a table of your data we could do something like that.
If you run into the situation where your table runs off the screen there's a couple parameters that you have access to so you have access to up here you have something called scrollable so this will let you scroll if anything overflows you also have access to height width margin so I could specify like maybe I wanted my width to be like 1800 and fill up more of the screen.
LaTeX equations and incremental lists
You also render latex so if you had mathematical equations you want to show in your presentation you can do that easily with Quarto and that can be very helpful because I feel like it can be really annoying if you have a slide presentation and you need to show complex math. What you can see here is this is showing off the latex code that we are sharing so this is the left side of the screen the column with 40 that's on the left side and then when we do equals text then we're actually rendering that latex and that's how we see these more traditional mathematical equations appear on the screen.
We can do all sorts of cool presentation features like incremental lists I find super helpful so by surrounding a dashed list with these colon colon colon incremental and closing that fence div off with the same colons we can get a list like this which I find very helpful. I like when I'm doing presentations to you know say one thing at a time and really emphasize that point that I'm talking about. I think that as far as staying focused you don't want to throw too much on the screen at once so leveraging these incremental lists and these fragments which is another feature that you're seeing right now can be very very helpful.
So you see the fragments here when you specify a fragment with your fence div you have different options like fading in fading up fading left you know fade in then semi out all these different things.
Slide backgrounds and absolute positioning
Slide backgrounds let's get into some more interesting things here. You can specify different colors here with background and specifying a hex color so I could do something like what's an interesting color I wish I knew hex colors off the top of my head.
Yeah it's like a fun blue color makes sense because these first two numbers are my r the second two numbers are my g and these last two numbers or letters in this case are my b and these are the highest values over here from a hexadecimal perspective so it's the most blue so that's why we get this slide background as the blue color but you could specify any hex color there.
We also can do cool stuff with like actually having images as our background so in the folder we have a bunch of images so you see we're using the Milky Way image as our background right now using this background image parameter within our slide we're specifying that but we could also do a background video or a background iframe as well.
Another useful thing here is that you see these pop up in absolute position spots this can be super useful if you need to like display you want to pop up a certain image at a certain time as you're talking about something. So we're using the absolute like values like left width height top etc to specify where these show up but another important aspect of this is that we're specifying that these are fragments and we can also specify the order that they appear by the fragment index.
So if we look at this cat image we see we it has a fragment index equals three I think if you specify a fragment index it's always going to come before ones that don't have any fragment index specified so what we're going to see is this group of four kitties appear before this cute kitty that looks like it's maybe on a sink or something. So let's see that four kitties appear then kitty on the sink appears and then other kitty appears.
I could very easily make this fragment index like 20 I mean this could be any number it just is measuring the relative order so I could make this three I could add a fragment index here which equals one and now what we're going to see is this little kitty appear first then this kitty and then the four kitties so rerun this that kitty appears first then that kitty and then finally the four kitties.
So that is done with these absolute positioning and using fragment and fragment index and these images are also in that repo they're in images and then cats so you can do all sorts of cool things I find it very very powerful to have things appear at certain times.
Animations, transitions, and interactive features
So we saw all of this we saw the fragments we saw these images popping up in random spots you can do some animations you can do slide transitions like this and have tab sets so you can have both your plot and then your data separately you can have interactive slides which you saw with plotly but you could also add like a folium map or something here which is pretty cool where are we right now in this map I think we're we're in eugene oregon.
Folium library is fun for that reason and we could do other types of slide intros so we see a I think concave there so that's a concave transition you can do the zoom transition you can just fade a transition in you could do this convex transition all sorts of slide transitions that you can have fun with.
So you have a lot that you can work with within this reveal.js format you can also you click alt and zoom in on certain parts of the screen which can be helpful if you want to emphasize something.
Chalkboard and PDF export
I think one thing that I will mention is if you press I think b I don't know b does I'll show you you can do r to do the scroll view there's a bunch of key syntax that we can do that is useful.
Okay here's some useful things this chalkboard is super useful and I don't have my chalkboard on right now but if I added down here I'm going to take out those embed resources real quick because if I try to add this chalkboard let's call this true it's going to yell at me for trying to embed resources and do the chalkboard see that so that's what it's telling me it's telling me you got to not do it that way.
And so now we added this chalkboard and what's cool about this chalkboard is if I press c basically it activates the ability for me to draw on my slides so if you're giving a lecture this can be a very very useful tool. You can also actually enter this chalkboard and so if you had like a writing tablet this might be a bit easier to see but you can write on the screen which if you're trying to annotate trying to emphasize something very very valuable.
You can also actually enter this chalkboard and so if you had like a writing tablet this might be a bit easier to see but you can write on the screen which if you're trying to annotate trying to emphasize something very very valuable.
Other useful things if you press e you're going to go into this and this is probably more useful if you see it in a full screen view if I press e you're going to go into this like view that looks like this it's just a little bit more appropriate for pdfs and then if I right click so I pressed the key if I do print I could save this as a pdf and kind of send it just like I would maybe a powerpoint presentation which can be very very useful if you're trying to share this with teammates so you could output a pdf or you could send that html file if you have this embed resources equals true.
I can hit g and type a certain slide number that I want to go to I can do m just toggle a menu over here you can see different tools I have available in this menu this menu is also accessible down in the bottom left I don't know if you saw but down at the bottom here there's a color that is telling our progress so there's a progress bar that you can activate or you know it's active by default.
Brand theming with brand.yaml
I think one thing that I do want to showcase is that in the most recent Quarto update there's the ability to use a brand file so I will link in the description a good blog article about this new feature called which is a brand dot yaml file that you can specify.
Basically you can add a file that looks like this and have your own custom themes that work across not only the reveal.js format but also dashboards and html reports using Quarto so I recommend reading through this as well as the blog post that I will link.
And you can see some different options that you have available to you I made a little you know I had fun and made a little brand file for myself with a ai generated logo and all that fun stuff I also have that in the github repo so if I open my files up I see I have brand.yaml which specifies some different types of colors it specifies a logo specifies some like meta information about my brand file.
You can play around with typography too I temporarily removed the typography stuff but you can see with these brand.yaml files that you have access to like playing around with different types of fonts and whatnot. There's also a very useful llm prompt somewhere in here that I saw I'll see if I can find it but basically you can like what I did to generate my brand file was I looked at the examples that they provided and somewhere in these docs I found an example that gave an llm prompt that you could use to basically generate your own brand yaml file if you know some of the parameters and I basically did that using Claude and just pasting in some examples of brand files that I found as well as pasting in some colors that I wanted and whatnot and ultimately got out you know a brand yaml file that looks like this.
Now if I specify in my slideshow brand is brand.yaml and we rerun this we're going to see all sorts of cool colors that are unique to my brand which is super creatively just using a k and g right now so we see this little logo down here at the bottom.
But now if we look at our presentation we get this nice looking I'll pop this open full screen so you can truly appreciate it get this nice looking blue color it can be overwritten so like on this side it's directly the background color is overriding it but it just looks quite nice with this blue and green and having that actual logo down there it just much more you know fits maybe a personality or profile that you always use in any of your brand materials and it's nice too if you're working with a team using this brand yaml file everyone can have consistent presentations across your team.
One thing I also should mention is that I specified the brand yaml with it like this but if you named this as instead just underscore brand yaml it will automatically leverage that in your qmd files so if we go like to slideshow.qmd that very simple example we showed we see that that also is now getting the uh branded guide.
So you see it has that theme too and I didn't specify brand anywhere here it just knew that it could use this brand.yaml because it's specified with this underscore brand yaml in a way that's just automatically understood.
Creating slideshows from Jupyter notebooks
One final thing I might mention here is that if you are a python coder you often might work in with jupyter notebooks or something so I could do jupyter notebook example that's too long too long of a name example.i python notebook I could add some code here python code I'm going to just close this out so I have more screen space and maybe I make my first cell a markdown cell import libraries import pandas as pd import numpy as np a lot of fun stuff run that then maybe I plot a simple graph.
So I'm just making a you know standard jupyter notebook right now plot a more sophisticated matplotlib plot in python.
So we have more sophisticated plot one thing that's cool is I similarly could add to my jupyter notebook I could add these three dashes top and bottom I could specify the format is reveal.js and I could then in my terminal run quarto render example dot i python notebook we get this example dot html file if I open that up we see we actually get uh you know a presentation using our jupyter notebook.
And I might just actually try this one more time I want to make this a separate cell I think it was getting mad at me for putting both my options and my import libraries in the same cell and one thing you sometimes have to do too is run a quarto render example dot i python notebook but then you want to also specify this dash dash execute parameter to make sure that the jupyter notebook actually runs.
So now if I look at this example dot html okay we get it uh in a way that we're more expecting import libraries plot a simple graph plot a more sophisticated graph and we can specify all the same parameters as we did before.
And if I specified something like echo is true here it's going to actually show those libraries if I do the same thing here it will actually show this code run that again so we see our code. So you can play around with this you could make a slideshow if you are smart with how you write your jupyter notebooks you can create a slideshow just from your jupyter notebook which can be super super useful.
A lot of cool stuff that you can do with python and Quarto and the combination of the two if you have any questions about any of this let us know in the comments and maybe we can answer them with future videos.
But I find it super useful to just be able to easily write my code and then basically without much extra work just a little bit of markdown sprinkling basically have a presentation out of that. Tons of cool stuff I feel like I've learned tons of features through this but I'm still learning more every day so it's kind of like as you kind of go I think it's easier to learn more and more but hopefully this showed a lot of the features check out the links in the description for the docs the code and just different resources that will help you learn more.
But I find it super useful to just be able to easily write my code and then basically without much extra work just a little bit of markdown sprinkling basically have a presentation out of that.
