diff options
Diffstat (limited to 'doc/asciidoc/examples/website/slidy.txt')
-rw-r--r-- | doc/asciidoc/examples/website/slidy.txt | 113 |
1 files changed, 113 insertions, 0 deletions
diff --git a/doc/asciidoc/examples/website/slidy.txt b/doc/asciidoc/examples/website/slidy.txt new file mode 100644 index 0000000..2de5790 --- /dev/null +++ b/doc/asciidoc/examples/website/slidy.txt @@ -0,0 +1,113 @@ +Slidy backend for AsciiDoc +========================== +:author: Stuart Rackham +:backend: slidy +:max-width: 45em +:data-uri: +:icons: + + +Use the following command to create this document (`slidy.html`): + + asciidoc slidy.txt + +Press the 'Space' key or the 'Left Arrow' key to continue the +slideshow. + + +Overview +-------- +AsciiDoc has a 'slidy' backend for generating self contained 'Slidy' +HTML slideshows. + +- An overview of 'Slidy' can be found here: + http://www.w3.org/Talks/Tools/Slidy2/ +- AsciiDoc ships with the Slidy JavaScript a customised Slidy CSS + file. +- Use the 'asciidoc' `--backend slidy` command-line option to generate + browser viewable HTML slideshow. Example: + + asciidoc --backend slidy slidy-example.txt + +- By default, 'asciidoc' creates a self contained distributable HTML + document which includes all necessary CSS and JavaScripts. Use the + 'asciidoc' `--attribute linkcss` command-line option if you prefer + to link (rather than embed) external CSS and JavaScript files. + + +How Slidy uses AsciiDoc markup +------------------------------ +- The document header is displayed as the first page of the slideshow. +- If the document has a 'preamble' (the content between the header and + the first section) it will be displayed on the second page. +- Each top level section is displayed as a separate slide. +- If the AsciiDoc 'incremental' attribute is defined then all lists + and OpenBlock elements are treated as 'incremental' i.e. Slidy + exposes their child elements one at a time as you progress through + the slideshow. +- You can explicitly set an element as incremental by setting its + 'role' attribute to 'incremental'. Example: + + [role="incremental"] + Sagittis in vestibulum. Habitasse ante nulla enim bibendum nulla. + Odio sed pede litora. + + +Slidy Specific Attributes +------------------------- +incremental:: +If this attribute is defined then all lists and OpenBlock elements are +classed as incremental i.e. Slidy will expose them one at a time as +you progress through the slideshow. The default behavior is for the +show to progress a full slide at at time. Elements that have been +explicitly classed as 'incremental' with the 'role' attribute are +always displayed incrementally. + +duration:: +Set this to the estimated number of minutes that your presentation +will take and Slidy will display a countdown timer at the bottom right +of the slideshow. For example, this 'asciidoc' command-line option +`--attribute duration=5` sets the duration to five minutes. + +copyright:: +If you set the 'copyright' attribute it will be displayed in the Slidy +menu bar at the bottom of the slide. If the 'copyright' attribute is +not define then the author name, if it is defined, will be displayed. + +outline:: +Setting the 'role' attribute to 'outline' in a bulleted or numbered +list allows nested lists to be expanded and collapsed using the mouse. +Nested lists are expanded when an enclosing list item (the ones with +blue bullet points or numbers) is clicked. + + +Stylesheets +----------- +- 'slidy' loads the 'asciidoc.css' stylesheet followed by 'slidy.css': + * `asciidoc.css` contains content presentational styles. + * The customized `slidy.css` stylesheet contains Slidy specific + styles (table of contents, menu and transition related). +- You can use AsciiDoc CSS themes. For example, the 'asciidoc' + `--attribute theme=volnitsky` command-line option will substitute + the `asciidoc.css` stylesheet for the distributed Volnitsky + `volnitsky.css` stylesheet. +- An additional stylesheet can be specified by setting the + 'stylesheet' attribute. For example, the `--attribute + stylesheet=myslidy.css` will load `myslidy.css` after the standard + CSS files. + + +Tips +---- +- The Slidy 'help?' and 'contents?' links at the bottom left are your + friends. +- Use the AsciiDoc 'data-uri' attribute to embed images in your + slideshow -- add this attribute entry to your document's header: + + :data-uri: + +- Use the AsciiDoc 'max-width' attribute to set the document display + width. For example, add this attribute entry to your document's + header: + + :max-width: 45em |