Table of Contents

s5reloaded plugin

Compatible with DokuWiki

DokuWiki 2009-12-25+, angua, adora belle

plugin Create advanced slideshow presentations from a DokuWiki page

Last updated on
Conflicts with

This extension has not been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues.

Similar to s5

Tagged with javascript, media, slideshow

S5 is a slide show format based entirely on XHTML, CSS, and JavaScript. With one file, you can run a complete slide show and have a printer-friendly version as well.

This plugin can create S5 slide show presentations from any DokuWiki page. It is similar to s5 plugin but with more features (it uses s5 reloaded version and includes scriptaculous effects). See presentation example at

Download and Install

Download: http://​​~alonso/​s5reloaded.tar.gz FIXME

Use the download link given above to download or install the plugin through the plugin manager. You will get only one theme called thesis. If you want the others (up to 20) download also and uncompress it inside ui subdirectory. All files inside any of the themes are independent from the others, so you can customize even the javascript code.


<script type="text/x-mathjax-config">
    tex2jax: {
        inlineMath: [ ["$","$"], ["\\\\(","\\\\)"] ],
        displayMath: [ ["$$","$$"], ["\\\\[","\\\\]"] ],
        processEscapes: true
<script type="text/javascript" src=""></script>


Usage is simple. Just add ~~SLIDESHOW thesis~~ somewhere in the page (at the very top is recommended, being thesis the name of the theme to use), and start your page with a H1 headline. Following content will go on the first (welcome) slide. Additional slides are created by H2 headlines. Adding a horizontal rule finishes the current slide and additional content goes to the “Handout” area (only visible when the slide is printed or if you select to show notes in the control bar). Footnotes and abbreviation will be ignored on the slide. The plugin accepts jsmath formulas and tips using wrap plugin.

Have a look at the example at (follow the link and press the slideshow icon in the upper right corner).

The themes which are included have a modified javascript code to enable special features. An example of these new features (subsection names, to modify the text with the date of the presentation, or to activate autoplay and select a different time delay for each page) is included in the previous presentation example. As with other tricks raw HTML code is required, but it is quite easy to use.


The plugin does not sem to work when mod_rewrite is used for URL rewriting in the standard dokuwiki way. The .js does not seem to be loaded correctly.

Bug (fixed)

Themes are not available in Dokuwiki configuration manager! To fix this bug:
The file metadata.php under lib\plugins\s5reloaded\conf shall be modified as follow:

$meta['template'] = array('dirchoice','_dir' => DOKU_INC.'lib/plugins/s5reloaded/ui/');


2011/06/18 14:37

Support for asciimathml plugin (fixed)

To have the ASCIIMathML plugin enabled in your slideshow, hack renderer.php like this made it work for me:

<!-- S5 JS -->
<script type="text/javascript" charset="utf-8" src="'.$this->base.'../../asciimathml/ASCIIMathML148.js" ></script>

Note: ASCIIMathML plugin conflicts with asciimath plugin, use one of them!


2011/06/18 14:16

Syntax highlighting (fixed?)

Q: How is it possible to have code syntax highlighting GeSHi enabled in S5reloaded?

Code syntax is already enabled, since html code generated is the same in the presentation mode. The question is maybe how to make the code looks similar to the styles defined in dokuwiki, which is a question of css design. The colors for the individual parts of the code are defined in /lib/styles/style.css (bottom), and can be changed there. For the global appearance … I'm not an expert in this field at all, but you can edit pretty.css and change .slide pre, .slide code, and .slide pre code with this:

/* code blocks by indention */
.slide pre {
  font-size: 8pt;
  padding: 0.5em;
  border: 1px dashed #aaaaff;
  color: Black;
  overflow: visible;
/*  background:#2e3436 url(pics/back_console.png) right bottom no-repeat ; */
/* code blocks by code tag */
.slide pre code {
  font-size: 8pt;
  padding: 0.5em;
  border: 1px dashed #aaaaff;
  color: Black;
  overflow: visible;
/* inline code words */
.slide code {
  font-size: 120%;