├── README.md ├── about.md ├── attic └── gallery.md ├── code.md ├── commands.md ├── g ├── gradient-diagonal.svg ├── gradient-left-right.svg ├── gradient-radial-off-center.svg ├── gradient-radial-repeat.svg ├── gradient-radial.svg ├── gradient-repeat.svg ├── gradient-styles-blue.svg ├── gradient-styles-red.svg └── gradient-top-bottom.svg ├── gallery.md ├── gradient-styles-red.html ├── i └── slideshow.png ├── index.md ├── markdown.md ├── more.md ├── plugins.md ├── settings.md ├── templates.md └── themes.md /README.md: -------------------------------------------------------------------------------- 1 | # Slide Show (S9) Docs 2 | 3 | - [What's Slide Show (S9)?](index.md) 4 | - [Settings, Tips, Tricks and More](more.md) 5 | - [Plugins, Helpers and Extensions](plugins.md) 6 | - [Code/Syntax Highlighting Helpers](code.md) 7 | - [Template Gallery](gallery.md) 8 | - [Gradient Background Themes](themes.md) 9 | - [Create Your Own Templates](templates.md) 10 | - [Commands, Commands, Commands](commands.md) 11 | - [Settings Reference](settings.md) 12 | - [What's Markdown?](markdown.md) 13 | - [About](about.md) 14 | -------------------------------------------------------------------------------- /about.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: About 3 | --- 4 | 5 | Gerald Bauer and contributors designed and coded the `slideshow` machinery. 6 | See the change log for contributions and credits. 7 | 8 | ## License 9 | 10 | License. The slide show scripts and templates are dedicated to the public domain. 11 | Use it as you please with no restrictions whatsoever. 12 | 13 | ## Questions? Comments? 14 | 15 | Questions? Comments? Send them along to the 16 | [wwwmake mailing list/forum](http://groups.google.com/group/wwwmake). 17 | Thanks! 18 | -------------------------------------------------------------------------------- /attic/gallery.md: -------------------------------------------------------------------------------- 1 | # Old Gallery Themes (No Longer In Use/Working) 2 | 3 | 4 | 5 | ### Upstage 6 | 7 | Template pack using Upstage - a simple slideshow system built with YUI 3 by Reid Burke. 8 | 9 | ``` 10 | $ slideshow install https://raw.github.com/reid/upstage/master/upstage.txt 11 | ``` 12 | 13 | [More »](https://github.com/reid/upstage) 14 | 15 | 16 | ### deck.js.sh 17 | 18 | Template pack using deck.js with SyntaxHighlighter (sh) by Ralph Möritz. 19 | 20 | ``` 21 | $ slideshow install https://raw.github.com/ralph-moeritz/slideshow-deck.js.sh/master/deck.js.sh.txt 22 | ``` 23 | 24 | [More »](https://github.com/ralph-moeritz/slideshow-deck.js.sh) 25 | 26 | 27 | 28 | ### reveal 29 | 30 | Template pack using reveal.js by Adolfo Villafiorita. 31 | 32 | ``` 33 | $ slideshow install https://raw.github.com/avillafiorita/slideshow-reveal.js/master/reveal.txt 34 | ``` 35 | or 36 | 37 | ``` 38 | $ slideshow install reveal 39 | ``` 40 | 41 | [Docu](https://github.com/avillafiorita/slideshow-reveal.js/blob/master/doc/s9-reveal.textile) · 42 | [More »](https://github.com/avillafiorita/slideshow-reveal.js) 43 | 44 | 45 | 46 | ### Shower 47 | 48 | Template pack using Shower by Adolfo Villafiorita. 49 | 50 | ``` 51 | $ slideshow install https://raw.github.com/avillafiorita/slideshow-shower/master/shower.txt 52 | ``` 53 | 54 | [Docu](https://github.com/avillafiorita/slideshow-shower/blob/master/doc/tutorial.textile) · 55 | [More »](https://github.com/avillafiorita/slideshow-shower) 56 | 57 | 58 | -------------------------------------------------------------------------------- /code.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Code/Syntax Highlighting Helpers 3 | --- 4 | 5 | 6 | ## Hello, Syntax Highlighting Helper! 7 | 8 | Slide Show (S9) lets you include and syntax highlight code 9 | with the `code` helper. Example: 10 | 11 | ``` 12 | <% code do %> 13 | # The Greeter class 14 | class Greeter 15 | def initialize(name) 16 | @name = name.capitalize 17 | end 18 | 19 | def salute 20 | puts "Hello #{@name}!" 21 | end 22 | end 23 | 24 | # Create a new object 25 | g = Greeter.new("world") 26 | 27 | # Output "Hello World!" 28 | g.salute 29 | <% end %> 30 | ``` 31 | 32 | becomes 33 | 34 |
35 | 
   1  # The Greeter class
 36 |    2  class Greeter
 37 |    3    def initialize(name)
 38 |    4      @name = name.capitalize
 39 |    5    end
 40 |    6   
 41 |    7    def salute
 42 |    8      puts "Hello #{@name}!"
 43 |    9    end
 44 |   10  end
 45 |   11   
 46 |   12  # Create a new object
 47 |   13  g = Greeter.new("world")
 48 |   14   
 49 |   15  # Output "Hello World!"
 50 |   16  g.salute
 51 |
52 |
53 | 54 | 55 | ## Client-Side vs. Server-Side Syntax Highlighting - Your Choice 56 | 57 | Slide Show (S9) ships with three built-in syntax highlighting helper engines 58 | letting you choose between client-side syntax highlighting in JavaScript 59 | (the out-of-the-gem factory setting) or server-side ahead-of-time 60 | syntax highlighting in classic Ruby. 61 | 62 | ### What's SyntaxHighlighter? 63 | 64 | SyntaxHighligher is a free, open-source syntax highlighter in JavaScript: 65 | 66 | * [SyntaxHighlighter Project Site](http://alexgorbatchev.com/SyntaxHighlighter/) 67 | * [SyntaxHighlighter Languages](http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/) 68 | * [SyntaxHighlighter Themes](http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/) 69 | 70 | Note, if you use the SyntaxHighligher engine you will need to 71 | use the [`s6syntax`](http://github.com/slideshow-templates/slideshow-s6-syntax-highlighter) 72 | template pack that includes the SyntaxHighlighter machinery or as an alternative 73 | bundle up your own template pack. 74 | 75 | ### What's Ultraviolet? 76 | 77 | Ultraviolet is a free, open-source syntax highlighting engine 78 | in Ruby that uses Textmate syntax files offering out-of-the-gem 79 | syntax highlighting for more than fifty languages in twenty themes: 80 | 81 | * [Ultraviolet Project Site](http://ultraviolet.rubyforge.org) 82 | * [Ultraviolet Languages](http://ultraviolet.rubyforge.org/syntax_gallery.xhtml) 83 | * [Ultraviolet Themes](http://ultraviolet.rubyforge.org/themes.xhtml) 84 | 85 | To use Ultraviolet for syntax highlighting install the Ruby gem e.g. 86 | 87 | ``` 88 | $ gem install ultraviolet 89 | ``` 90 | 91 | and switch the `code-engine` setting to `uv` or `ultraviolet`. 92 | 93 | ### What's CodeRay? 94 | 95 | CodeRay is another free, open source syntax highlighting engine 96 | in Ruby: 97 | 98 | * [CodeRay Project Site](http://coderay.rubychan.de) 99 | 100 | To use CodeRay for syntax highlighting install the Ruby gem e.g. 101 | 102 | ``` 103 | $ gem install coderay 104 | ``` 105 | 106 | and switch the `code-engine` setting to `coderay`. 107 | 108 | 109 | ## Using the `code` Helpers for Syntax Highlighting 110 | 111 | The `code` helper lets you include and syntax highlight code inline e.g. 112 | 113 | 114 | 115 | 125 |
116 | Classic-style: 117 | 118 | ``` 119 | <% code do %> 120 | puts 'Hello World! 121 | <% end %> 122 | ``` 123 | 124 | 126 | Django-Style: 127 | 128 | ``` 129 | {% raw %}{% code %} 130 | puts 'Hello World! 131 | {% end %}{% endraw %} 132 | ``` 133 |
134 | 135 | or include code from a file - lets say `hello.rb`: 136 | 137 | 138 | 139 | 144 |
140 | ``` 141 | <%= code 'hello.rb' %> 142 | ``` 143 | 145 | ``` 146 | {% raw %}{{ code hello.rb }}{% endraw %} 147 | ``` 148 |
149 | 150 | To select the language (default is `ruby`) use the `:lang` option e.g. 151 | 152 | 153 | 154 | 159 |
155 | ``` 156 | <%= code 'effects.css', lang: => 'css' %> 157 | ``` 158 | 160 | ``` 161 | {% raw %}{{ code effects.css lang=css }}{% endraw %} 162 | ``` 163 |
164 | 165 | Note, you can also include parts of files 166 | using [Codex-style markers](http://pragdave.blogs.pragprog.com/pragdave/2008/05/our-take-on-pre.html) 167 | in your source (e.g. `#START:your_marker_here` and 168 | `#END:your_marker_here`) and you can also pass along an extra CSS class 169 | (`large`, `small`, `tiny`, etc.) e.g. this directive in Codex 170 | 171 | ``` 172 | :code code/meta/my_ostruct.rb[impl class=code-small] 173 | ``` 174 | 175 | becomes in S9: 176 | 177 | 178 | 179 | 184 |
180 | ``` 181 | <%= code 'code/meta/my_ostruct.rb#impl', class:=>'small' %> 182 | ``` 183 | 185 | ``` 186 | {% raw %}{{ code code/meta/my_ostruct.rb#impl class=small }}{% endraw %} 187 | ``` 188 |
189 | 190 | 191 | To select the underlying engine for syntax highlighting use the `:engine` option e.g. 192 | 193 | 194 | 195 | 200 |
196 | ``` 197 | <%= code 'highlight.rb', :engine => 'sh' %> 198 | ``` 199 | 201 | ``` 202 | {% raw %}{{ code highlight.rb engine=sh }}{% endraw %} 203 | ``` 204 |
205 | 206 | or use a header to set it once e.g: 207 | 208 | ``` 209 | code-engine: sh # or use your very own code engine here 210 | ``` 211 | 212 | You can also use the built-in code highlighting engines 213 | "stand-alone" without the code "wrapper" helper. 214 | 215 | To use SyntaxHighlighter use: 216 | 217 | ``` 218 | <% sh do %> 219 | puts 'Hello World! 220 | <% end %> 221 | ``` 222 | 223 | To use Ultraviolet use: 224 | 225 | ``` 226 | <% uv do %> 227 | puts '¡Hola Mundo! 228 | <% end %> 229 | ``` 230 | 231 | To use CodeRay use: 232 | 233 | ``` 234 | <% coderay do %> 235 | puts 'Hallo Welt! 236 | <% end %> 237 | ``` 238 | 239 | Note, that the `sh`, `uv` and `coderay` helpers 240 | only support inline code (if you want to include code use a nested include e.g.: 241 | 242 | ``` 243 | <% sh :lang => 'css', :line_numbers => 'off' do %> 244 | <%= include 'gradients.css' %> 245 | <% end %> 246 | ``` 247 | 248 | For more options or on how to write your own syntax highlighting 249 | helpers check the [source of the syntax higlighting helpers](https://github.com/slideshow-s9/slideshow/tree/master/slideshow-models/lib/slideshow/helpers/syntax). 250 | -------------------------------------------------------------------------------- /commands.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Commands Reference 3 | --- 4 | 5 | 6 | ## Commands, Commands, Commands 7 | 8 | Welcome to the slide show (s9) command line tool. 9 | To see all commands type: 10 | 11 | $ slideshow help 12 | 13 | resulting in: 14 | 15 | 16 | ``` 17 | SYNOPSIS 18 | slideshow [global options] command [command options] [arguments...] 19 | 20 | VERSION 21 | 3.0.0 22 | 23 | GLOBAL OPTIONS 24 | -c, --config=PATH - Configuration Path (default: ~/.slideshow) 25 | --verbose - (Debug) Show debug messages 26 | --version - Show version 27 | 28 | COMMANDS 29 | build, b - Build slideshow 30 | install, i - Install template pack 31 | list, ls, l - List installed template packs 32 | new, n - Generate quick starter sample 33 | about, a - (Debug) Show more version info 34 | help - Shows a list of commands or help for one command 35 | ``` 36 | 37 | 38 | ## `build` Command 39 | 40 | ``` 41 | NAME 42 | build - Build slideshow 43 | 44 | SYNOPSIS 45 | slideshow [global options] build [command options] FILE 46 | 47 | COMMAND OPTIONS 48 | --h1 - Set Header Level to 1 (default) 49 | --h2 - Set Header Level to 2 50 | --takahashi - Allow // for slide breaks 51 | --slide - Use only !SLIDE for slide breaks (Showoff Compatible) 52 | -o, --output=PATH - Output Path (default: .) 53 | -t, --template=MANIFEST - Template Manifest (default: s6blank) 54 | 55 | EXAMPLES 56 | slideshow build microformats.text 57 | slideshow build microformats.text -o slides # Output slideshow to slides folder 58 | slideshow build microformats.text -t s6blank # Use your own slide show templates (e.g. s6blank) 59 | ``` 60 | 61 | 62 | ## `list` Command 63 | 64 | ``` 65 | NAME 66 | list - List installed template packs 67 | 68 | SYNOPSIS 69 | slideshow [global options] list [command options] 70 | 71 | EXAMPLES 72 | slideshow list 73 | slideshow ls 74 | ``` 75 | 76 | 77 | ## `install` Command 78 | 79 | ``` 80 | NAME 81 | install - Install template pack 82 | 83 | SYNOPSIS 84 | slideshow [global options] install [command options] MANIFEST 85 | 86 | COMMAND OPTIONS 87 | -a, --all - Template Packs (s5blank, s5themes, slidy, g5, csss, deck.js, impress.js) 88 | 89 | EXAMPLES 90 | slideshow install impress.js 91 | slideshow install https://raw.github.com/slideshow-templates/slideshow-impress.js/master/impress.js.txt 92 | ``` 93 | 94 | 95 | ## `new` Command 96 | 97 | ``` 98 | NAME 99 | new - Generate quick starter sample 100 | 101 | SYNOPSIS 102 | slideshow [global options] new [command options] 103 | 104 | COMMAND OPTIONS 105 | -o, --output=PATH - Output Path (default: .) 106 | -t, --template=MANIFEST - Template Manifest (default: welcome) 107 | 108 | EXAMPLES 109 | slideshow new 110 | slideshow new -t impress.js 111 | ``` 112 | -------------------------------------------------------------------------------- /g/gradient-diagonal.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /g/gradient-left-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /g/gradient-radial-off-center.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /g/gradient-radial-repeat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /g/gradient-radial.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /g/gradient-repeat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /g/gradient-styles-blue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 59 | 60 | 62 | 63 | 65 | 66 | 68 | 69 | 71 | 72 | 74 | 75 | 77 | 78 | 80 | 81 | 83 | -------------------------------------------------------------------------------- /g/gradient-styles-red.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /g/gradient-top-bottom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /gallery.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Template Gallery 3 | --- 4 | 5 | 6 | ## S6 Series 7 | 8 | S6 is a modern slide show template using HTML5, CSS3 and JavaScript (w/ jQuery). 9 | See the [S6 Project Site](https://github.com/slidekit/s6) for more. 10 | 11 | Keyboard controls: 12 | 13 | Action | Key 14 | -------------------- | --- 15 | Go to next slide | Space Bar, Right Arrow Down Arrow, Page Down 16 | Go to previous slide | Left Arrow, Up Arrow, Page Up 17 | Go to first slide | Home 18 | Go to last slide | End 19 | Toggle between slideshow and outline view (`Ø`) | T 20 | Show/hide slide controls (`Ø` `«` `»`) | C, Move mouse to bottom right corner 21 | 22 | 23 | ### S6 Blank 24 | 25 | Sample template package using the S6 blank package. 26 | 27 | [Live Sample](http://slideshow-templates.github.io/slideshow-s6-blank/slides.html) · 28 | [Live Sample PDF](http://slideshow-templates.github.io/slideshow-s6-blank/slides.pdf.html) · 29 | [More »](https://github.com/slideshow-templates/slideshow-s6-blank) 30 | 31 | 32 | ### S6 Blank w/ Syntax Highlighter 33 | 34 | Sample template package using the S6 blank package. 35 | Includes SyntaxHighlighter - a free, open source syntax highlighter in JavaScript. 36 | 37 | [More »](https://github.com/slideshow-templates/slideshow-s6-syntax-highlighter) 38 | 39 | 40 | 41 | ## reveal.js 42 | 43 | reveal.js is a slide show template by Hakim El Hattab et al. 44 | 45 | ### reveal.js Sample 46 | 47 | Sample template package using the reveal.js package. 48 | 49 | [Live Sample](http://slideshow-templates.github.io/slideshow-reveal.js/slides.html) · 50 | [More »](https://github.com/slideshow-templates/slideshow-reveal.js) 51 | 52 | 53 | 54 | ## Shower 55 | 56 | Shower is a slide show template by Vadim Makeev et al. 57 | 58 | ### Shower (Ribbon Theme) Sample 59 | 60 | Sample template package using the Shower package. 61 | 62 | [Live Sample](http://slideshow-templates.github.io/slideshow-shower/slides.html) · 63 | [More »](https://github.com/slideshow-templates/slideshow-shower) 64 | 65 | 66 | 67 | ## CSSS 68 | 69 | CSSS is a slide show template by Lea Verou. 70 | 71 | ### CSSS Sample 72 | 73 | Sample template package using the CSSS template. 74 | 75 | [Live Sample](http://slideshow-templates.github.io/slideshow-csss/slides.html) · 76 | [More »](https://github.com/slideshow-templates/slideshow-csss) 77 | 78 | 79 | 80 | ## deck.js 81 | 82 | deck.js is a slide show template by Caleb Troughton (aka imakewebthings). 83 | 84 | ### deck.js Sample 85 | 86 | Sample template package using the deck.js package. 87 | 88 | [Live Sample](http://slideshow-templates.github.io/slideshow-deck.js/slides.html) · 89 | [More »](https://github.com/slideshow-templates/slideshow-deck.js) 90 | 91 | 92 | 93 | 94 | 95 | ## impress.js 96 | 97 | impress.js is a slide show template by Bartek Szopka (aka bartaz) et al. 98 | 99 | ### impress.js Sample 100 | 101 | Sample template package using the impress.js package. 102 | 103 | [Live Sample](http://slideshow-templates.github.io/slideshow-impress.js/slides.html) · 104 | [More »](https://github.com/slideshow-templates/slideshow-impress.js) 105 | 106 | 107 | ## bespoke.js 108 | 109 | bespoke.js is a slide show template by by Mark Dalgleish et al. 110 | 111 | ### bespoke.js (Cube Theme) Sample 112 | 113 | Sample template package using the bespoke.js package. 114 | 115 | [Live Sample](https://slideshow-templates.github.io/slideshow-bespoke.js/slides.html) · 116 | [More »](https://github.com/slideshow-templates/slideshow-bespoke.js) 117 | 118 | 119 | 120 | 121 | ## Google HTML5 Rocks 122 | 123 | `html5-slides` is a slide show template 124 | by Google used for the Google I/O conference in 2011 125 | 126 | 127 | ### Google HTML5 Rocks Sample 128 | 129 | Sample template package using Google's `html5-slides` code. 130 | 131 | [Live Sample](http://slideshow-templates.github.io/slideshow-google-html5-slides/slides.html5.html) · 132 | [More »](https://github.com/slideshow-templates/slideshow-google-html5-slides) 133 | 134 | 135 | 136 | ## S5 Series 137 | 138 | Simple Standards-based Slide Show System (S5) is a classic public domain (free, open source) 139 | slide show package inspired by Opera Show and others that works in all modern browsers 140 | without any plugin required because it includes its own slide show machinery in JavaScript. 141 | See the [S5 Project Site](http://meyerweb.com/eric/tools/s5) for more. 142 | 143 | ### S5 Blank Sample 144 | 145 | Sample template package using the S5.11 blank package. 146 | 147 | [Live Sample](http://slideshow-templates.github.io/slideshow-s5-blank/slides.html) · 148 | [More »](https://github.com/slideshow-templates/slideshow-s5-blank) 149 | 150 | 151 | ### S5 (Blue, I18N and Pixel Themes) Sample 152 | 153 | Sample template package using the S5.11 package including three themes, that is, Blue, I18N 154 | and Pixel. 155 | 156 | [More »](https://github.com/slideshow-templates/slideshow-s5-themes) 157 | 158 | 159 | 160 | 161 | ## Slidy 162 | 163 | Slidy is slide show template by Dave Raggett 164 | 165 | ### Slidy (W3C Blue Theme) Sample 166 | 167 | Sample template package using the Slidy2 machinery 168 | 169 | [Live Sample](http://slideshow-templates.github.io/slideshow-slidy/slides.w3c.html) · 170 | [More »](https://github.com/slideshow-templates/slideshow-slidy) 171 | 172 | 173 | 174 | 175 | ## How To Fetch New Template Packages? 176 | 177 | Using the `install` command lets you fetch (install) new templates. 178 | [More »](#how-to-fetch-new-template-packages) 179 | 180 | 181 | ## Got Templates? 182 | 183 | Share your templates. Send a link and announcement to the 184 | [wwwmake forum/mailing List](http://groups.google.com/group/wwwmake) 185 | and get added here. Thanks! 186 | -------------------------------------------------------------------------------- /gradient-styles-red.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 112 | 113 | 114 | 115 |
116 |
117 |
118 |
119 | 120 |
121 |
122 |
123 | 124 |
125 |
126 |
127 |
-------------------------------------------------------------------------------- /i/slideshow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/slideshow-s9/docs/3c2fbf521c722bf314cc9702b97de234fa710e45/i/slideshow.png -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Welcome 3 | --- 4 | 5 | ## What's Slide Show (S9)? 6 | 7 | A free command line tool that lets you build slide shows 8 | from your notes 9 | written in plain text with markdown formatting conventions. 10 | The Slide Show (S9) project also collects and welcomes themes 11 | and ships "out-of-the-box" with built-in support 12 | for "loss-free" gradient vector graphics backgrounds. 13 | 14 | 15 | ## Getting Started in 1-2-3 Easy Steps 16 | 17 | * Step 1: Write your slides in plain text with markdown formatting conventions 18 | * Step 2: Build your slide show using the `slideshow` command line tool 19 | * Step 3: Open up your slide show (web page) in your browser and hit the space bar to flip through your slides 20 | * That's it. Showtime! 21 | 22 | 23 | ### Step 0: Install the `slideshow` command line tool and setup template packs 24 | 25 | Use the Ruby package manager, that is, `gem` to install: 26 | 27 | ``` 28 | $ gem install slideshow 29 | ``` 30 | 31 | Use the Slide Show (S9) command line tool to download (fetch) the S6 Blank template pack: 32 | 33 | ``` 34 | $ slideshow install s6blank # fetch s6 blank template pack 35 | ``` 36 | 37 | To double check what template packs you have installed try: 38 | 39 | ``` 40 | $ slideshow list 41 | ``` 42 | 43 | resulting in: 44 | 45 | ``` 46 | Installed template packs in search path 47 | [1] templates/*.txt 48 | [2] templates/*/*.txt 49 | [3] node_modules/*/*.txt 50 | [4] ~/.slideshow/templates/*.txt 51 | [5] ~/.slideshow/templates/*/*.txt 52 | include: 53 | s6blank (~/.slideshow/templates/s6blank/s6blank.txt) 54 | ``` 55 | 56 | 57 | ### Step 1: Write your slides in plain text with markdown formatting conventions 58 | 59 | Slide Show lets you write your slides in plain text with markdown formatting 60 | conventions for headings, emphasis, links, images and more. 61 | Let's write some slides about best practices for web services using REST: 62 | 63 | ``` 64 | # Web Services REST-Style: Universal Identifiers, Formats & Protocols 65 | 66 | Agenda 67 | 68 | - What's REST? 69 | - Universal Identifiers, Formats & Protocols 70 | - The Holy REST Trinity - Noun, Verbs, Types 71 | - REST Design Principles 72 | - Architecture Astronaut REST Speak 73 | 74 | 75 | # What's REST? 76 | 77 | Representational State Transfer (REST) - Meaningless Acronym? Wordplay? 78 | 79 | > rest - n. - peace, ease, or refreshment resulting from the insight that the web works 80 | 81 | No matter what vendors tell you - no need to "Light Up the Web" - relax - built on 82 | an **open architecture using universal identifiers, formats & protocols and _evolving_ open standards** - 83 | no need to reinvent the wheel and sign-up for single-vendor offerings. 84 | 85 | 86 | # What's REST? (Cont'd) 87 | 88 | ### Narrow Definition 89 | 90 | Alternative to BigCo Web Services: 91 | 92 | * SOAP 93 | * WS-\*¹ and 94 | * RPC-Style Web Services (XML-RPC) 95 | 96 | ### Broad Definition 97 | 98 | Best Practices for Designing Web Services for a Unified Human and Programable Web 99 | 100 | ¹: WS-\* = Web Service Specs including WS-Transfer, WS-Addressing, WS-Eventing, 101 | WS-Security, WS-Federation, WS-Trust, and many more. 102 | ``` 103 | 104 | Use headings `#` to start a new slide. That's it. 105 | For more formatting options see the Markdown reference. 106 | 107 | 108 | ### Step 2: Build your slide show using the `slideshow` command line tool 109 | 110 | Run `slideshow` to build your slide show. The `slideshow` command line tool 111 | expects the name of your source document (e.g. `rest.text`) 112 | and will build a web page 113 | (e.g. [`rest.html`](demos/rest.html) 114 | that is an all-in-one-page handout and a live slide show all at once. 115 | 116 | ``` 117 | $ slideshow build rest.text 118 | 119 | => Preparing slideshow 'rest.html'... 120 | => Done. 121 | ``` 122 | 123 | ### Step 3: Open up your slide show in your browser 124 | 125 | Open up your slide show [`rest.html`](demos/rest.html) 126 | in your browser (Firefox, Chrome, Opera, Safari, Edge and others) and hit F11 to switch 127 | into full screen projection and hit the space bar or the right arrow, down arrow 128 | or page down key to flip through your slides. 129 | 130 | 131 | 132 | That's it. Voila. 133 | 134 | ### Bonus: Try some different templates/theme packs 135 | 136 | * [S6 PDF Theme](http://slideshow-templates.github.io/slideshow-s6-blank/slides.pdf.html) 137 | * [Google HTML5 Slides Theme](http://slideshow-templates.github.io/slideshow-google-html5-slides/slides.html5.html) 138 | * [S5 Blank](http://slideshow-templates.github.io/slideshow-s5-blank/slides.html) 139 | * [Slidy W3C Blue Theme](http://slideshow-templates.github.io/slideshow-slidy/slides.w3c.html) 140 | * [More »](https://github.com/slideshow-templates) 141 | -------------------------------------------------------------------------------- /markdown.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Markdown 3 | --- 4 | 5 | ## What's Markdown? 6 | 7 | Markdown is a "markup" language that lets you write 8 | your notes in plain text with formatting conventions 9 | that have been used in email and online since the beginning of the internet. 10 | 11 | * [Learn Markdown in 60 Seconds](http://commonmark.org/help) 12 | * [Learn Markdown in 10 Minutes](http://commonmark.org/help/tutorial) - interactive tutorial; lessons incl. emphasis, paragraphs, headings, links, images, blockquotes, lists and more. 13 | -------------------------------------------------------------------------------- /more.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Settings, Tips, Tricks and More 3 | --- 4 | 5 | 6 | ## How To Fetch New Template Packages? 7 | 8 | Using the `install` command lets you fetch (install) new templates. Example: 9 | 10 | ``` 11 | $ slideshow install s6blank 12 | ``` 13 | 14 | or 15 | 16 | ``` 17 | $ slideshow install https://raw.github.com/slideshow-templates/slideshow-s6-blank/master/s6blank.txt 18 | ``` 19 | 20 | Resulting in: 21 | 22 | ``` 23 | Fetching template pack 's6blank' 24 | from 'https://raw.github.com:443/slideshow-templates/slideshow-s6-blank/master' 25 | saving to '~/.slideshow/templates/s6blank' 26 | Downloading manifest 's6blank.txt'... 27 | Downloading file 'slides.html'... 28 | Downloading file 'style.css'... 29 | Downloading file 's6/projection.css'... 30 | Downloading file 's6/screen.css'... 31 | Downloading file 's6/print.css'... 32 | Downloading file 's6/jquery.js'... 33 | Downloading file 's6/jquery.microsoft.js'... 34 | Downloading file 's6/jquery.slideshow.js'... 35 | Downloading file 'slides.pdf.html'... 36 | Done. 37 | ``` 38 | 39 | Note, if you want to store the template pack somewhere else 40 | use the `-c/--config` option (defaults to `~/.slideshow`). 41 | 42 | To find more templates browse the [Template Gallery](https://github.com/slideshow-templates). 43 | 44 | 45 | 46 | ### Troubleshooting 47 | 48 | Trouble downloading? Do you have a direct internet connection? 49 | If not, configure your proxy using the HTTP_PROXY environment variable. Sample: 50 | 51 | ``` 52 | HTTP_PROXY=http://234.445.454:4341 53 | ``` 54 | 55 | Or with user credentials (that is, login and password): 56 | 57 | ``` 58 | HTTP_PROXY=http://gerald:topsecret@234.445.454:4341 59 | ``` 60 | 61 | If all fails, you can always download the template pack on your own 62 | (using lets say `git` itself) and than move the souces into your 63 | templates folder (that is, `~/.slideshow/templates`). 64 | 65 | 66 | 67 | ## How To Fetch New Template Packs Using `git`? 68 | 69 | If you prefer you can fetch template packs using `git` itself in two steps 70 | 71 | Step 1: Change to your templates folder 72 | 73 | Issue the command: 74 | 75 | ``` 76 | cd ~/.slideshow/templates 77 | ``` 78 | 79 | Step 2: Clone (Fetch) the template pack using `git` 80 | 81 | Let's clone the reveal.js template pack. Issue the command: 82 | 83 | ``` 84 | git clone http://github.com/slideshow-templates/slideshow-reveal.js.git 85 | ``` 86 | 87 | That's it. Use the `list` command to list all installed template packs. 88 | 89 | 90 | ## How To List All Installed Template Packages? 91 | 92 | Using the `list` command lets you list all installed templates. Example: 93 | 94 | ``` 95 | $ slideshow list 96 | ``` 97 | 98 | or 99 | 100 | ``` 101 | $ slideshow ls 102 | ``` 103 | 104 | Resulting in: 105 | 106 | ``` 107 | Installed template packs in search path 108 | [1] templates/*.txt 109 | [2] templates/*/*.txt 110 | [3] node_modules/*/*.txt 111 | [4] ~/.slideshow/templates/*.txt 112 | [5] ~/.slideshow/templates/*/*.txt 113 | include: 114 | reveal.js (~/.slideshow/templates/reveal.js/reveal.js.txt) 115 | s6blank (~/.slideshow/templates/s6blank/s6blank.txt) 116 | ``` 117 | 118 | 119 | ## How To Use Your Own Slide Show Template Packages? 120 | 121 | Fetch a sample template pack from the internet or clone it using `git` or create 122 | it from scratch. 123 | See the [Template Gallery](https://github.com/slideshow-templates) for more info and samples to get started. 124 | 125 | To use your own template pack use the `-t/--template MANIFEST` option 126 | passing along the manifest. Example: 127 | 128 | ``` 129 | $ slideshow build microformats.text -t s6blank 130 | $ slideshow build microformats.text -t reveal.js 131 | ``` 132 | 133 | Got templates? Send a link and announcement to the 134 | [wwwmake forum/mailing List](http://groups.google.com/group/wwwmake) 135 | and get added to the [Template Gallery](https://github.com/slideshow-templates). 136 | 137 | 138 | ## How To Create Slides Without Titles? 139 | 140 | You can use the `!SLIDE` directive to create slides without headings. 141 | Example: 142 | 143 | ``` 144 | !SLIDE 145 | 146 | A slide with no title 147 | 148 | !SLIDE 149 | 150 | Another slide with no heading 151 | 152 | !SLIDE 153 | 154 | And another 155 | 156 | !SLIDE commandline 157 | 158 | $ ruby print.rb 159 | 160 | !SLIDE image 161 | 162 | !i/friendsbadge.png! 163 | ``` 164 | 165 | Note, you can pass along CSS style classes to your generated `div` 166 | or `section` that wraps your slide. Example: 167 | 168 | ``` 169 | !SLIDE smaller commandline 170 | ``` 171 | 172 | Will become: 173 | 174 | ``` 175 |
176 | ... 177 |
178 | ``` 179 | 180 | 181 | ## How To Use Gradient Background Themes for the Built-In S6 Template Pack? 182 | 183 | You can define your gradient background theme in plain text in the slide show source in the header 184 | using a simple CSS-style name value pair. [More »](#how-to-use-gradient-background-themes-for-the-built-in-s6-template-pack) 185 | 186 | 187 | ## How To Generate PDF Documents from Your Slide Shows? 188 | 189 | When you generate your slide show as usual with the built-in S6 template pack 190 | you will get an extra `.pdf.html` document generated that 191 | you can use to generate a PDF-version of your slide show 192 | using lets say the free, open source [`wkhtmltopdf`](http://code.google.com/p/wkhtmltopdf/) tool. 193 | 194 | Example: 195 | 196 | ``` 197 | $ slideshow build tutorial.text 198 | 199 | $ wkhtmltopdf --outline --orientation Landscape tutorial.pdf.html tutorial.pdf 200 | ``` 201 | 202 | 203 | ## How To Comment Out Content? 204 | 205 | Use `%` for comments anywhere (including headers) and `%begin`/`%end` 206 | for multi-line comments and `%end` to skip everything until the end. 207 | 208 | ``` 209 | %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 210 | % Start off with some headers 211 | 212 | title: 10 Things Every Java Programmer Should Know About Ruby 213 | author: Jim Weirich 214 | 215 | %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 216 | % Let's go. The presentation starts here 217 | 218 | # 10 Things Every Java Programmer Should Know About Ruby 219 | 220 | Jim Weirich 221 | ``` 222 | 223 | See [10 Things Every Java Programmer Should Know About Ruby](http://raw.github.com/slideshow-s9/samples/master/10things.md) 224 | sample. 225 | 226 | Note, as an alternative syntax to skip (comment out) 227 | content in your source enclose it with `__SKIP__`/`__END__`. Example: 228 | 229 | ``` 230 | __SKIP__ 231 | not yet ready or private notes/comments 232 | __END__ 233 | ``` 234 | 235 | As a shortcut if you just use `__END__` (without `__SKIP__`) (Ruby-like) 236 | it will skip everything from `__END__` until the end of the file. 237 | -------------------------------------------------------------------------------- /plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugins, Helpers and Extensions 3 | --- 4 | 5 | 6 | ## Using Embedded Ruby (ERB) Helpers in Your Slides 7 | 8 | Slide Show (S9) includes support for plugins and helpers 9 | and lets you use Embedded Ruby (ERB) in your slide source. Example: 10 | 11 | ``` 12 | ## Today's Date 13 | 14 | <%= Date.today %> 15 | ``` 16 | 17 | If you want to use your own helpers put your code in the `./lib` 18 | folder (or any subfolders) and your code gets loaded on startup. 19 | 20 | Note, as an alternative syntax for Embedded Ruby (ERB) helpers you can also 21 | use a Django-style syntax using `{% raw %}{{ }}{% endraw %}`. Example: 22 | 23 | ``` 24 | {% raw %} 25 | ## Today's Date 26 | 27 | {{ Date.today }} 28 | {% endraw %} 29 | ``` 30 | 31 | ## Built-In Helpers 32 | 33 | * `include` - Lets you include text. Example: 34 | 35 | 36 | 37 | 44 |
38 | Django-style helper syntax: 39 | 40 | ``` 41 | {% raw %}{{ include help.txt }}{% endraw %} 42 | ``` 43 | 45 | Classic helper syntax: 46 | 47 | ``` 48 | <%= include 'help.txt' %> 49 | ``` 50 |
51 | 52 | 53 | * `google_analytics` - Lets you add tracker code for Google Analytics. Example: 54 | 55 | 56 | 57 | 64 |
58 | Django-style: 59 | 60 | ``` 61 | {% raw %}{{ google_analytics code=UA-YOUR-CODE-HERE }}{% endraw %} 62 | ``` 63 | 65 | Classic: 66 | 67 | ``` 68 | <%= google_analytics :code => 'UA-YOUR-CODE-HERE' %> 69 | ``` 70 |
71 | 72 | 73 | * `help` - Lets you add key control help information for the S6 slide show machinery. Example: 74 | 75 | 76 | 77 | 84 |
78 | Django-style: 79 | 80 | ``` 81 | {% raw %}{{ help }}{% endraw %} 82 | ``` 83 | 85 | Classic: 86 | 87 | ``` 88 | <%= help %> 89 | ``` 90 |
91 | 92 | * `left`/`right` - Lets you use two-column layouts in your slides. Example: 93 | 94 | 95 | 96 | 123 |
97 | Django-style: 98 | 99 | ``` 100 | {% raw %}{% left %} 101 | 102 | ### Java is 103 | 104 | * Strongly, 105 | * Statically, 106 | * Manifestly 107 | 108 | typed. 109 | {% end %} 110 | 111 | {% right %} 112 | 113 | ### Ruby is 114 | 115 | * Strongly, 116 | * Dynamically, 117 | * Implicitly 118 | 119 | typed. 120 | {% end %}{% endraw %} 121 | ``` 122 | 124 | Classic: 125 | 126 | ``` 127 | <% left do %> 128 | 129 | ### Java is 130 | 131 | * Strongly, 132 | * Statically, 133 | * Manifestly 134 | 135 | typed. 136 | <% end %> 137 | 138 | <% right do %> 139 | 140 | ### Ruby is 141 | 142 | * Strongly, 143 | * Dynamically, 144 | * Implicitly 145 | 146 | typed. 147 | <% end %> 148 | ``` 149 |
150 | 151 | * `step` - Lets you wrap a block into a div for incremental display using steps. Example: 152 | 153 | 154 | 155 | 166 |
156 | Django-style: 157 | 158 | ``` 159 | {% raw %}{% step %} 160 | * Catching all inappropriate operations on a type, either at 161 | * compile time, or 162 | * run time 163 | {% end %}{% endraw %} 164 | ``` 165 | 167 | Classic: 168 | 169 | ``` 170 | <% step do %> 171 | * Catching all inappropriate operations on a type, either at 172 | * compile time, or 173 | * run time 174 | <% end %> 175 | ``` 176 |
177 | 178 | 179 | * `content_for` - Lets you add content to your templates from your source a la Rails. 180 | 181 | In your slide source use: 182 | 183 | ``` 184 | <% content_for :head do %> 185 | your content here e.g. more meta tags; javascript includes etc. 186 | <% end %> 187 | ``` 188 | 189 | In your template use: 190 | 191 | ``` 192 | <%= content_for :head %> 193 | ``` 194 | 195 | and it will include the marked content from your source. 196 | Note, you can use `:foo`, `:bar` or whatever key you 197 | want instead of `:head` and also note a la Rails you can use the same 198 | key as many times as you want. The new content just gets added. 199 | 200 | 201 | ## Code/Syntax Highlighting Helpers 202 | 203 | Use the `code` helper to include and syntax highlight code. [More »](#hello-syntax-highlighting-helper) 204 | 205 | 206 | ## How to Create Your Own Helpers 207 | 208 | Let's create a helper called `image` as a shortcut for 209 | adding embedded images to your slides in Markdown syntax. 210 | 211 | Let's create a new Ruby script (file) e.g. `markdown_helper.rb` 212 | and let's pack our new helper into a module named `MarkdownHelper` 213 | Example: 214 | 215 | ``` 216 | module MarkdownHelper 217 | 218 | # helper/shortcut for adding embedded image to slide in markdown syntax: 219 | # ![alt text](/path/to/img.jpg "Title") 220 | # 221 | # use it like: 222 | # <%= image 'friendsbadge.png' %> 223 | # 224 | # note: alternate text (alt) and title are optional 225 | 226 | def image( path, alt="", title="" ) 227 | %Q{![#{alt}](#{path} "#{title}")} 228 | end 229 | 230 | end 231 | ``` 232 | 233 | Almost done. Two more steps. Include your code into 234 | the class `Slideshow::Gen`. Add this snippet to the end of your 235 | Ruby script: 236 | 237 | ``` 238 | class Slideshow::Gen 239 | include MarkdownHelper 240 | end 241 | ``` 242 | 243 | Lastly, make sure your Ruby script (that is, `markdown_helper.rb`) 244 | resides in the `./lib` 245 | folder (or any subfolders) of your working folder 246 | and your code will get loaded on startup and is ready for use in your 247 | slides. Example: 248 | 249 | ``` 250 | <%= image 'friendsbadge.png' %> 251 | ``` 252 | 253 | Or Django-style: 254 | 255 | ``` 256 | {% raw %} 257 | {{ image friendsbadge.png }} 258 | {% endraw %} 259 | ``` 260 | 261 | That's it. For more samples, check the 262 | [source of the plugin helpers](http://github.com/slideshow-s9/slideshow-plugins). 263 | -------------------------------------------------------------------------------- /settings.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Settings Reference 3 | --- 4 | 5 | 6 | ## Settings, Settings, Settings 7 | 8 | Use `slideshow.yml` in your working folder or in your home folder 9 | to configure the `slideshow` tool. 10 | 11 | 12 | ## Headers 13 | 14 | The `headers` section lets you set default/fallback headers. Example: 15 | 16 | ``` 17 | headers: 18 | generator: "<%= Slideshow.generator %>" 19 | author: Your Name Here 20 | email: Your Email Here 21 | company: Your Company Here 22 | title: Your Title Here 23 | subtitle: Your Subtitle Here 24 | footer: Your Footer Here 25 | subfooter: Your Subfooter Here 26 | date: "<%= Date.today %>" 27 | ``` 28 | 29 | 30 | ## Fetch - Template Pack Shortcuts 31 | 32 | The `fetch` section lets you configure template pack shortcuts. Example: 33 | 34 | ``` 35 | fetch: 36 | g5: https://raw.github.com/slideshow-templates/slideshow-google-html5-slides/master/g5.txt 37 | csss: https://raw.github.com/slideshow-templates/slideshow-csss/master/csss.txt 38 | deck.js: https://raw.github.com/slideshow-templates/slideshow-deck.js/master/deck.js.txt 39 | impress.js: https://raw.github.com/slideshow-templates/slideshow-impress.js/master/impress.js.txt 40 | ``` 41 | 42 | Now you can use 43 | 44 | ``` 45 | slideshow install g5 46 | ``` 47 | 48 | Instead of 49 | 50 | ``` 51 | slideshow install https://raw.github.com/slideshow-templates/slideshow-google-html5-slides/master/g5.txt 52 | ``` 53 | 54 | 55 | ## Filters 56 | 57 | The `filter` section lets you configure filters to run before the markup processing. Example: 58 | 59 | ``` 60 | filters: 61 | - skip_end_directive 62 | - directives_bang_style_to_percent_style 63 | - directives_percent_style 64 | - comments-percent-style 65 | - leading-headers 66 | - erb-django-style 67 | - erb-rename-helper-hack 68 | - erb 69 | ``` 70 | -------------------------------------------------------------------------------- /templates.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Create Your Own Templates 3 | --- 4 | 5 | Create your own templates (use `headers`, `slides`, `name`, etc.) 6 | 7 | ## Headers 8 | 9 | Use `headers` to reference headers (such as title, author, etc.) from your slide source 10 | (or from your `slideshow.yml` configuration) in your templates. 11 | 12 | Example: 13 | 14 | ``` 15 | {% raw %} 16 | 17 | 18 | {{ headers['title'] }} | by {{ headers['author'] }} 19 | {% endraw %} 20 | ``` 21 | 22 | Example 2: 23 | 24 | ``` 25 | {% raw %} 26 |
27 |

{{ headers['title'] }}

28 |

{{ headers['subtitle'] }}

29 |

{{ headers['author'] }}

30 |

{{ headers['company'] }}

31 |
32 | {% endraw %} 33 | ``` 34 | 35 | 36 | ## Slides 37 | 38 | Use `slides` to reference your slides. A `slide` includes the following fields: 39 | 40 | * `content` 41 | * `header` => Optional Header 42 | * `content_without_header` => (TODO: _Add Alias_) Optional Content Block without Header (`content = header + content_without_header`) 43 | * `classes` => Style Classes (e.g. `fullscreen scroll`) 44 | * `data_attributes` => HTML5 Data Attributes (e.g. `data-x='1200' data-y='600' data-rotate='180'`) 45 | 46 | Example: 47 | 48 | ``` 49 | {% raw %} 50 | {% for slide in slides %} 51 |
52 | {{ slide.content }} 53 |
54 | {% endfor %} 55 | {% endraw %} 56 | ``` 57 | 58 | Example 2: 59 | 60 | ``` 61 | {% raw %} 62 | {% for slide in slides %} 63 |
64 |
{{ slide.header }}
65 |
66 | {{ slide.content_without_header }} 67 |
68 |
69 | {% endfor %} 70 | {% endraw %} 71 | ``` 72 | 73 | 74 | ## Filename 75 | 76 | Use `name` to reference the basename of the passed in file e.g. `microformats.text` becomes `microformats`. 77 | 78 | Example: 79 | 80 | ``` 81 | {% raw %} 82 | 83 | {% endraw %} 84 | ``` 85 | -------------------------------------------------------------------------------- /themes.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Gradient Background Themes 3 | --- 4 | 5 | 6 | ## Browse by Color 7 | 8 | Red (SVG) | 9 | Red (CSS3) | 10 | Blue 11 | 12 | ## Browse by Style 13 | 14 | Diagonal | 15 | Top Bottom | 16 | Left Right | 17 | Repeat | 18 | Radial | 19 | Radial Off Center | 20 | Radial Repeat 21 | 22 | ## Theme Preview 23 | 24 | 27 | 28 | 29 | ## How To Use Gradient Background Themes for the Built-In S6 Template Pack? 30 | 31 | You can define your gradient background theme in plain text in the slide show source in the header using 32 | a simple CSS-style name value pair (if you use the built-in S6 templates). 33 | 34 | Example 1: Use `top-bottom` gradient background theme with the colors red and black 35 | 36 | ``` 37 | gradient: top-bottom red black 38 | ``` 39 | 40 | *Themes*. The built-in predefined gradient background themes include: `diagonal`, 41 | `top-bottom`, 42 | `left-right`, 43 | `repeat`, 44 | `radial`, 45 | `radial-off-center`, 46 | `radial-repeat`. 47 | 48 | *Colors*. You can use whatever colors CSS supports e.g. pre-defined colors such as `red`, 49 | `maroon` or self-defined colors such as `#0e1f5b`, `#3b5998`. 50 | 51 | 52 | Example 2: Use pre-defined CSS colors (with default `diagonal` gradient background theme) 53 | 54 | ``` 55 | gradient-colors: green lime 56 | ``` 57 | 58 | Example 3: Use self-defined colors (with default `diagonal` gradient background theme) 59 | 60 | ``` 61 | gradient-colors: #0e1f5b #3b5998 62 | ``` 63 | 64 | Example 4: Use `radial` gradient background theme and facebook colors 65 | 66 | ``` 67 | gradient: radial #0e1f5b #3b5998 68 | ``` 69 | 70 | Example 5: Just change gradient background theme and use default colors, that is, `red` and `orange` 71 | 72 | ``` 73 | gradient-theme: repeat 74 | ``` 75 | 76 | That's it. 77 | --------------------------------------------------------------------------------