% Title % Name % Date
List
The following variables can be defined from the command line:
pandoc -t html5 --template=template-revealjs.html \
--standalone --section-divs \
--variable theme="beige" \
--variable transition="linear" \
slides.md -o slides.html| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>$title$</title> | |
| <meta name="description" content="$title$"> | |
| $for(author)$ | |
| <meta name="author" content="$author$" /> | |
| $endfor$ | |
| <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"> | |
| $if(theme)$ | |
| <link rel="stylesheet" href="css/theme/$theme$.css" id="theme"> | |
| $else$ | |
| <link rel="stylesheet" href="css/theme/default.css" id="theme"> | |
| $endif$ | |
| <!-- For syntax highlighting --> | |
| $if(highlight-style)$ | |
| <link rel="stylesheet" href="lib/css/$highlight-style$.css"> | |
| $else$ | |
| <link rel="stylesheet" href="lib/css/zenburn.css"> | |
| $endif$ | |
| <!-- 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]--> | |
| $for(header-includes)$ | |
| $header-includes$ | |
| $endfor$ | |
| </head> | |
| <body> | |
| $for(include-before)$ | |
| $include-before$ | |
| $endfor$ | |
| <div class="reveal"> | |
| <!-- Any section element inside of this container is displayed as a slide --> | |
| <div class="slides"> | |
| <section> | |
| <h1>$title$</h1> | |
| $for(author)$<h3>$author$</h3>$endfor$ | |
| <p> | |
| <h4>$date$</h4> | |
| </p> | |
| </section> | |
| $if(toc)$ | |
| <section> | |
| <h2>Outline</h2> | |
| <nav id="$idprefix$TOC"> | |
| $toc$ | |
| </nav> | |
| </section> | |
| $endif$ | |
| $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: false, | |
| // available themes are in /css/theme | |
| $if(theme)$ | |
| theme: Reveal.getQueryHash().theme || '$theme$', | |
| $else$ | |
| theme: Reveal.getQueryHash().theme || 'default', | |
| $endif$ | |
| // default/cube/page/concave/zoom/linear/fade/none | |
| $if(transition)$ | |
| transition: Reveal.getQueryHash().transition || '$transition$', | |
| $else$ | |
| transition: Reveal.getQueryHash().transition || 'default', | |
| $endif$ | |
| // 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.
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
Hello and thank you for the code! How do you create vertical slides?