% Title % Name % Date
List
- this
- is
- cool
Last active
November 11, 2022 23:57
-
-
Save aaronwolen/5017084 to your computer and use it in GitHub Desktop.
Pandoc template to generate reveal.js slideshows.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>$title$</title> | |
| <meta name="description" content="A framework for easily creating beautiful presentations using HTML"> | |
| <meta name="author" content="Hakim El Hattab"> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <link rel="stylesheet" href="css/reveal.min.css"> | |
| <link rel="stylesheet" href="css/theme/default.css" id="theme"> | |
| <!-- For syntax highlighting --> | |
| <link rel="stylesheet" href="lib/css/zenburn.css"> | |
| <!-- If the query includes 'print-pdf', use the PDF print sheet --> | |
| <script> | |
| document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' ); | |
| </script> | |
| <!--[if lt IE 9]> | |
| <script src="lib/js/html5shiv.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <div class="reveal"> | |
| <!-- Any section element inside of this container is displayed as a slide --> | |
| <div class="slides"> | |
| <section> | |
| <h1>$title$</h1> | |
| <h3>$author$</h3> | |
| <p> | |
| <h4>$date$</h4> | |
| </p> | |
| </section> | |
| $body$ | |
| </div> | |
| <script src="lib/js/head.min.js"></script> | |
| <script src="js/reveal.min.js"></script> | |
| <script> | |
| // Full list of configuration options available here: | |
| // https://github.com/hakimel/reveal.js#configuration | |
| Reveal.initialize({ | |
| controls: true, | |
| progress: true, | |
| history: true, | |
| center: true, | |
| theme: Reveal.getQueryHash().theme, // available themes are in /css/theme | |
| transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none | |
| // Optional libraries used to extend on reveal.js | |
| dependencies: [ | |
| { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } }, | |
| { src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, | |
| { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, | |
| { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, | |
| { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }, | |
| { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } } | |
| // { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } } | |
| ] | |
| }); | |
| </script> | |
| </body> | |
| </html> |
@javimarlop Pandoc creates vertical slides for all headings greater than h1. Try this:
# Slide Title <!-- common for the following three subslides -->
## First vertical-subslide
- point one
- point two
- point three
## Second vertical-subslide
- point a
- point b
- point c
## First vertical-subslide
- point foo
- point bar
- point baz
Is there a way to specify per-slide background images, a la
<section data-background="http://example.com/image.png">
<h2>This slide will have a full-size background image.</h2>
</section>
How can I get out of vertical slides after I use it. Once I apply vertical slides with #, all the following slides with ## will become vertical subslides. How can I get back to horizontal ?
@dalang, you need to put ------- between horizontal slides.
An example (copying from @Bengt):
# Slide Title <!-- common for the following three subslides -->
## First vertical-subslide
- point one
- point two
- point three
## Second vertical-subslide
- point a
- point b
- point c
## First vertical-subslide
- point foo
- point bar
- point baz
----------
## Horizontals again!
Awesome.
- h4 cannot be inside p
- missing a close to div.reveal
Just a quick comment, I've had issues printing slides created with this template into a pdf. Chrome might do it properly, but wkhtmltopdf has problems. I've been able to solve it by replacing the printing script. So, where it says:
<script>
document.write( '<link rel="stylesheet" href="css/print/' +
( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) +
'.css" type="text/css" media="print">' );
</script>Replace it with:
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>Taken from the current master version of reveal.js. This solves it for me.
A quick note: this template is broken in a really minuscule way for current release (3.2.0) of reveal.js. It produces a call to a minified version of the reveal css and js files, but for whatever reason, the downloadable zip of the current reveal release just has human-readable versions, no minified available.
Quick fix: line 19 of the template should read <link rel="stylesheet" href="css/reveal.css"> and line 81 should read <script src="js/reveal.js"></script>
Of course, this can also just be solved in one's own installation of reveal just by making a minified version (or just changing the filenames)...
(Edit: I've made a fork to fix this glitch, also with a small python script to make the commandline a little simpler to handle and provide sensible defaults. https://gist.github.com/paultopia/0c57899407aed81f6932)
Hi. I can't see slides. What is wrong?
git clone git@gist.github.com:5017084.git pandoc-slides
cd $_
pandoc -t html5 --template=template-revealjs.html \
--standalone --section-divs \
--variable theme="beige" \
--variable transition="linear" \
slides.md -o slides.html
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello and thank you for the code! How do you create vertical slides?