name: front class: middle center inverse # Slideshow Help Creating Slideshows Markup ~ Simple ~ Offline ~ Flexible --- ## Overview The slideshow function allows team members to quickly and easily create a slideshow of their work. It is basically a two step process: * Drop a copy of the file into the _Talk/assets_ directory * Make a copy of an existing _Talk_ file, rename it, and edit the sourceUrl (around line 18) within it. Presentation notes can be added and there is even a presentation modus. --- ## Creating the slideshow You can either copy a file into the _Talk/assets_ or edit the html file and put the content in the "textarea". ### Using a text file The file has to be in Markdown format. Note: It __has to be__ copied to the _Talk/assets_: Files above or outside of the directory will not work. It is a security function of the browser. This can be annoying if you want to always link to the actual document in _Works_. It is not advisable to link files using the operating systems hard or soft links as this might cause problems on other operating systems, and may not be usable by others. --- ## Basic formating ### To separate the slides * Use three dashes i.e. __---__ to separate slides ### Colors and bold ```remark .red.bold[blabla] ``` will make .red.bold[blabla] red and bold. ### Footnotes ```remark .footnote[blabla] ``` --- ### Creating blocks ```remark .left-column[blabla] ...to place the text in the left column .right-column[blabla] ...to place the text in the right column .left[blabla] ...to position something left on the page .right[blabla] ...to position something right on the page ``` where "blabla" is your text. --- ### Centering page text Use the styling guide _class:_ to position the text on the page. ```remark name: agenda class: middle, center # Agenda Bla bla ``` The classes for vertically aligning text are: * top (default), middle, bottom The classes for horizontally aligning text are: * left (default), center, right --- ### Slide notes Use three question marks i.e. __???__ to separate slide content from slide notes: ```remark Slide 1 content ??? Slide 1 notes --- Slide 2 content ??? Slide 2 notes ``` --- ## Presentation mode Press __C__ to clone, i.e. open a new view of the slideshow in a new browser window. Press __P__ to switch to presenter mode. In presenter mode you can see your notes and a running clock. To show the slideshow on another screen: - Move the cloned view to the display visible to the audience - Put the slideshow into presenter mode - Navigate your slideshow as usual, and the cloned view will automatically keep up with what you see. --- ## Look and feel The slideshow uses a CSS file in the _.wiring/css/_ directory. The default file is _slideshow-with-remark.css_. To change the style i.e. to look the same as your corporate identity, it is advisable to have your own css stylesheet: * Copy the _slideshow-with-remark-template.css_ and give it your own name (i.e. slideshow-blabla.css) * Modify it to your taste. * Change the link to the stylesheet in the _Talk_ _.html_ files. --- ## Overview functionality The author has created an [overview of the functionality here](https://remarkjs.com). --- ## Formatting More info about formatting for the slideshow [can be found here]( https://github.com/gnab/remark/wiki/Formatting) --- ## For online use The path to the scripts can be changed to the following. *
*
--- ## Updating the slideshow script The slideshow function uses the remark.js script. It is to be found in the _.wiring/lib/remark.js_ directory. Or it can be downloaded from the Boxxd site above. If you need to update it you can get the [latest version here](http://remarkjs.com/downloads/remark-latest.min.js) Don't forget to update the _.tag_ file in the _scripts_ directory. --- ## More info about the utility More information about the Boxxd utility _util-remark-js_ [can be found here](../utils/remark-js.html)