asciidoctor-revealjs 3.0.0.pre.rc1 → 4.1.0.rc2

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 +416 -64
  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 +79 -16
  89. data/CHANGELOG.adoc +0 -396
  90. data/HACKING.adoc +0 -343
  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: cfd55df0c713f375e7f6512d1390b06347a742d00eb35cbbc39298de6680cfe3
4
- data.tar.gz: 397f8663b1586aa46990f18d21821722762aab12ffb688b1bfa81558c9a2c9e4
3
+ metadata.gz: 6b2343b79440b211359d9b5a8cf73fa259d0c46936b37c1d732da9f5610187f0
4
+ data.tar.gz: 8261031cd8f7a5528a8a4bfc5cd23cecf613f0f66dd6aca1c225de2a9080b4c0
5
5
  SHA512:
6
- metadata.gz: a7ab85893e595375c5ef70bccb4439c4ee159282ba2515931ed55948f92f1b2300a1f5fbe305cbc392531e11f991cb5fbd0a47ee8fcab8e0cb7c80081c1954a9
7
- data.tar.gz: 3a034c9c4a4f4e08ac1e9958d417bd9fe6aa50b5ee50ff2334f86bfff85e0b7f1dad630c1c546bcb8f56573032e52554a4245e9995af97cdc744fdb9df8feb43
6
+ metadata.gz: 8e823350491fb2ac4ccde6e606a1e5fdceaffb6a7c4bc30bf21c2c8b6d2132052fc0ea17cd2507584dcccb33d48e842b51514c9d433b9afa24bd259649c5bd7f
7
+ data.tar.gz: 9fcfd3e2f9703d1032207127b31e836ffa14a83b56414e646cecf183ef15389ca6fe6d6ebf759254c351aa98535a1db06513f80f5f256f76c421d0b036cbbda6
@@ -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
 
@@ -134,6 +150,7 @@ TIP: If you are using https://pages.github.com/[GitHub Pages], plan ahead by kee
134
150
 
135
151
  First you must install and configure {uri-nodejs-download}[Node] on your machine.
136
152
 
153
+ [[node-install]]
137
154
  === Install
138
155
 
139
156
  We recommend to install the dependencies in a project directory, such as the directory where your AsciiDoc presentations are stored.
@@ -143,18 +160,18 @@ If you don't have a `package.json` file in your project directory, you can creat
143
160
 
144
161
  You can now install the dependencies:
145
162
 
146
- $ npm i --save asciidoctor @asciidoctor/reveal.js
163
+ $ npm i --save asciidoctor@^2.0 @asciidoctor/reveal.js
147
164
 
148
165
  === Convert AsciiDoc into slides
149
166
 
150
- 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.
151
168
  On Linux and macOS, open a terminal and type:
152
169
 
153
- $ $(npm bin)/asciidoctor --version
170
+ $ npx asciidoctor-revealjs --version
154
171
 
155
172
  On Windows, open PowerShell and type:
156
173
 
157
- $ .\node_modules\.bin\asciidoctor.cmd --version
174
+ $ .\node_modules\.bin\asciidoctor-revealjs.cmd --version
158
175
 
159
176
  The command should report the Asciidoctor CLI version in the terminal:
160
177
 
@@ -182,12 +199,12 @@ If you don't have an existing presentation, you can create a sample presentation
182
199
 
183
200
  To convert the sample presentation into slides, open a terminal and type:
184
201
 
185
- $ $(npm bin)/asciidoctor -r @asciidoctor/reveal.js -b revealjs presentation.adoc
202
+ $ npx asciidoctor-revealjs presentation.adoc
186
203
 
187
204
  On windows, open PowerShell and type:
188
205
 
189
- $ .\node_modules\.bin\asciidoctor.cmd -r @asciidoctor/reveal.js -b revealjs presentation.adoc
190
-
206
+ $ .\node_modules\.bin\asciidoctor-revealjs.cmd presentation.adoc
207
+
191
208
  The above command will generate a file named [.path]_presentation.html_.
192
209
  You can open this file in a browser.
193
210
 
@@ -215,6 +232,61 @@ To execute the script, open a terminal and type:
215
232
 
216
233
  You can open the `presentation.html` file in your browser and enjoy!
217
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
+
218
290
  == Syntax Examples
219
291
 
220
292
  Let's see some examples of `revealjs` backend features.
@@ -243,7 +315,7 @@ A Great Story
243
315
  --
244
316
  ----
245
317
 
246
- 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].
247
319
  Other syntax exists to create speaker notes, see `examples/speaker-notes.adoc`.
248
320
 
249
321
  Starting with Reveal.js 3.5 speaker notes supports configurable layouts:
@@ -330,7 +402,7 @@ NOTE: The `canvas` keyword can be used instead of `background` for the same effe
330
402
  Is very yellow
331
403
  ----
332
404
 
333
- 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.
334
406
  Anything accepted by CSS color formats works.
335
407
 
336
408
 
@@ -347,7 +419,7 @@ image::cover.jpg[background, size=cover]
347
419
  This will put `cover.jpg` as the slide's background image.
348
420
  It sets reveal.js`' `data-background-image` attribute.
349
421
  The `size` attribute is also supported.
350
- 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.
351
423
 
352
424
  NOTE: Background images file names are now relative to the `:imagesdir:` attribute if set.
353
425
 
@@ -385,7 +457,7 @@ For example:
385
457
  == Nice background!
386
458
  ----
387
459
 
388
- 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.
389
461
  Note that the `data-` prefix is not required in asciidoc files.
390
462
 
391
463
 
@@ -399,7 +471,7 @@ The background can be replaced with anything a browser can render in an iframe u
399
471
  == a youtube video
400
472
  ----
401
473
 
402
- 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.
403
475
 
404
476
 
405
477
  === Slide Transitions
@@ -417,7 +489,7 @@ This slide will override the presentation transition and zoom!
417
489
  Choose from three transition speeds: default, fast or slow!
418
490
  ----
419
491
 
420
- 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.
421
493
 
422
494
 
423
495
  === Fragments
@@ -434,9 +506,9 @@ See {uri-revealjs-gh}#slide-transitions[the relevant reveal.js documentation] fo
434
506
  ----
435
507
 
436
508
  Slide Four has bullets that are revealed one after the other.
437
- 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].
438
510
  Applying the step option or role on a list (`[%step]` or `[.step]`) will do the trick.
439
- Here is {uri-revealjs-gh}#fragments[the relevant reveal.js
511
+ Here is {uri-revealjs-doc}#fragments[the relevant reveal.js
440
512
  documentation] on the topic.
441
513
  Note that only `fade-in` is supported for lists at the moment.
442
514
 
@@ -452,7 +524,7 @@ To apply that class to block simply use asciidoctor's class assignment:
452
524
 
453
525
  [.stretch]
454
526
 
455
- 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].
456
528
 
457
529
 
458
530
  === Videos
@@ -473,9 +545,9 @@ To override that behavior use the `width` and `height` named attributes.
473
545
 
474
546
  === Syntax highlighting
475
547
 
476
- Reveal.js is well integrated with https://highlightjs.org/[highlight.js] for syntax highlighting.
477
- Asciidoctor-reveal.js supports that.
478
- 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:
479
551
 
480
552
  [source, asciidoc]
481
553
  ----
@@ -484,7 +556,26 @@ You can activate highlight.js syntax highlighting (disabled by default) by setti
484
556
  :source-highlighter: highlightjs
485
557
  ----
486
558
 
487
- 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:
488
579
 
489
580
  [source, asciidoc]
490
581
  ....
@@ -514,7 +605,8 @@ print "$0: hello world\n"
514
605
  ....
515
606
 
516
607
  [NOTE]
517
- 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).
518
610
  Check the `examples/` directory for examples and notes about what needs to be done for them to work.
519
611
  They are considered unsupported by the asciidoctor-reveal.js project.
520
612
 
@@ -534,11 +626,135 @@ This is a vertical subslide
534
626
 
535
627
  Slide Six uses the vertical slide feature of `reveal.js`.
536
628
  Slide Six.One will be rendered vertically below Slide Six.
537
- Here is {uri-revealjs-gh}#markup[the relevant reveal.js
629
+ Here is {uri-revealjs-doc}#markup[the relevant reveal.js
538
630
  documentation] on that topic.
539
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**
540
668
 
541
- === Asciidoctor-reveal.js specific roles
669
+ [.column]
670
+ * Ruby
671
+ * **Crystal**
672
+ ....
673
+
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
542
758
 
543
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:
544
760
 
@@ -573,6 +789,17 @@ Here is a list of supported roles:
573
789
  right:: Will apply a `float: right` style to the affected block
574
790
 
575
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
+
576
803
  === Title slide customization
577
804
 
578
805
  The title slide is customized via Asciidoc attributes.
@@ -582,7 +809,7 @@ title that look like this: `:name: value`.
582
809
  This converter supports changing the color, image, video, iframe and
583
810
  transitions of the title slide.
584
811
 
585
- 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.
586
813
  Keep in mind that for title slides you must replace `data-` with `title-slide-`.
587
814
 
588
815
  ifeval::[{safe-mode-level} >= 20]
@@ -665,7 +892,7 @@ If the `:customcss:` attribute value is empty then `asciidoctor-revealjs.css` is
665
892
 
666
893
  === Slide state
667
894
 
668
- 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.
669
896
  In AsciiDoc the `data-state` can be applied to a slide by adding a state attribute to a section like this:
670
897
 
671
898
  [source, asciidoc]
@@ -708,6 +935,41 @@ WARNING: This presentation is dangerous!
708
935
 
709
936
  Here are details about Asciidoctor's http://asciidoctor.org/docs/user-manual/#admonition-icons[Admonition icons] support.
710
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
+
711
973
 
712
974
  == Reveal.js Options
713
975
 
@@ -723,7 +985,7 @@ NOTE: Default settings are based on `reveal.js` default settings.
723
985
 
724
986
  |:revealjs_theme:
725
987
  |beige, *black*, league, night, serif, simple, sky, solarized, white
726
- |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].
727
989
 
728
990
  |:revealjs_customtheme:
729
991
  |<file\|URL>
@@ -739,7 +1001,7 @@ Default is built-in [path]_lib/css/zenburn.css_.
739
1001
  |<file\|URL>
740
1002
  |Overrides reveal.js directory.
741
1003
  Example: ../reveal.js or
742
- 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.
743
1005
  Default is `reveal.js/` unless in a Node.js environment where it is `node_modules/reveal.js/`.
744
1006
 
745
1007
  |:revealjs_controls:
@@ -781,9 +1043,13 @@ all:: show on all views (default)
781
1043
  speaker:: only show slide numbers on speaker notes view
782
1044
  print:: only show slide numbers when printing to PDF
783
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
+
784
1050
  |:revealjs_history:
785
1051
  |true, *false*
786
- |Push each slide change to the browser history.
1052
+ |Push each slide change to the browser history. Implies `hash: true`
787
1053
 
788
1054
  |:revealjs_keyboard:
789
1055
  |*true*, false
@@ -809,6 +1075,14 @@ print:: only show slide numbers when printing to PDF
809
1075
  |true, *false*
810
1076
  |Change the presentation direction to be RTL.
811
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
+
812
1086
  |:revealjs_fragments:
813
1087
  |*true*, false
814
1088
  |Turns fragments on and off globally.
@@ -837,6 +1111,14 @@ null:: Media will only autoplay if data-autoplay is present
837
1111
  true:: All media will autoplay, regardless of individual setting
838
1112
  false:: No media will autoplay, regardless of individual setting
839
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
+
840
1122
  |:revealjs_autoSlide:
841
1123
  |<integer>
842
1124
  |Delay in milliseconds between automatically proceeding to the next slide.
@@ -857,10 +1139,31 @@ This value can be overwritten by using a `data-autoslide` attribute on your slid
857
1139
  This is used to show a pacing timer in the speaker view.
858
1140
  Defaults to *120*
859
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
+
860
1154
  |:revealjs_mouseWheel:
861
1155
  |true, *false*
862
1156
  |Enable slide navigation via mouse wheel.
863
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
+
864
1167
  |:revealjs_hideAddressBar:
865
1168
  |*true*, false
866
1169
  |Hides the address bar on mobile devices.
@@ -868,7 +1171,7 @@ Defaults to *120*
868
1171
  |:revealjs_previewLinks:
869
1172
  |true, *false*
870
1173
  |Opens links in an iframe preview overlay.
871
- 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.
872
1175
 
873
1176
  |:revealjs_transition:
874
1177
  |none, fade, *slide*, convex, concave, zoom
@@ -884,7 +1187,14 @@ Add `data-preview-link` and `data-preview-link="false"` to customise each link i
884
1187
 
885
1188
  |:revealjs_viewDistance:
886
1189
  |<integer>
887
- |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*.
888
1198
 
889
1199
  |:revealjs_parallaxBackgroundImage:
890
1200
  |<file\|URL>
@@ -942,10 +1252,17 @@ Defaults to *1*
942
1252
 
943
1253
  If you want to build a custom theme or customize an existing one you should
944
1254
  look at the
945
- {uri-revealjs-gh}/blob/master/css/theme/README.md[reveal.js
1255
+ {uri-revealjs-gh}/css/theme/README.md[reveal.js
946
1256
  theme documentation] and use the `revealjs_customtheme` AsciiDoc attribute to
947
1257
  activate it.
948
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
+
949
1266
  === Default plugins
950
1267
 
951
1268
  By default, generated presentations will have the following reveal.js plugins enabled:
@@ -964,17 +1281,6 @@ For example, to disable all the default plugins set the following document attri
964
1281
  :revealjs_plugin_notes: disabled
965
1282
  ----
966
1283
 
967
- reveal.js ships with a plugin that allows to create a PDF from a slide deck.
968
- To enable this plugin, set the `revealjs_plugin_pdf` attribute.
969
-
970
- ----
971
- :revealjs_plugin_pdf: enabled
972
- ----
973
-
974
- 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.
975
-
976
- TIP: To work properly, this plugin requires a Chrome-based browser.
977
-
978
1284
 
979
1285
  === Additional plugins
980
1286
 
@@ -987,7 +1293,7 @@ Additional reveal.js plugins can be installed and activated using AsciiDoc attri
987
1293
 
988
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].
989
1295
 
990
- 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.
991
1297
  A {uri-revealjs-gh}/wiki/Plugins,-Tools-and-Hardware[list of existing reveal.js plugins] is also maintained upstream.
992
1298
 
993
1299
 
@@ -1005,6 +1311,52 @@ If you need more details about our dependencies check out Asciidoctor dependenci
1005
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
1006
1312
 
1007
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
+
1335
+ [[asciidoctorjs-compatibility-matrix]]
1336
+ == Asciidoctor.js Compatibility Matrix
1337
+
1338
+ NOTE: This section is intended only for more advanced users who combine extensions or maintain slide decks over many releases and need to update their dependencies.
1339
+
1340
+ Due to our Ruby to JavaScript conversion process, published npm packages have strict requirements with which version of Asciidoctor.js they are compatible with.
1341
+ This table tracks this compatibility.
1342
+
1343
+ |===
1344
+ |Asciidoctor-reveal.js version |Asciidoctor.js version
1345
+
1346
+ |3.x
1347
+ |2.x
1348
+
1349
+ |2.x
1350
+ |1.5.9
1351
+
1352
+ |1.1.x
1353
+ |1.5.6-preview.4
1354
+ |===
1355
+
1356
+ Be aware that it is always possible to recompile the converter into JavaScript from source so compatibility can be created by anyone if needed.
1357
+ More details on that topic can be found link:HACKING.adoc#node-binary-compatibility[in the development guide].
1358
+
1359
+
1008
1360
  == Showcase Presentations
1009
1361
 
1010
1362
  === Power Catchup -- Everything Practical and Important in Java 9 to 13
@@ -1030,7 +1382,7 @@ Developer-focused documentation is link:HACKING.adoc[over here].
1030
1382
 
1031
1383
  == Copyright and Licensing
1032
1384
 
1033
- Copyright (C) 2012-2019 {authors} and the Asciidoctor Project.
1385
+ Copyright (C) 2012-2020 {authors} and the Asciidoctor Project.
1034
1386
  Free use of this software is granted under the terms of the MIT License.
1035
1387
 
1036
1388
  ifdef::env-github,env-browser[See the <<LICENSE#,LICENSE>> file for details.]