Why? because it is the quickest way to make a code-heavy slideshow that's easy to present and host.
- Create a Gist in github.com.
- Add a Markdown file to the Gist, we'll call it
_slides.mdbut you can call it anything. We start it with_because we want github.com to show it first.
- Use standard Markdown syntax.
- The only change is that you separate each slide by putting in three dashes
---which in Markdown is usually used to add an Horizontal Line<HR/>.
- Add a template
index.htmlfile to the Gist. We call itindex.htmlso that our Gist-to-website renderer will display it by default. - The contents should be this. Among other things it contains this:
<script>
var slideshow = remark.create({
sourceUrl: './_slides.md',
highlightLines: true,
highlightSpans: /(.*)(\/\/\*)/g,
});
</script>
-
Note the name of the
sourceUrlshould be the name of your Markdown file. -
At this point you should have 2 files in your Gist, one
_slides.mdand oneindex.html.
- Once you save the Gist, you should get the URL for it (something like
https://gist.github.com/jcham/c82121c4e898effed7687a31fe2030f1). - There's a number of services which given a Gist will present it as a website. One of them is
bl.ocks.org. - To use
bl.ocks.orgjust change the hostname of the above URL tobl.ocks.org, so:
https://gist.github.com/jcham/c82121c4e898effed7687a31fe2030f1
becomes:
https://bl.ocks.org/jcham/c82121c4e898effed7687a31fe2030f1
- Note that because of caching, utilities like
bl.ocks.orgsometimes take a few minute to update their contents.
remark.jslet's us specify the Programming Language of the code, just use the standard 3 backticks followed by the name of the language like```ruby.- It's also sometimes useful to highlights part of the code you're talking about.
remark.jsallows us to specify a pattern in its options that will cause the line to be colored yellow. You can edit this in theindex.htmlfile.- In this example, we set the pattern to
//*so that the line stays valid Javascript, but you can set it to anything.
var slideshow = remark.create({
sourceUrl: './_slides.md',
highlightLines: true,
highlightSpans: /(.*)(\/\/\*)/g, //* This line is yellow
});