1DokuWiki plugin Reveal.js 2========================= 3 4Reval.js plugin for DokuWiki 5 6This started as a fork of Andreas Gohr's S5 plugin https://www.dokuwiki.org/plugin:s5. 7 8It uses Reveal.js https://github.com/hakimel/reveal.js/. 9 10 11 12Install 13------- 14 15Paste the address git config http://github.com/neuralyzer/dokuwiki-plugin-revealjs/zipball/master in the manual installation field or use Dokuwiki's extension manager. 16 17 18 19Usage 20----- 21 22Add `~~REVEAL~~` to a page to insert a button for presentation start. In the past this was optional - now it is mandatory, because the plugin logic depends on the information, if reveal is used on the page or not. And the keyword `~~REVEAL~~` on the top of the page is used to indicate this. 23 24Every new H1 or H2 section, that is 6 equal signs or 5 equal signs open per default a new slide horizontally. 25New H3 sections (4 equal signs) are appended vertically if they follow after an H2 section. 26 27 28Check also the source code of the [example presentation](example_presentation.dokuwiki) 29 30 31 32Include plugin compatibility 33---------------------------- 34 35Edit in the file dokuwiki/lib/plugin/include/syntax/wrap.php in the function render the line 36 37``` 38if ($mode == 'xhtml') { 39``` 40to 41 42``` 43if ( ($mode == 'xhtml') && (! is_a($renderer, 'renderer_plugin_revealjs')) ) { 44``` 45The include plugin will otherwise put some 46 47``` 48<div class= "plugin_include_content ..." ...> ...</div> 49``` 50 51at such places that the closing and opening div tags interfere with the reveal.js section tags. 52 53 54 55MathJax compatibility 56---------------------- 57 58At the moment this plugin loads MathJax from the MathJax CDN directly whether the Dokuwiki MathJax plugin is installed or not. It ignores Dokuwiki's MathJax plugin and the custom settings you might have made. 59 60 61 62Configuration options 63--------------------- 64 65Configuration is done in DokuWiki's configuration manager. 66 67 68 69 70 71### Available themes 72 73Available themes are the Reveal.js themes. Possible values: 74 75 * black 76 * white 77 * beige 78 * blood 79 * league 80 * default 81 * moon 82 * night 83 * serif 84 * simple 85 * sky 86 * solarized 87 * dokuwiki (solarized with DokuWiki default theme background color, switched on image borders are recommended :-) 88 89The default is white. 90 91 92### Controls 93 94Show the reveal.js controls. Two values 95 96 * false 97 * true 98 99The default is false. 100 101 102### Progress bar 103 104Show the reveal.js progress bar. Two values 105 106 * false 107 * true 108 109The default is false. 110 111 112### Build all lists 113 114Whether to build up all lists point by point. Two values 115 116 * false 117 * true 118 119The default is false. 120 121 122### Transition 123 124The slide transition. Possible settings: 125 126 * none 127 * fade 128 * slide 129 * convex 130 * concave 131 * zoom 132 133The default is fade. 134 135 136### Horizontal slide level 137 138Headers on this level or above starting a horizontal slide. Levels below starting a vertical (nested) slide - no effect on slides, which are indicated by alternative slide indicators (`---->` and `---->>`). Possible settings: 139 140 * 1 141 * 2 142 143The default is 2. 144 145 146### Enlarge vertical slide headers 147 148Enlarge headers on slides below horizontal_slide_level - no effect on slides, which are indicated by alternative slide indicators (`---->` and `---->>`). Boolean: 149 150* false 151* true 152 153The default is false. 154 155 156### Image borders 157 158Show image borders (default in Reveal.js). Boolean: 159 160* false 161* true 162 163The default is false. 164 165 166### Size 167 168Base size of the slides in pixels - slides will bee zoomed to fit in the available space 169 170* `<width>x<height>` 171* Default is `960x700` 172 173 174### Auto Slide 175 176Automatically move the presentation to the next slide in milliseconds. If this is set to 0, automatic progression is disabled. 177 178* Numeric value to wait in milliseconds 179 180The default is 0. 181 182 183### Loop 184 185Loop the presentation back to the first slide after the last slide. Boolean: 186 187* false 188* true 189 190The default is false. 191 192 193 194Supported dokuwiki syntax 195------------------------- 196 197Apart of the ordinary things like headlines, tables, italic, bold etc. the following syntax elements are supported: 198 199 * alignment of images: either left or right or centered 200 * dokuwiki plugin wrap's `<wrap lo></wrap>` and `<WRAP lo></WRAP>` produce also in the presentation smaller text. 201 * `<WRAP clear></WRAP>` for clearing of floats 202 203 204 205Extra syntax 206------------ 207 208 209### Theme selection and button for presentation start 210 211Putting on the top of the page a 212``` 213~~REVEAL~~ 214``` 215will insert at this position a button. A click on this button then starts the presentation with the default theme. 216 217Alternatively, to select a theme put a 218``` 219~~REVEAL theme_name~~ 220``` 221with `theme_name` replaced by one of the reveal.js themes as listed under "Available themes". 222 223All other options are also overwritable in a wiki page by using the URL query parameter syntax: 224``` 225~~REVEAL theme=sky&transition=convex&controls=1&show_progress_bar=1&build_all_lists=1&show_image_borders=0&horizontal_slide_level=2&enlarge_vertical_slide_headers=0&show_slide_details=1&open_in_new_window=1&auto_slide=6000&loop=1~~ 226``` 227Please note that boolean values must be numeric (1 or 0). If you want to be able to change the options directly in the URL after the presentation has started, then you have to disable DokuWiki's caching by putting `~~NOCACHE~~` at the top of the page. 228 229 230### Slide background 231 232The plugin introduces the syntax 233 234``` 235{{background>parameters}} 236``` 237 238For all possible parameters see alternative slide indicator below. 239 240The so defined background will be applied to the next slide. I.e. the background tag has to preceed the heading opening the next slide and will only apply to that slide. For example 241 242``` 243{{background>:wiki:dokuwiki-128.png}} 244===== my heading===== 245 246slide with background 247 248===== my second heading===== 249 250slide without background 251``` 252 253produces one slide with background and a second slide without background. 254 255 256### Alternative slide indicators 257 258``` 259---- salmon wiki:dokuwiki-128.png 10% repeat bg-slide no-footer ----> 260 261<notes> 262This slide has no content, but therefore a fancy background... 263</notes> 264 265<---- 266``` 267 268- `---->` opens a new slide with the default transition in the default speed (open previous slides will be closed implicitly) 269- Full example - parameters are parsed dynamically like in CSS, the parameter order is not important and whitespaces are not allowed because we split all keywords on whitespaces: `---- orange wiki:dokuwiki-128.png 10% repeat bg-slide zoom-in fade-out slow no-footer ---->` 270 - All possible HTML color names and codes are supported: `red`, `#f00`, `#ff0000`, `rgb(255,0,0)`, `rgba(255,0,0,0.5)`, `hsl(0,100%,50%)`, `hsla(0,100%,50%,0.5)` 271 - Background images are recognized case insensitive by the endings gif, png, jpg, jpeg, svg and can be a DokuWiki image identifier (`:wiki:dokuwiki-128.png`) or a normal image link ('http://host.tld/path/to/image.png') 272 - Background image size is recognized by postfix `%` and `px` or by keywords `auto`, `contain` and `cover` (cover is the default in Reveal.js) - example: `10%` or `250px` (it is generally recommended to use only percent values - they are scaling nice with the rest of the slide and the slide background preview on the wiki page shows you a "real" preview) 273 - Background image position is recognized by keywords `top`, `bottom`, `left`, `right`, `center` (center is the default in Reveal.js) or alternative by x,y values in px or % - examples: `top left`, `bottom center`, `3%,5%`, `20px,5%` (the comma is needed to distinguish between image size and position - it is generally recommended to use only percent values - they are scaling nice with the rest of the slide and the slide background preview on the wiki page shows you a "real" preview) 274 - Background image repeat is recognized by the keyword `repeat` (no-repeat is the default in Reveal.js) 275 - Background transition: prefix `bg-` followed by `none`, `fade`, `slide`, `convex`, `concave` or `zoom` 276 - Slide transition: `none`, `fade`, `slide`, `convex`, `concave` or `zoom` followed by optional postfix `-in` or `-out` for different transitions on one slide 277 - Transition speed: `default`, `fast`, `slow` 278- `---->>` opens a new slide container for vertical (nested) slides and a new slide with the given options - example: `---- red zoom ---->>` 279- The next `---->>` will close the previous container (and slide) implicitly 280- Technical details: 281 - In the rendering the slide mode changes from "headers driven" to "special horizontal rule driven" - headers are no longer interesting in this mode for slide changes 282 - You can create of course a whole presentation with this alternative slide indicator 283 - if you want to leave this slide mode you need a way to explicit close a slide or container: 284 - `<<----` closes a slide container (and possibly open slide inside) 285 - `<----` closes a slide 286 287 288### Footers 289 290Sometimes you might want to have a footer for all the pages. This footer might contain your company's logo or similar things. Footers are most conveniently added using in addition the dokuwiki plugin "wrap". To get a footer on each page put at the very beginning of your document, i.e. before the first heading but possibly after a ``~~NOCACHE~~`` or ``~~REVEAL~~`` the following block 291``` 292<wrap footer>Footer content here.</wrap> 293``` 294This inserts a footer on every single page. If you want the footer to disappear for a specific page place before that page's heading a ``{{no-footer}}``. For example 295``` 296{{no-footer}} 297===== my heading===== 298 299slide without footer 300 301 302{{no-footer}} 303{{background>:images:image1.png}} 304===== my heading===== 305 306Slide without footer and with background 307 308 309{{background>:images:image1.png no-footer}} 310===== my heading===== 311 312no-footer as option in background definition 313 314 315---- no-footer ----> 316 317Slide with alternative slide indicator 318 319----> 320 321Next slide with footer and stop alternative 322slide indicator mode 323 324<---- 325 326``` 327 328 329### Speaker notes 330 331- https://github.com/hakimel/reveal.js#speaker-notes 332- keyword: `<notes>` (no parameters) 333- No changes on wiki pages 334- On a slideshow the content is wrapped into `<aside class="notes">` and invisible (only shown on speaker notes - shortkey s) 335- Lists in notes are always NOT incremental, because the list is unvisible and you would have to press the next key for each entry without any obvious effect 336 337Example: 338``` 339<notes> 340- your content 341- here 342</notes> 343``` 344 345 346### Fragments 347 348- https://github.com/hakimel/reveal.js#fragments 349- `<fragment>` for inline usage (only formatting and substitutions supported) 350- `<fragment-block>` for any wiki content 351- `<fragment-list>` to overwrite the global option build_all_lists (if false) 352- `<no-fragment-list>` to overwrite the global option build_all_lists (if true) 353- support for style and index where possible - see also example_presentation.dokuwiki and http://lab.hakim.se/reveal-js/#/7/1 354 355Example: 356``` 357<fragment>Hit the next arrow...</fragment> 358 359<fragment>... to step through ...</fragment> 360 361<fragment>... a</fragment> <fragment>fragmented</fragment> <fragment>slide.</fragment> 362``` 363 364 365PDF export 366---------- 367 368Presentations can be exported as PDF. To do so append a `&print-pdf` to the URL. When you are able to edit the page, there is a export PDF link rendered under the start slideshow button. 369 370For example if the URL of your DokuWiki reveal.js presentation is usually 371``` 372http://example-dokuwiki.com/doku.php?do=export_revealjs&id=example:page 373``` 374you would have to change this manually in the address bar of your browser to 375 376``` 377http://example-dokuwiki.com/doku.php?do=export_revealjs&id=example:page&print-pdf 378``` 379After that the presentation looks weird in the browser but can be printed via you browser's print function. 380Officially only Chromium and Chrome are supported for PDF export. Check also the [Reveal.js PDF export documentation](https://github.com/hakimel/reveal.js#pdf-export). 381
){kind=link}
