| 1 | Slidy backend for AsciiDoc |
|---|
| 2 | ========================== |
|---|
| 3 | :author: Stuart Rackham |
|---|
| 4 | :backend: slidy |
|---|
| 5 | :max-width: 45em |
|---|
| 6 | :data-uri: |
|---|
| 7 | :icons: |
|---|
| 8 | |
|---|
| 9 | |
|---|
| 10 | Use the following command to create this document (`slidy.html`): |
|---|
| 11 | |
|---|
| 12 | asciidoc slidy.txt |
|---|
| 13 | |
|---|
| 14 | Press the 'Space' key or the 'Left Arrow' key to continue the |
|---|
| 15 | slideshow. |
|---|
| 16 | |
|---|
| 17 | |
|---|
| 18 | Overview |
|---|
| 19 | -------- |
|---|
| 20 | AsciiDoc has a 'slidy' backend for generating self contained 'Slidy' |
|---|
| 21 | HTML slideshows. |
|---|
| 22 | |
|---|
| 23 | - An overview of 'Slidy' can be found here: |
|---|
| 24 | http://www.w3.org/Talks/Tools/Slidy2/ |
|---|
| 25 | - AsciiDoc ships with the Slidy JavaScript a customised Slidy CSS |
|---|
| 26 | file. |
|---|
| 27 | - Use the 'asciidoc' `--backend slidy` command-line option to generate |
|---|
| 28 | browser viewable HTML slideshow. Example: |
|---|
| 29 | |
|---|
| 30 | asciidoc --backend slidy slidy-example.txt |
|---|
| 31 | |
|---|
| 32 | - By default, 'asciidoc' creates a self contained distributable HTML |
|---|
| 33 | document which includes all necessary CSS and JavaScripts. Use the |
|---|
| 34 | 'asciidoc' `--attribute linkcss` command-line option if you prefer |
|---|
| 35 | to link (rather than embed) external CSS and JavaScript files. |
|---|
| 36 | |
|---|
| 37 | |
|---|
| 38 | How Slidy uses AsciiDoc markup |
|---|
| 39 | ------------------------------ |
|---|
| 40 | - The document header is displayed as the first page of the slideshow. |
|---|
| 41 | - If the document has a 'preamble' (the content between the header and |
|---|
| 42 | the first section) it will be displayed on the second page. |
|---|
| 43 | - Each top level section is displayed as a separate slide. |
|---|
| 44 | - If the AsciiDoc 'incremental' attribute is defined then all lists |
|---|
| 45 | and OpenBlock elements are treated as 'incremental' i.e. Slidy |
|---|
| 46 | exposes their child elements one at a time as you progress through |
|---|
| 47 | the slideshow. |
|---|
| 48 | - You can explicitly set an element as incremental by setting its |
|---|
| 49 | 'role' attribute to 'incremental'. Example: |
|---|
| 50 | |
|---|
| 51 | [role="incremental"] |
|---|
| 52 | Sagittis in vestibulum. Habitasse ante nulla enim bibendum nulla. |
|---|
| 53 | Odio sed pede litora. |
|---|
| 54 | |
|---|
| 55 | |
|---|
| 56 | Slidy Specific Attributes |
|---|
| 57 | ------------------------- |
|---|
| 58 | incremental:: |
|---|
| 59 | If this attribute is defined then all lists and OpenBlock elements are |
|---|
| 60 | classed as incremental i.e. Slidy will expose them one at a time as |
|---|
| 61 | you progress through the slideshow. The default behavior is for the |
|---|
| 62 | show to progress a full slide at at time. Elements that have been |
|---|
| 63 | explicitly classed as 'incremental' with the 'role' attribute are |
|---|
| 64 | always displayed incrementally. |
|---|
| 65 | |
|---|
| 66 | duration:: |
|---|
| 67 | Set this to the estimated number of minutes that your presentation |
|---|
| 68 | will take and Slidy will display a countdown timer at the bottom right |
|---|
| 69 | of the slideshow. For example, this 'asciidoc' command-line option |
|---|
| 70 | `--attribute duration=5` sets the duration to five minutes. |
|---|
| 71 | |
|---|
| 72 | copyright:: |
|---|
| 73 | If you set the 'copyright' attribute it will be displayed in the Slidy |
|---|
| 74 | menu bar at the bottom of the slide. If the 'copyright' attribute is |
|---|
| 75 | not define then the author name, if it is defined, will be displayed. |
|---|
| 76 | |
|---|
| 77 | outline:: |
|---|
| 78 | Setting the 'role' attribute to 'outline' in a bulleted or numbered |
|---|
| 79 | list allows nested lists to be expanded and collapsed using the mouse. |
|---|
| 80 | Nested lists are expanded when an enclosing list item (the ones with |
|---|
| 81 | blue bullet points or numbers) is clicked. |
|---|
| 82 | |
|---|
| 83 | |
|---|
| 84 | Stylesheets |
|---|
| 85 | ----------- |
|---|
| 86 | - 'slidy' loads the 'asciidoc.css' stylesheet followed by 'slidy.css': |
|---|
| 87 | * `asciidoc.css` contains content presentational styles. |
|---|
| 88 | * The customized `slidy.css` stylesheet contains Slidy specific |
|---|
| 89 | styles (table of contents, menu and transition related). |
|---|
| 90 | - You can use AsciiDoc CSS themes. For example, the 'asciidoc' |
|---|
| 91 | `--attribute theme=volnitsky` command-line option will substitute |
|---|
| 92 | the `asciidoc.css` stylesheet for the distributed Volnitsky |
|---|
| 93 | `volnitsky.css` stylesheet. |
|---|
| 94 | - An additional stylesheet can be specified by setting the |
|---|
| 95 | 'stylesheet' attribute. For example, the `--attribute |
|---|
| 96 | stylesheet=myslidy.css` will load `myslidy.css` after the standard |
|---|
| 97 | CSS files. |
|---|
| 98 | |
|---|
| 99 | |
|---|
| 100 | Tips |
|---|
| 101 | ---- |
|---|
| 102 | - The Slidy 'help?' and 'contents?' links at the bottom left are your |
|---|
| 103 | friends. |
|---|
| 104 | - Use the AsciiDoc 'data-uri' attribute to embed images in your |
|---|
| 105 | slideshow -- add this attribute entry to your document's header: |
|---|
| 106 | |
|---|
| 107 | :data-uri: |
|---|
| 108 | |
|---|
| 109 | - Use the AsciiDoc 'max-width' attribute to set the document display |
|---|
| 110 | width. For example, add this attribute entry to your document's |
|---|
| 111 | header: |
|---|
| 112 | |
|---|
| 113 | :max-width: 45em |
|---|
![[RTEMS Logo]](/images/logo.png){kind=logo}
