How to specify which reveal.js presentation to run from a local web server?

According to the reveal.js setup instructions, for some of the features to be available (like external Markdown and speaker notes), presentations need to run from a local web server.

However, if I follow the instructions there is no way to specify what presentation to start and all I get is a presentation containing two slides saying "Slide 1" and "Slide 2". When looking in the section above, it seems like it is the presentation "index.html" in the reveal.js repository that is presented, i.e. not the presentation I want to present.

How do I run my presentation from a local web server without copying or moving the contents of the reveal.js folder into the folder where my presentation is located and without copying, moving or renaming the presentation?

Use symbolic links.

Let's assume you have a directory under your home where you keep all your presentations. From the directory where you installed reveal.js run:

ln -s ~/presentations presentations

Then in the browser visit http://localhost:8000/presentations to get a list of all your presentation files (except of course if one of them is named index.html). Click any one of them to show it.

Note: If your presentations are located outside the server's root directory (the directory where you installed reveal.js), reveal.js resource links have to be absolute and not relative. This way, they'll get picked up as relative to the root directory (where reveal.js resides) instead of the current directory (where the presentations reside).

E.g. in the example presentation file, you would need to turn these lines:

<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css">
<link rel="stylesheet" href="lib/css/zenburn.css">
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }

into:

<link rel="stylesheet" href="/css/reveal.css">
<link rel="stylesheet" href="/css/theme/black.css">
<link rel="stylesheet" href="/lib/css/zenburn.css">
<script src="/lib/js/head.min.js"></script>
<script src="/js/reveal.js"></script>
{ src: '/plugin/markdown/marked.js' },
{ src: '/plugin/markdown/markdown.js' },
{ src: '/plugin/notes/notes.js', async: true },
{ src: '/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }

Recommended topics

Hot tags