How to Create a Slideshow using Jupyter+Markdown+Reveal.js

hi this is a video on how to create slideshow presentations using jupiter markdown and reveal j/s my name is James Church so what cool things can we do with reveal J ass markdown in Jupiter for starters this is in your web browser which makes it easier to share this content over the Internet writing a slide deck in markdown is as natural as typing so the next time I need I go to the store I need to buy some eggs I need to buy some ham and I need to buy iguana food and writing up the slide of list items is far easier in markdown than it is in PowerPoint so if you're doing your research using Jupiter notebooks that's great your notebooks contain your code that will double as your presentation by the way Jupiter reveal J s support latech equations so here's the formula for pi pi is the circumference divided by the diameter now notebooks are built for programming so these aren't just slides they're programming environments for instance here's a little bit of code I wrote in order to do a sine plot and then there's the output of the plot I didn't put that into my slides that was already part of my notebook and I told the slide rendering to render that part of the notebook so in this video we're going to learn what is Jupiter we're gonna learn how to create slides using the ipython markdown in reveal.js system and we're gonna learn a little bit about the marked markdown syntax for presenting and we're gonna learn how to render our slides so first off what is Jupiter so Jupiter started out as the ipython environment and ipython is an interactive shell for the Python programming language and in many ways I think ipython is better than the interactive environment that comes with Python so Jupiter is in your web browser so in Interactive Jupiter session is called a notebook and notebooks are great because they're easy to share and Jupiter began as a project just for Python but now extends to many languages so let's make a slideshow here are the steps that we're going to take in order to complete our slideshow we're going to clump we're gonna clone the reveal j/s directory we're gonna create a new notebook we're going to set the view to slideshow we're gonna write a few slides and then we're going to use the in B convert command line tool to convert this notebook to reveal J s slideshow all right let me get out of here okay so I have a directory on my folder called presentations and we're going to start here and you can see that there's nothing in this folder so I'm gonna go back to my web browser and I want you to do a google search we're gonna do github reveal J s alright so here's the reveal J s HTML presentation framework I'm gonna get out of full screen mode I'm gonna grab the URL that's all I'm really worried about here I'm gonna go back to my terminal and we're gonna clone this repository so git clone and then I'm gonna paste that URL and it's gonna download this project to my computer so now whenever I do LS I now have the reveal J s directory if you see that we're ready to move forward now let's start our notebook system great I have my notebook system ready to go let's create a new notebook I'm gonna make this a Python three notebook you'll see that I have Haskell installed I've been doing Haskell videos all summer but we're gonna do Python three notebook this time so I have a blank Python three notebook and let's rename this my slide show after I get the notebook renamed I need to click on View cell toolbar and slideshow and what that does is it's going to create this slide type option that appears in every cell so if I click on that slide type option I've got several options such as slide sub slide fragment skip and nodes we're gonna do a standard traditional slide show so everything in this presentation is going to be slides the other thing we have to do is we have to set every cell to be a markdown slide all right so in order to do a full heading for the beginning of your notebook you begin your mark down with a single pound sign so I'm gonna call this presentation my slideshow on circles so this is gonna be my slideshow about circles we're gonna make our our slideshow now if you want a slightly smaller heading which would be great for your name we're gonna use two pound signs I'm gonna say by James Church this is my slide show about circles okay and then I'm gonna hit shift enter on that cell and you're gonna see it's going to render the markdown in that first cell let's go on to slide two let's talk about I need to make sure the slide type is set to slide and I need to make sure that the block is set to markdown and let's create properties of a circle all right now let's create a few bullet points and to make a bullet point we begin a list with a - so circles have a diameter circles have a circumference alright and let's do one more here's the formula for pi and as you can see I'm putting one dollar sign and then slash pi and then another dollar sign that is the in line latech command for in order to render pi now we can do a full-width command for life tech and that is two dollar signs so pi is equal to and we'll put this as a fraction the circumference divided by the diameter now if I hit shift enter here you'll see that the slash Pi has now changed the symbol of pi and then our formula over here has now changed to the actual rendered formula great so let's do a conclusion sign again I need to set the markdown and I need to set the slide type to slide and we'll do a conclusion side in conclusion that will do three headers this time map is good all right not the most exciting presentation in the world now after I do shift enter it's going to create a new block beneath that and that will create a fourth slide I'm going to hit the scissor icon up here in order to cut that fourth cell that was just created so I think we're ready to render our wonderful slide presentation so I'm going to go back over to my terminal like create a new terminal window here let's oh I'm gonna go back over here I'm going to make sure everything is saved so we're gonna save and checkpoint so ready to go when I go back over to my terminal let's render this here's the command so it's Jupiter in beat convert and then two slides and then we type in the slideshow that we want to convert that's my slideshow dot i py in B and then we have to put in the extension reveal prefix and then we're gonna say reveal J s then it's gonna render our slides great so if I do LS you'll see that I have a new file here my slideshow dot slides on HTML I can render this using iceweasel the default browser in debian and we're gonna do my slideshow dot slides dot HTML and then I can go fullscreen and now I'm ready to present my slideshow about circles so this is my slideshow about circles by James Church here are the properties of a circle circles have a diameter circles have a circumference here's the formula for pi pi is equal to the circumference divided by the diameter in conclusion math is good all right there you go from start to finish we created a reveal J s Jupiter markdown slideshow

Channel: James Church

Views: 31,298

Keywords: jupyter reveal.js markdown

Id: EOpcxy0RA1A

Length: 10min 0sec (600 seconds)

Published: Thu Jul 28 2016