asciidoctor-revealjs 3.0.0 → 4.1.0.rc3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (92) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE.adoc +1 -1
  3. data/README.adoc +390 -63
  4. data/Rakefile +30 -7
  5. data/asciidoctor-revealjs.gemspec +6 -4
  6. data/bin/asciidoctor-revealjs +7 -0
  7. data/examples/a11y-dark.css +99 -0
  8. data/examples/autoslide.adoc +22 -0
  9. data/examples/custom-layout.adoc +10 -0
  10. data/examples/customcss.adoc +1 -1
  11. data/examples/data-attributes.adoc +245 -0
  12. data/examples/docinfo-footer-revealjs.html +10 -0
  13. data/examples/docinfo-revealjs.html +7 -0
  14. data/examples/font-awesome-specific-version.adoc +11 -0
  15. data/examples/font-awesome.adoc +23 -4
  16. data/examples/font-awesome.css +3 -0
  17. data/examples/footnotes.adoc +46 -0
  18. data/examples/fragments.adoc +44 -0
  19. data/examples/fragments.css +18 -0
  20. data/examples/grid-layout-3x2.adoc +50 -0
  21. data/examples/grid-layout-docinfo-revealjs.html +11 -0
  22. data/examples/grid-layout.adoc +194 -0
  23. data/examples/history-hash.adoc +19 -0
  24. data/examples/history-regression-tests.adoc +0 -5
  25. data/examples/history.adoc +4 -4
  26. data/examples/images/asciidoctor-logo.svg +102 -0
  27. data/examples/images/cute-cat-1.jpg +0 -0
  28. data/examples/images/cute-cat-2.jpg +0 -0
  29. data/examples/images/cute-cat-3.jpg +0 -0
  30. data/examples/images/flock-of-seagulls_daniel-simion.mp3 +0 -0
  31. data/examples/issue-grid-layout-images.adoc +25 -0
  32. data/examples/level-sectnums.adoc +24 -0
  33. data/examples/links-preview.adoc +32 -0
  34. data/examples/links.adoc +39 -0
  35. data/examples/mathjax-cdn.adoc +21 -0
  36. data/examples/mathjax.adoc +20 -0
  37. data/examples/release-4.0.adoc +192 -0
  38. data/examples/release-4.0.css +23 -0
  39. data/examples/release-4.1.adoc +133 -0
  40. data/examples/release-4.1.css +50 -0
  41. data/examples/revealjs-custom-theme.adoc +10 -0
  42. data/examples/source-coderay.adoc +15 -0
  43. data/examples/source-emphasis.adoc +128 -0
  44. data/examples/source-highlightjs-html.adoc +1 -1
  45. data/examples/source-highlightjs-languages.adoc +27 -0
  46. data/examples/source-highlightjs.adoc +85 -2
  47. data/examples/source-pygments.adoc +12 -0
  48. data/examples/source-rouge-docinfo.html +8 -0
  49. data/examples/source-rouge.adoc +18 -0
  50. data/examples/steps.adoc +87 -0
  51. data/examples/text-alignments.adoc +44 -0
  52. data/examples/video.adoc +30 -8
  53. data/examples/with-docinfo-shared.adoc +13 -0
  54. data/lib/asciidoctor-revealjs/converter.rb +1053 -769
  55. data/lib/asciidoctor-revealjs/highlightjs.rb +333 -2
  56. data/lib/asciidoctor-revealjs/version.rb +1 -1
  57. data/templates/admonition.html.slim +1 -1
  58. data/templates/asciidoctor-compatibility.css +390 -0
  59. data/templates/audio.html.slim +1 -1
  60. data/templates/colist.html.slim +1 -1
  61. data/templates/dlist.html.slim +3 -3
  62. data/templates/document.html.slim +76 -59
  63. data/templates/example.html.slim +1 -1
  64. data/templates/helpers.rb +170 -5
  65. data/templates/image.html.slim +3 -3
  66. data/templates/inline_anchor.html.slim +6 -4
  67. data/templates/inline_button.html.slim +2 -1
  68. data/templates/inline_footnote.html.slim +11 -4
  69. data/templates/inline_image.html.slim +5 -8
  70. data/templates/inline_kbd.html.slim +3 -2
  71. data/templates/inline_menu.html.slim +4 -3
  72. data/templates/inline_quoted.html.slim +13 -21
  73. data/templates/listing.html.slim +15 -10
  74. data/templates/literal.html.slim +1 -1
  75. data/templates/olist.html.slim +2 -2
  76. data/templates/open.html.slim +3 -3
  77. data/templates/paragraph.html.slim +1 -1
  78. data/templates/quote.html.slim +1 -1
  79. data/templates/section.html.slim +51 -43
  80. data/templates/sidebar.html.slim +1 -1
  81. data/templates/stem.html.slim +1 -1
  82. data/templates/stretch_nested_elements.js.slim +65 -0
  83. data/templates/table.html.slim +3 -2
  84. data/templates/title_slide.html.slim +28 -0
  85. data/templates/ulist.html.slim +3 -3
  86. data/templates/verse.html.slim +1 -1
  87. data/templates/video.html.slim +14 -8
  88. metadata +81 -18
  89. data/CHANGELOG.adoc +0 -425
  90. data/HACKING.adoc +0 -386
  91. data/examples/revealjs-features.adoc +0 -23
  92. data/templates/asciidoctor_revealjs.css.slim +0 -59
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2339f9a2b0d41e0d60f1b93c165ac143f93a093687d0006986039b7d75a4b864
4
- data.tar.gz: 52ba202bef3578b773faaea1b0a5ccca9491b2350237916c41cd32bff1a0e0ff
3
+ metadata.gz: 51f0597f97711399e5fbd268198a6b2482e813cc9015d8f2b405549931a499b9
4
+ data.tar.gz: 144f1493734fcccf711f0e2ca635af999979feee73976b9ebe753800b3ff7c5f
5
5
  SHA512:
6
- metadata.gz: 40df2ec1142b6fd602e8cadbaefd17452d455226a75dc41fab9040c97870111155a06dbc788aa219d9034b6ac8e64f856697f35cf8dd6bc7c13cea66fd66de46
7
- data.tar.gz: 06a6e6d0f534404c15d30898f0740afc033a274b625786e8c01155919f584c6ae55482af04765b48d303c9f3d03681cce1cd2d7ac59655a93921f1dd3b3ddd44
6
+ metadata.gz: 00d7608d340549717eb2d73d9b03405e13bbe7151002a94dbf0725ca487a970c6332109f974ffb36a62b1f48cb32e67dc00d19dbda73729be726771e4f1eccaf
7
+ data.tar.gz: b32a2253ee741a20fb42ed1ceec11e0a82384b3282707d7c1fcae1677e4ff8a571c70eba377bcab97e6647f2ca2b81b5c371ab5f5e06d83f3af3933b48ed3962
@@ -1,6 +1,6 @@
1
1
  .The MIT License
2
2
  ....
3
- Copyright (C) 2012-2019 Olivier Bilodeau, Charles Moulliard, Dan Allen and the Asciidoctor Project
3
+ Copyright (C) 2012-2020 Olivier Bilodeau, Charles Moulliard, Dan Allen and the Asciidoctor Project
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
@@ -18,10 +18,11 @@ endif::[]
18
18
  :uri-project-repo: https://github.com/asciidoctor/asciidoctor-reveal.js
19
19
  :uri-asciidoctor: https://github.com/asciidoctor/asciidoctor
20
20
  :uri-asciidoctorjs: https://github.com/asciidoctor/asciidoctor.js
21
- :uri-revealjs-home: http://lab.hakim.se/reveal-js/
22
- :uri-revealjs-gh: https://github.com/hakimel/reveal.js
21
+ :uri-revealjs-home: https://revealjs.com
22
+ :uri-revealjs-gh: https://github.com/hakimel/reveal.js/blob/v3.9
23
+ :uri-revealjs-doc: {uri-revealjs-gh}/README.md
23
24
  :uri-nodejs-download: https://nodejs.org/en/download/
24
- :showcasedir: showcase
25
+ :showcasedir: showcase
25
26
 
26
27
  ifdef::env-github[]
27
28
  image:https://travis-ci.org/asciidoctor/asciidoctor-reveal.js.svg?branch=master[Build Status,link=https://travis-ci.org/asciidoctor/asciidoctor-reveal.js]
@@ -34,35 +35,27 @@ endif::[]
34
35
 
35
36
  TIP: Want to see some example presentations, see <<Showcase Presentations>>
36
37
 
37
- There are two main technology stacks that can transform AsciiDoc into HTML5 / reveal.js:
38
+ There are four main technology stacks that can convert AsciiDoc into HTML5 / reveal.js:
38
39
 
39
40
  * Asciidoctor / Ruby / Bundler (See <<Ruby Setup>>)
40
41
  * Asciidoctor.js / JavaScript (Node.js) / npm (See <<Node / JavaScript Setup>>)
41
-
42
- Right now the Asciidoctor / Ruby stack is the better tested one but with the changes in v1.1.0 they have feature parity.
42
+ * Standalone Executable (See <<Standalone Executable>>)
43
+ * AsciidoctorJ / JVM / Maven (See https://github.com/asciidoctor/asciidoctorj-reveal.js[this project])
43
44
 
44
45
  ifeval::['{branch}' == 'master']
45
46
  NOTE: You're viewing the documentation for an upcoming release.
46
47
  If you're looking for the documentation for the current release or an older one, please click on the appropriate link below: +
47
- {uri-project-repo}/tree/v2.0.1#readme[2.0.1] (latest release)
48
- &hybull;
49
- {uri-project-repo}/tree/v1.1.3#readme[1.1.3] (latest from 1.1 series)
48
+ {uri-project-repo}/tree/v4.0.0#readme[4.0.1] (latest from 4.x series)
50
49
  &hybull;
51
- {uri-project-repo}/tree/maint-1.0.x#readme[1.0.x]
50
+ {uri-project-repo}/tree/v3.1.0#readme[3.1.0] (latest from 3.x series)
52
51
  &hybull;
53
- {uri-project-repo}/tree/reveal.js-2.x#readme[Unversioned pre-release] (compatible with RevealJS 2.x)
52
+ {uri-project-repo}/tree/reveal.js-2.x#readme[Unversioned pre-release] (compatible with reveal.js 2.x)
54
53
  endif::[]
55
54
 
56
55
 
57
56
  == Ruby Setup
58
57
 
59
- NOTE: asciidoctor-reveal.js is now a Ruby Gem.
60
- To ensure repeatability, we recommend that you manage your presentation projects using bundler.
61
-
62
- For a quick start clone our https://github.com/obilodeau/presentation-revealjs-starter[starter repository] and follow instructions there.
63
-
64
- For more complete instructions, read on.
65
-
58
+ NOTE: To ensure repeatability, we recommend that you manage your presentation projects using http://bundler.io/[bundler].
66
59
 
67
60
  === Prerequisites
68
61
 
@@ -107,7 +100,7 @@ NOTE: For some reason, when you use the system Ruby on Fedora, you also have to
107
100
  . Optional: Copy or clone reveal.js presentation framework.
108
101
  Allows you to modify themes or view slides offline.
109
102
 
110
- $ git clone -b 3.7.0 --depth 1 https://github.com/hakimel/reveal.js.git
103
+ $ git clone -b 3.9.2 --depth 1 https://github.com/hakimel/reveal.js.git
111
104
 
112
105
 
113
106
  === Rendering the AsciiDoc into slides
@@ -118,7 +111,7 @@ NOTE: For some reason, when you use the system Ruby on Fedora, you also have to
118
111
  . Generate HTML presentation from the AsciiDoc source
119
112
 
120
113
  $ bundle exec asciidoctor-revealjs \
121
- -a revealjsdir=https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0 CONTENT_FILE.adoc
114
+ -a revealjsdir=https://cdn.jsdelivr.net/npm/reveal.js@3.9.2 CONTENT_FILE.adoc
122
115
 
123
116
  . If you did the optional step of having a local reveal.js clone you can
124
117
  convert AsciiDoc source with
@@ -127,6 +120,29 @@ NOTE: For some reason, when you use the system Ruby on Fedora, you also have to
127
120
 
128
121
  TIP: If you are using https://pages.github.com/[GitHub Pages], plan ahead by keeping your source files on `master` branch and all output files on the `gh-pages` branch.
129
122
 
123
+ === Features Unique to the Ruby CLI
124
+
125
+ Starting with 4.0.0 you can specify a set of custom templates to use instead of the ones provided by this project.
126
+ This can help you achieve even more concise AsciiDoc syntax and integration with reveal.js at the cost of more maintenance.
127
+
128
+ To use it, add the following dependencies to your `Gemfile`:
129
+
130
+ gem 'tilt', '~>2.0'
131
+ gem 'slim', '~>4.0'
132
+
133
+ Then install the dependencies with:
134
+
135
+ $ bundle install
136
+
137
+ The feature is activated with the `--template-dir` or `-T` option:
138
+
139
+ $ bundle exec asciidoctor-revealjs -T templates/ CONTENT_FILE.adoc
140
+
141
+ Any individual template file not provided in the directory specified on the command-line will fall back to the template provided by your version of Asciidoctor reveal.js.
142
+ Refer to our https://github.com/asciidoctor/asciidoctor-reveal.js/tree/master/templates[templates] for inspiration.
143
+
144
+ This feature hasn't been ported to the JavaScript CLI (and API) or the standalone executables.
145
+
130
146
 
131
147
  == Node / JavaScript Setup
132
148
 
@@ -148,14 +164,14 @@ You can now install the dependencies:
148
164
 
149
165
  === Convert AsciiDoc into slides
150
166
 
151
- Once the dependencies are installed, verify that the `asciidoctor` command is available.
167
+ Once the dependencies are installed, verify that the `asciidoctor-revealjs` command is available.
152
168
  On Linux and macOS, open a terminal and type:
153
169
 
154
- $ $(npm bin)/asciidoctor --version
170
+ $ npx asciidoctor-revealjs --version
155
171
 
156
172
  On Windows, open PowerShell and type:
157
173
 
158
- $ .\node_modules\.bin\asciidoctor.cmd --version
174
+ $ .\node_modules\.bin\asciidoctor-revealjs.cmd --version
159
175
 
160
176
  The command should report the Asciidoctor CLI version in the terminal:
161
177
 
@@ -183,12 +199,12 @@ If you don't have an existing presentation, you can create a sample presentation
183
199
 
184
200
  To convert the sample presentation into slides, open a terminal and type:
185
201
 
186
- $ $(npm bin)/asciidoctor -r @asciidoctor/reveal.js -b revealjs presentation.adoc
202
+ $ npx asciidoctor-revealjs presentation.adoc
187
203
 
188
204
  On windows, open PowerShell and type:
189
205
 
190
- $ .\node_modules\.bin\asciidoctor.cmd -r @asciidoctor/reveal.js -b revealjs presentation.adoc
191
-
206
+ $ .\node_modules\.bin\asciidoctor-revealjs.cmd presentation.adoc
207
+
192
208
  The above command will generate a file named [.path]_presentation.html_.
193
209
  You can open this file in a browser.
194
210
 
@@ -216,6 +232,61 @@ To execute the script, open a terminal and type:
216
232
 
217
233
  You can open the `presentation.html` file in your browser and enjoy!
218
234
 
235
+
236
+ == Standalone Executable
237
+
238
+ Pre-built binary packages can be downloaded from our {uri-project-repo}/releases[GitHub release page].
239
+ We provide them for Windows 64-bit, Linux 64-bit and macOS 64-bit.
240
+ Open an issue if your platform isn't supported.
241
+ The executables are built using the <<Node / JavaScript Setup,Node / JavaScript>> toolchain.
242
+
243
+ === Install
244
+
245
+ * {uri-project-repo}/releases[Download the executable] for your platform and make it executable with `chmod` or using the files properties' user interface.
246
+ * Copy or clone the reveal.js presentation framework in the directory where you will build your slidedeck.
247
+ Here we do a shallow clone of the repo:
248
+
249
+ $ git clone -b 3.9.2 --depth 1 https://github.com/hakimel/reveal.js.git
250
+
251
+ === Convert AsciiDoc into slides
252
+
253
+ Open a terminal where the executable is and type:
254
+
255
+ $ ./asciidoctor-revealjs --version
256
+
257
+ The command should report the Asciidoctor reveal.js and Asciidoctor CLI version in the terminal:
258
+
259
+ [source,console]
260
+ ----
261
+ Asciidoctor reveal.js 3.0.1 using Asciidoctor.js 2.0.3 (Asciidoctor 2.0.9) [https://asciidoctor.org]
262
+ Runtime Environment (node v12.13.1 on linux)
263
+ CLI version 3.1.0
264
+ ----
265
+
266
+ If you don't have an existing presentation, you can create a sample presentation named [.path]_presentation.adoc_:
267
+
268
+ .presentation.adoc
269
+ [source,asciidoc]
270
+ ----
271
+ = Title Slide
272
+ :revealjsdir: reveal.js
273
+
274
+ == Slide One
275
+
276
+ * Foo
277
+ * Bar
278
+ * World
279
+
280
+ ----
281
+
282
+ To convert the sample presentation into slides, open a terminal and type:
283
+
284
+ $ ./asciidoctor-revealjs presentation.adoc
285
+
286
+ The above command will generate a file named [.path]_presentation.html_.
287
+ You can open this file in a browser.
288
+
289
+
219
290
  == Syntax Examples
220
291
 
221
292
  Let's see some examples of `revealjs` backend features.
@@ -244,7 +315,7 @@ A Great Story
244
315
  --
245
316
  ----
246
317
 
247
- In previous snippet we are creating a slide titled Slide One with bullets and another one titled Slide Two with centered text (reveal.js`' default behavior) with {uri-revealjs-gh}#speaker-notes[speaker notes].
318
+ In previous snippet we are creating a slide titled Slide One with bullets and another one titled Slide Two with centered text (reveal.js`' default behavior) with {uri-revealjs-doc}#speaker-notes[speaker notes].
248
319
  Other syntax exists to create speaker notes, see `examples/speaker-notes.adoc`.
249
320
 
250
321
  Starting with Reveal.js 3.5 speaker notes supports configurable layouts:
@@ -331,7 +402,7 @@ NOTE: The `canvas` keyword can be used instead of `background` for the same effe
331
402
  Is very yellow
332
403
  ----
333
404
 
334
- Slide Three applies the attribute {uri-revealjs-gh}#slide-backgrounds[data-background-color] to the `reveal.js` <section> tag.
405
+ Slide Three applies the attribute {uri-revealjs-doc}#slide-backgrounds[data-background-color] to the `reveal.js` <section> tag.
335
406
  Anything accepted by CSS color formats works.
336
407
 
337
408
 
@@ -348,7 +419,7 @@ image::cover.jpg[background, size=cover]
348
419
  This will put `cover.jpg` as the slide's background image.
349
420
  It sets reveal.js`' `data-background-image` attribute.
350
421
  The `size` attribute is also supported.
351
- See the {uri-revealjs-gh}#image-backgrounds[relevant reveal.js documentation] for details.
422
+ See the {uri-revealjs-doc}#image-backgrounds[relevant reveal.js documentation] for details.
352
423
 
353
424
  NOTE: Background images file names are now relative to the `:imagesdir:` attribute if set.
354
425
 
@@ -386,7 +457,7 @@ For example:
386
457
  == Nice background!
387
458
  ----
388
459
 
389
- See {uri-revealjs-gh}#video-backgrounds[the relevant reveal.js documentation] for details.
460
+ See {uri-revealjs-doc}#video-backgrounds[the relevant reveal.js documentation] for details.
390
461
  Note that the `data-` prefix is not required in asciidoc files.
391
462
 
392
463
 
@@ -400,7 +471,7 @@ The background can be replaced with anything a browser can render in an iframe u
400
471
  == a youtube video
401
472
  ----
402
473
 
403
- See {uri-revealjs-gh}#iframe-backgrounds[the relevant reveal.js documentation] for details.
474
+ See {uri-revealjs-doc}#iframe-backgrounds[the relevant reveal.js documentation] for details.
404
475
 
405
476
 
406
477
  === Slide Transitions
@@ -418,7 +489,7 @@ This slide will override the presentation transition and zoom!
418
489
  Choose from three transition speeds: default, fast or slow!
419
490
  ----
420
491
 
421
- See {uri-revealjs-gh}#slide-transitions[the relevant reveal.js documentation] for details.
492
+ See {uri-revealjs-doc}#slide-transitions[the relevant reveal.js documentation] for details.
422
493
 
423
494
 
424
495
  === Fragments
@@ -435,9 +506,9 @@ See {uri-revealjs-gh}#slide-transitions[the relevant reveal.js documentation] fo
435
506
  ----
436
507
 
437
508
  Slide Four has bullets that are revealed one after the other.
438
- This is what `reveal.js` calls http://lab.hakim.se/reveal-js/#/fragments[fragments].
509
+ This is what `reveal.js` calls {uri-revealjs-home}/fragments[fragments].
439
510
  Applying the step option or role on a list (`[%step]` or `[.step]`) will do the trick.
440
- Here is {uri-revealjs-gh}#fragments[the relevant reveal.js
511
+ Here is {uri-revealjs-doc}#fragments[the relevant reveal.js
441
512
  documentation] on the topic.
442
513
  Note that only `fade-in` is supported for lists at the moment.
443
514
 
@@ -453,7 +524,7 @@ To apply that class to block simply use asciidoctor's class assignment:
453
524
 
454
525
  [.stretch]
455
526
 
456
- See {uri-revealjs-gh}#stretching-elements[reveal.js documentation on stretching elements].
527
+ See {uri-revealjs-doc}#stretching-elements[reveal.js documentation on stretching elements].
457
528
 
458
529
 
459
530
  === Videos
@@ -474,9 +545,9 @@ To override that behavior use the `width` and `height` named attributes.
474
545
 
475
546
  === Syntax highlighting
476
547
 
477
- Reveal.js is well integrated with https://highlightjs.org/[highlight.js] for syntax highlighting.
478
- Asciidoctor-reveal.js supports that.
479
- You can activate highlight.js syntax highlighting (disabled by default) by setting the `source-highlighter` document attribute as follows:
548
+ reveal.js is well integrated with https://highlightjs.org/[Highlight.js] for syntax highlighting.
549
+ Asciidoctor reveal.js supports that.
550
+ You can activate Highlight.js syntax highlighting (disabled by default) by setting the `source-highlighter` document attribute as follows:
480
551
 
481
552
  [source, asciidoc]
482
553
  ----
@@ -485,7 +556,26 @@ You can activate highlight.js syntax highlighting (disabled by default) by setti
485
556
  :source-highlighter: highlightjs
486
557
  ----
487
558
 
488
- Once enabled you can write code blocks as usual:
559
+ [NOTE]
560
+ ====
561
+ By default, we are using a prebuilt version of Highlight.js with 34 commonly used languages hosted on https://cdnjs.com/[cdnjs].
562
+ You can load additionnal languages using the `:highlightjs-languages:` attribute:
563
+
564
+ ```
565
+ // load yaml and scilab languages
566
+ :highlightjs-languages: yaml, scilab
567
+ ```
568
+
569
+ You can also load Highlight.js from a custom base directory (or remote URL) using the `:highlightjsdir:` attribute:
570
+
571
+ ```
572
+ // load from a local path
573
+ :highlightjsdir: highlight
574
+ // load from jsdelivr CDN
575
+ //:highlightjsdir: https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.0/build
576
+ ====
577
+
578
+ Once enabled, you can write code blocks as usual:
489
579
 
490
580
  [source, asciidoc]
491
581
  ....
@@ -515,7 +605,8 @@ print "$0: hello world\n"
515
605
  ....
516
606
 
517
607
  [NOTE]
518
- Alternatively, you can use http://coderay.rubychan.de[Coderay] or http://pygments.org[Pygments] as syntax highlighters if you are using the Asciidoctor/Ruby/Bundler toolchain (not Asciidoctor.js/JavaScript/npm).
608
+ Alternatively, you can use http://rouge.jneen.net/[Rouge], http://coderay.rubychan.de[Coderay] or http://pygments.org[Pygments] as syntax highlighters,
609
+ if you are using the Asciidoctor/Ruby/Bundler toolchain (not Asciidoctor.js/JavaScript/npm).
519
610
  Check the `examples/` directory for examples and notes about what needs to be done for them to work.
520
611
  They are considered unsupported by the asciidoctor-reveal.js project.
521
612
 
@@ -535,11 +626,135 @@ This is a vertical subslide
535
626
 
536
627
  Slide Six uses the vertical slide feature of `reveal.js`.
537
628
  Slide Six.One will be rendered vertically below Slide Six.
538
- Here is {uri-revealjs-gh}#markup[the relevant reveal.js
629
+ Here is {uri-revealjs-doc}#markup[the relevant reveal.js
539
630
  documentation] on that topic.
540
631
 
632
+ === Columns layout
633
+
634
+ Inspired by https://bulma.io/[Bulma], Asciidoctor reveal.js supports columns layout out-of-the-box:
635
+
636
+ [source, asciidoc]
637
+ ....
638
+ [.columns]
639
+ == 2 columns
640
+
641
+ [.column]
642
+ --
643
+ * **Edgar Allen Poe**
644
+ * Sheri S. Tepper
645
+ * Bill Bryson
646
+ --
647
+
648
+ [.column]
649
+ --
650
+ Edgar Allan Poe (/poʊ/; born Edgar Poe; January 19, 1809 – October 7, 1849) was an American writer, editor, and literary critic.
651
+ --
652
+ ....
653
+
654
+ If you do not specify a size, each column will have an equal width, no matter the number of columns.
655
+
656
+ [source, asciidoc]
657
+ ....
658
+ [.columns]
659
+ == 3 columns
660
+
661
+ [.column]
662
+ * Java
663
+ * **Kotlin**
664
+
665
+ [.column]
666
+ * Node
667
+ * **Deno**
668
+
669
+ [.column]
670
+ * Ruby
671
+ * **Crystal**
672
+ ....
541
673
 
542
- === Asciidoctor-reveal.js specific roles
674
+ If you want to change the size of a single column, you can use one of the following classes:
675
+
676
+ * `is-three-quarters`
677
+ * `is-two-thirds`
678
+ * `is-half`
679
+ * `is-one-third`
680
+ * `is-one-quarter`
681
+ * `is-full`
682
+
683
+ The other columns will fill up the remaining space automatically. +
684
+ You can use the following multiples of 20% as well:
685
+
686
+ * `is-four-fifths`
687
+ * `is-three-fifths`
688
+ * `is-two-fifths`
689
+ * `is-one-fifth`
690
+
691
+ [source, asciidoc]
692
+ ....
693
+ [.columns]
694
+ == Columns with size
695
+
696
+ [.column.is-one-third]
697
+ --
698
+ * **Kotlin**
699
+ * Java
700
+ * Scala
701
+ --
702
+
703
+ [.column]
704
+ --
705
+ Programming language for Android, mobile cross-platform
706
+ and web development, server-side, native,
707
+ and data science. Open source forever Github.
708
+ --
709
+ ....
710
+
711
+ The vertical alignment of columns defaults to top aligned.
712
+ Content can be centered by adding the `is-vcentered` class to the slide.
713
+
714
+ [source, asciidoc]
715
+ ....
716
+ [.columns.is-vcentered]
717
+ == Columns Vertically Centered
718
+
719
+ [.column]
720
+ --
721
+ * Few
722
+ * Bullets
723
+ * Here
724
+ --
725
+
726
+ [.column]
727
+ image::large-image.png[]
728
+ ....
729
+
730
+ Text alignment of columns is also supported.
731
+ Text content on individual columns can be aligned with `has-text-left`, `has-text-right` and `has-text-justified` CSS classes.
732
+
733
+ [source, asciidoc]
734
+ ....
735
+ [.columns]
736
+ == Column Text Alignment
737
+
738
+ [.column.has-text-left]
739
+ --
740
+ Something Short
741
+
742
+ Something So Long That We Need It Aligned
743
+ --
744
+
745
+ [.column.has-text-justified]
746
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
747
+
748
+ [.column.has-text-right]
749
+ --
750
+ Something Short
751
+
752
+ Something So Long That We Need It Aligned
753
+ --
754
+ ....
755
+
756
+
757
+ === Asciidoctor reveal.js specific roles
543
758
 
544
759
  Roles are usually applied with the following syntax where the `important-text` CSS class would be applied to the slide title in the generated HTML:
545
760
 
@@ -574,6 +789,17 @@ Here is a list of supported roles:
574
789
  right:: Will apply a `float: right` style to the affected block
575
790
 
576
791
 
792
+ === Asciidoctor reveal.js specific attributes
793
+
794
+ ==== iFrame Preview Overlay
795
+
796
+ The reveal.js feature activated by a global `previewLinks: true` configuration or by adding the `data-preview-link` HTML attribute to `<a>` tags can be activated by using special AsciiDoc attributes.
797
+
798
+ On links use the `preview=true` attribute, on images use the `link_preview=true` attribute and globally you can set `:revealjs_previewlinks:` attribute.
799
+
800
+ See <<examples/links.adoc#,links.adoc>> and <<examples/links-preview.adoc#,links-preview.adoc>> for examples.
801
+
802
+
577
803
  === Title slide customization
578
804
 
579
805
  The title slide is customized via Asciidoc attributes.
@@ -583,7 +809,7 @@ title that look like this: `:name: value`.
583
809
  This converter supports changing the color, image, video, iframe and
584
810
  transitions of the title slide.
585
811
 
586
- Read {uri-revealjs-gh}#slide-backgrounds[the relevant reveal.js documentation] to understand what attributes need to be set.
812
+ Read {uri-revealjs-doc}#slide-backgrounds[the relevant reveal.js documentation] to understand what attributes need to be set.
587
813
  Keep in mind that for title slides you must replace `data-` with `title-slide-`.
588
814
 
589
815
  ifeval::[{safe-mode-level} >= 20]
@@ -666,7 +892,7 @@ If the `:customcss:` attribute value is empty then `asciidoctor-revealjs.css` is
666
892
 
667
893
  === Slide state
668
894
 
669
- Reveal.js supports a {uri-revealjs-gh}#slide-states[data-state] tag that can be added on slides which gets rendered into `<section>` tags.
895
+ Reveal.js supports a {uri-revealjs-doc}#slide-states[data-state] tag that can be added on slides which gets rendered into `<section>` tags.
670
896
  In AsciiDoc the `data-state` can be applied to a slide by adding a state attribute to a section like this:
671
897
 
672
898
  [source, asciidoc]
@@ -709,6 +935,41 @@ WARNING: This presentation is dangerous!
709
935
 
710
936
  Here are details about Asciidoctor's http://asciidoctor.org/docs/user-manual/#admonition-icons[Admonition icons] support.
711
937
 
938
+ === Supplemental Content with Docinfo
939
+ // Originally from https://github.com/asciidoctor/asciidoctor-bespoke#supplemental-content
940
+
941
+ It's possible to inject supplemental content into the output document using http://asciidoctor.org/docs/user-manual/#docinfo-file[docinfo files].
942
+ This core feature of AsciiDoc has been adapted to work with the reveal.js converter.
943
+
944
+ Currently, there are three insertion locations for docinfo content in a reveal.js document:
945
+
946
+ head:: content is inserted after the last child of the `<head>` element
947
+ header:: content is inserted before the first child of the `<div class="slides">` element (before the slides)
948
+ footer:: content is inserted after the last child of the `<div class="slides">` element (after the slides)
949
+
950
+ The content you want to insert goes into a sibling file of the slide deck document with the following filename patterns:
951
+
952
+ head:: `docinfo-revealjs.html`
953
+ header:: `docinfo-header-revealjs.html`
954
+ footer:: `docinfo-footer-revealjs.html`
955
+
956
+ For example, let's say you want to embed a tweet into your slide deck.
957
+ You might inject the shared embedding JavaScript using a footer docinfo file:
958
+
959
+ .src/docinfo-footer-revealjs.html
960
+ [source,html]
961
+ ----
962
+ <script src="https://platform.twitter.com/widgets.js"></script>
963
+ ----
964
+
965
+ You then need to set the following document attribute in the AsciiDoc header:
966
+
967
+ ----
968
+ :docinfo: shared
969
+ ----
970
+
971
+ When this attribute is defined, the converter will automatically read the docinfo file(s) and insert the contents into the specified location in the output document.
972
+
712
973
 
713
974
  == Reveal.js Options
714
975
 
@@ -724,7 +985,7 @@ NOTE: Default settings are based on `reveal.js` default settings.
724
985
 
725
986
  |:revealjs_theme:
726
987
  |beige, *black*, league, night, serif, simple, sky, solarized, white
727
- |Chooses one of reveal.js`' {uri-revealjs-gh}#theming[built-in themes].
988
+ |Chooses one of reveal.js`' {uri-revealjs-doc}#theming[built-in themes].
728
989
 
729
990
  |:revealjs_customtheme:
730
991
  |<file\|URL>
@@ -740,7 +1001,7 @@ Default is built-in [path]_lib/css/zenburn.css_.
740
1001
  |<file\|URL>
741
1002
  |Overrides reveal.js directory.
742
1003
  Example: ../reveal.js or
743
- https://cdnjs.com/libraries/reveal.js/3.7.0[https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0].
1004
+ https://cdn.jsdelivr.net/npm/reveal.js@3.9.2.
744
1005
  Default is `reveal.js/` unless in a Node.js environment where it is `node_modules/reveal.js/`.
745
1006
 
746
1007
  |:revealjs_controls:
@@ -782,9 +1043,13 @@ all:: show on all views (default)
782
1043
  speaker:: only show slide numbers on speaker notes view
783
1044
  print:: only show slide numbers when printing to PDF
784
1045
 
1046
+ |:revealjs_hash:
1047
+ |true, *false*
1048
+ |Add the current slide number to the URL hash so that reloading the page/copying the URL will return you to the same slide
1049
+
785
1050
  |:revealjs_history:
786
1051
  |true, *false*
787
- |Push each slide change to the browser history.
1052
+ |Push each slide change to the browser history. Implies `hash: true`
788
1053
 
789
1054
  |:revealjs_keyboard:
790
1055
  |*true*, false
@@ -810,6 +1075,14 @@ print:: only show slide numbers when printing to PDF
810
1075
  |true, *false*
811
1076
  |Change the presentation direction to be RTL.
812
1077
 
1078
+ |:revealjs_navigationMode:
1079
+ |*default*, linear, grid
1080
+ |See {uri-revealjs-doc}#navigation-mode for details
1081
+
1082
+ |:revealjs_shuffle:
1083
+ |true, *false*
1084
+ |Randomizes the order of slides each time the presentation loads
1085
+
813
1086
  |:revealjs_fragments:
814
1087
  |*true*, false
815
1088
  |Turns fragments on and off globally.
@@ -838,6 +1111,14 @@ null:: Media will only autoplay if data-autoplay is present
838
1111
  true:: All media will autoplay, regardless of individual setting
839
1112
  false:: No media will autoplay, regardless of individual setting
840
1113
 
1114
+ |:revealjs_preloadIframes:
1115
+ |*null*, true, false
1116
+ a|Global override for preloading lazy-loaded iframes
1117
+
1118
+ null:: Iframes with `data-src` AND `data-preload` will be loaded when within the `viewDistance`, iframes with only `data-src` will be loaded when visible
1119
+ true:: All iframes with `data-src` will be loaded when within the `viewDistance`
1120
+ false:: All iframes with `data-src` will be loaded only when visible
1121
+
841
1122
  |:revealjs_autoSlide:
842
1123
  |<integer>
843
1124
  |Delay in milliseconds between automatically proceeding to the next slide.
@@ -858,10 +1139,31 @@ This value can be overwritten by using a `data-autoslide` attribute on your slid
858
1139
  This is used to show a pacing timer in the speaker view.
859
1140
  Defaults to *120*
860
1141
 
1142
+ |:revealjs_totalTime:
1143
+ |<integer>
1144
+ |Specify the total time in seconds that is available to present.
1145
+ If this is set to a nonzero value, the pacing timer will work out the time available for each slide, instead of using the defaultTiming value.
1146
+ Defaults to *0*
1147
+
1148
+ |:revealjs_minimumTimePerSlide:
1149
+ |<integer>
1150
+ |Specify the minimum amount of time you want to allot to each slide, if using the totalTime calculation method.
1151
+ If the automated time allocation causes slide pacing to fall below this threshold, then you will see an alert in the speaker notes window.
1152
+ Defaults to *0*.
1153
+
861
1154
  |:revealjs_mouseWheel:
862
1155
  |true, *false*
863
1156
  |Enable slide navigation via mouse wheel.
864
1157
 
1158
+ |:revealjs_hideInactiveCursor:
1159
+ |*true*, false
1160
+ |Hide cursor if inactive
1161
+
1162
+ |:revealjs_hideCursorTime:
1163
+ |<integer>
1164
+ |Time before the cursor is hidden (in ms).
1165
+ Defaults to *5000*.
1166
+
865
1167
  |:revealjs_hideAddressBar:
866
1168
  |*true*, false
867
1169
  |Hides the address bar on mobile devices.
@@ -869,7 +1171,7 @@ Defaults to *120*
869
1171
  |:revealjs_previewLinks:
870
1172
  |true, *false*
871
1173
  |Opens links in an iframe preview overlay.
872
- Add `data-preview-link` and `data-preview-link="false"` to customise each link individually
1174
+ Add the `preview=true` attribute on links or `link_preview=true` attribute on images to customize each link individually.
873
1175
 
874
1176
  |:revealjs_transition:
875
1177
  |none, fade, *slide*, convex, concave, zoom
@@ -885,7 +1187,14 @@ Add `data-preview-link` and `data-preview-link="false"` to customise each link i
885
1187
 
886
1188
  |:revealjs_viewDistance:
887
1189
  |<integer>
888
- |Number of slides away from the current that are visible. Default: 3
1190
+ |Number of slides away from the current that are visible.
1191
+ Default: *3*.
1192
+
1193
+ |:revealjs_mobileViewDistance:
1194
+ |<integer>
1195
+ |Number of slides away from the current that are visible on mobile devices.
1196
+ It is advisable to set this to a lower number than viewDistance in order to save resources.
1197
+ Default *3*.
889
1198
 
890
1199
  |:revealjs_parallaxBackgroundImage:
891
1200
  |<file\|URL>
@@ -943,10 +1252,17 @@ Defaults to *1*
943
1252
 
944
1253
  If you want to build a custom theme or customize an existing one you should
945
1254
  look at the
946
- {uri-revealjs-gh}/blob/master/css/theme/README.md[reveal.js
1255
+ {uri-revealjs-gh}/css/theme/README.md[reveal.js
947
1256
  theme documentation] and use the `revealjs_customtheme` AsciiDoc attribute to
948
1257
  activate it.
949
1258
 
1259
+
1260
+ === PDF Export
1261
+
1262
+ Follow {uri-revealjs-doc}#pdf-export[reveal.js' documentation] for PDF export.
1263
+ We would add that we have successfully used PDF export without the requirement of a Web server.
1264
+
1265
+
950
1266
  === Default plugins
951
1267
 
952
1268
  By default, generated presentations will have the following reveal.js plugins enabled:
@@ -965,17 +1281,6 @@ For example, to disable all the default plugins set the following document attri
965
1281
  :revealjs_plugin_notes: disabled
966
1282
  ----
967
1283
 
968
- reveal.js ships with a plugin that allows to create a PDF from a slide deck.
969
- To enable this plugin, set the `revealjs_plugin_pdf` attribute.
970
-
971
- ----
972
- :revealjs_plugin_pdf: enabled
973
- ----
974
-
975
- When the plugin is enabled and you run your presentation in a browser with `?print-pdf` at the end of the URL, you can then use the default print function to print the slide deck into a PDF document.
976
-
977
- TIP: To work properly, this plugin requires a Chrome-based browser.
978
-
979
1284
 
980
1285
  === Additional plugins
981
1286
 
@@ -988,7 +1293,7 @@ Additional reveal.js plugins can be installed and activated using AsciiDoc attri
988
1293
 
989
1294
  Looking at the example provided in the repository will provide guidance: link:examples/revealjs-plugins.adoc[AsciiDoc source], link:examples/revealjs-plugins.js[Plugin Loader], link:examples/revealjs-plugins-conf.js[Plugin Configuration].
990
1295
 
991
- Read {uri-revealjs-gh}#dependencies[the relevant reveal.js documentation] to understand more about reveal.js plugins.
1296
+ Read {uri-revealjs-doc}#dependencies[the relevant reveal.js documentation] to understand more about reveal.js plugins.
992
1297
  A {uri-revealjs-gh}/wiki/Plugins,-Tools-and-Hardware[list of existing reveal.js plugins] is also maintained upstream.
993
1298
 
994
1299
 
@@ -1005,6 +1310,28 @@ If you need more details about our dependencies check out Asciidoctor dependenci
1005
1310
  * With Ruby / Bundler: https://github.com/asciidoctor/asciidoctor/tree/v2.0.10#requirements[Asciidoctor] 2.0.10
1006
1311
  * With JavaScript (Node.js) / NPM: https://github.com/asciidoctor/asciidoctor.js/blob/v2.0.3/packages/core/package.json[Asciidoctor.js] 2.0.3
1007
1312
 
1313
+
1314
+ [[revealjs-compatibility-matrix]]
1315
+ == reveal.js Compatibility Matrix
1316
+
1317
+ We try as much as possible to be compatible with a broad range of reveal.js versions.
1318
+ However, changes made by that project sometimes forces us to drop compatibility with older reveal.js releases.
1319
+ This table tracks this compatibility.
1320
+
1321
+ |===
1322
+ |Asciidoctor reveal.js version |reveal.js version
1323
+
1324
+ |4.x
1325
+ |3.9 - 3.8
1326
+
1327
+ |3.x, 2.x, 1.x
1328
+ |3.7 - 3.0
1329
+
1330
+ |Unversioned releases
1331
+ |2.x
1332
+ |===
1333
+
1334
+
1008
1335
  [[asciidoctorjs-compatibility-matrix]]
1009
1336
  == Asciidoctor.js Compatibility Matrix
1010
1337
 
@@ -1055,7 +1382,7 @@ Developer-focused documentation is link:HACKING.adoc[over here].
1055
1382
 
1056
1383
  == Copyright and Licensing
1057
1384
 
1058
- Copyright (C) 2012-2019 {authors} and the Asciidoctor Project.
1385
+ Copyright (C) 2012-2020 {authors} and the Asciidoctor Project.
1059
1386
  Free use of this software is granted under the terms of the MIT License.
1060
1387
 
1061
1388
  ifdef::env-github,env-browser[See the <<LICENSE#,LICENSE>> file for details.]