How to create html presentations with markdown files

hello there my name is Patrick and today I'm going to show you how I make slideshows I'm going to be using markdown files with reveal j/s so I have a few files here that I like to use to get started markdown file containing at some content for my slideshow a couple images and a JavaScript file so we're gonna get taught each one of these but let's first discuss reveal.js a little bit this is reveal Jace's github repository i'll be posting a link in the description below you're going to need to start by downloading this or cloning it to your local desktop so I'm going to go ahead I use a get bash on Windows here and then that makes it pretty easy to clone or apposite or e to my desktop this repository comes with a demo and the demo actually has a really good default layout for reveal.js so we're going to essentially just edit the demo that it provides so let's go ahead and open up the reveal.js folder I'm just going to rename it slides as well inside the reveal.js folder we have a lot of different files the ones that we're interested in are the kind of default templates there's to the index file HTML and the demo dot HTML you can actually view these in the browser right off the bat this is what they look like this is what the the framework kind of looks like it's quite pretty it's nice that runs in browser can run mobile really well and I find it pretty quick to write slideshows in especially when you're using markdown I think in the demo it has a little bit of discussion on the markdown portion the demo actually we'll have a quick look at it so I'm going to open up this folder in sublime text okay so here's a folder you'll see the demo HTML file here has a bunch of different stuff here but this is a good starting point it has a bunch of slides which are contained in a div in the body each section is its own individual slide what we want is a single section pointing to a markdown file where we can do all of our work so we're actually going to get rid of the entire content of the slides so I'll just scroll down here and while we're scrolling we'll probably get a glimpse of what the inline markdown looks like so here's the data section for the markdown but this is inline so it's inside the HTML and I and it's it works nicely if you're doing an individual slide that you'd like to use markdown for but I prefer to create the entire presentation using markdown so I'll be using a single file so we're actually going to get rid of this section as well we'll delete all these sections it's quite a few we'll just have an empty div for our slides everything else will remain default what what you might want to alter for the demo dot HTML file is the title in the description because that comes as default so I might change this tutorial for reveal j/s with markdown and then you can alter the description as well so my description author as well this is a metadata for the slideshow that will be hosted they ain't good okay so for the markdown file itself we're going to need to have our markdown files and the pictures that we're going to be using in the slideshow inside this directory so let's go to our desktop and open up our slides and I'm going to create two folders one for images and one for slides go ahead and put the reveal Tut MD in slides and the images in the image folder give you a quick glance glimpse at what the reveal tutorial looks like very simple markdown file and I'll explain the spacing just a moment so there are one section that we're going to need to add to the demo HTML is going to be this one here and just got to do some indentation there so this includes all possible options for the markdown file and this I'll go over each one so the data markdown is going to point to our markdown file which is in our slides folder and it's called reveal MD and you have a data separator and data separator vertical the data separator is going to be a separator between horizontal slides and then vertical is for your vertical slides so in the reveal Tut I have three new lines separating these two slides so they'll be two horizontal slides here's a vertical slide example with only two new lines and then here's an example of an image and then another two lines here I'll make that three lines for the last slide so that's a completely separate slide back to the demo a few more things to wrap up we've already changed this I'm just going to get rid of the charset and the notes because I'm not using either of them and I don't really need to define my own chart set for this plain text that I'm using and then I'm going to go ahead and delete the index.html and rename the demo to index.html because that's going to be the default page that opens when I go to my site so we can actually open this file now and you'll actually get an error so if I open up H index out HTML I get a little error saying that it's failed to retrieve the markdown file that's because we don't have anything serving them if this was on a web host or a server normally running like a pot Apache or something like that you can get these files to serve what we're going to do instead is use that javascript file which I had on my desktop somewhere there it is and use that to serve the slideshow it's a really simple javascript file just no js' server that serves static files and i'll show you what it looks like a few lines of code first line we're grabbing the Express package and it's going to allow us to easily serve some files I'm serving everything from the current directory that includes our slides folder and our image folder most notably that we're going to be serving and then I'm just listening on port 3,000 so I can give this a run but first we're actually going to need Express so I'll download that really quick again open up my git bash to use NPM if you have no js' it also installs and p.m. so I can have MPM install Express that's going to install Express so we can use it and then I can node run in our node server now it's listening on port 3000 so if I go to local host on port 3000 we get our slideshow you have some controls at bottom and the the demo slides go over a lot of the controls as well you can serve images through the markdown file have vertical slides and wrap up so I think I went over everything here if you do have any questions leave them in the comments below but this is a way that I like to do mine slideshows and makes it so that I can store them in plain text I can version control them and I can just sub in whatever markdown file I want into the slides folder and all I have to do is change the name here and it's going to reflect the new the new slideshow it's a really convenient way to make some slideshows as long as your slideshows are very simple I found that this actually forces you to make rather straightforward slideshows rather than making a really clunky and over-the-top powerpoints this can really help I find it helps to represent and I don't have to worry about bringing around a USB stick or downloading a file I can just go to my hosted website and it ready to go and I don't really have two hints gonna work in any browser I don't have to worry about too much whenever we're giving a presentation thank you for watching again any questions in the comments down below and I'll see you next time

Channel: PatomackCodes

Views: 24,102

Rating: 4.8672199 out of 5

Keywords: markdown, slide show, presentation, revealjs, reveal.js, html, web, node, express

Id: iZl7R6ntOGc

Length: 8min 55sec (535 seconds)

Published: Fri Nov 10 2017