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.
- checksums.yaml +4 -4
- data/LICENSE.adoc +1 -1
- data/README.adoc +416 -64
- data/Rakefile +30 -7
- data/asciidoctor-revealjs.gemspec +6 -4
- data/bin/asciidoctor-revealjs +7 -0
- data/examples/a11y-dark.css +99 -0
- data/examples/autoslide.adoc +22 -0
- data/examples/custom-layout.adoc +10 -0
- data/examples/customcss.adoc +1 -1
- data/examples/data-attributes.adoc +245 -0
- data/examples/docinfo-footer-revealjs.html +10 -0
- data/examples/docinfo-revealjs.html +7 -0
- data/examples/font-awesome-specific-version.adoc +11 -0
- data/examples/font-awesome.adoc +23 -4
- data/examples/font-awesome.css +3 -0
- data/examples/footnotes.adoc +46 -0
- data/examples/fragments.adoc +44 -0
- data/examples/fragments.css +18 -0
- data/examples/grid-layout-3x2.adoc +50 -0
- data/examples/grid-layout-docinfo-revealjs.html +11 -0
- data/examples/grid-layout.adoc +194 -0
- data/examples/history-hash.adoc +19 -0
- data/examples/history-regression-tests.adoc +0 -5
- data/examples/history.adoc +4 -4
- data/examples/images/asciidoctor-logo.svg +102 -0
- data/examples/images/cute-cat-1.jpg +0 -0
- data/examples/images/cute-cat-2.jpg +0 -0
- data/examples/images/cute-cat-3.jpg +0 -0
- data/examples/images/flock-of-seagulls_daniel-simion.mp3 +0 -0
- data/examples/issue-grid-layout-images.adoc +25 -0
- data/examples/level-sectnums.adoc +24 -0
- data/examples/links-preview.adoc +32 -0
- data/examples/links.adoc +39 -0
- data/examples/mathjax-cdn.adoc +21 -0
- data/examples/mathjax.adoc +20 -0
- data/examples/release-4.0.adoc +192 -0
- data/examples/release-4.0.css +23 -0
- data/examples/release-4.1.adoc +133 -0
- data/examples/release-4.1.css +50 -0
- data/examples/revealjs-custom-theme.adoc +10 -0
- data/examples/source-coderay.adoc +15 -0
- data/examples/source-emphasis.adoc +128 -0
- data/examples/source-highlightjs-html.adoc +1 -1
- data/examples/source-highlightjs-languages.adoc +27 -0
- data/examples/source-highlightjs.adoc +85 -2
- data/examples/source-pygments.adoc +12 -0
- data/examples/source-rouge-docinfo.html +8 -0
- data/examples/source-rouge.adoc +18 -0
- data/examples/steps.adoc +87 -0
- data/examples/text-alignments.adoc +44 -0
- data/examples/video.adoc +30 -8
- data/examples/with-docinfo-shared.adoc +13 -0
- data/lib/asciidoctor-revealjs/converter.rb +1053 -769
- data/lib/asciidoctor-revealjs/highlightjs.rb +333 -2
- data/lib/asciidoctor-revealjs/version.rb +1 -1
- data/templates/admonition.html.slim +1 -1
- data/templates/asciidoctor-compatibility.css +390 -0
- data/templates/audio.html.slim +1 -1
- data/templates/colist.html.slim +1 -1
- data/templates/dlist.html.slim +3 -3
- data/templates/document.html.slim +76 -59
- data/templates/example.html.slim +1 -1
- data/templates/helpers.rb +170 -5
- data/templates/image.html.slim +3 -3
- data/templates/inline_anchor.html.slim +6 -4
- data/templates/inline_button.html.slim +2 -1
- data/templates/inline_footnote.html.slim +11 -4
- data/templates/inline_image.html.slim +5 -8
- data/templates/inline_kbd.html.slim +3 -2
- data/templates/inline_menu.html.slim +4 -3
- data/templates/inline_quoted.html.slim +13 -21
- data/templates/listing.html.slim +15 -10
- data/templates/literal.html.slim +1 -1
- data/templates/olist.html.slim +2 -2
- data/templates/open.html.slim +3 -3
- data/templates/paragraph.html.slim +1 -1
- data/templates/quote.html.slim +1 -1
- data/templates/section.html.slim +51 -43
- data/templates/sidebar.html.slim +1 -1
- data/templates/stem.html.slim +1 -1
- data/templates/stretch_nested_elements.js.slim +65 -0
- data/templates/table.html.slim +3 -2
- data/templates/title_slide.html.slim +28 -0
- data/templates/ulist.html.slim +3 -3
- data/templates/verse.html.slim +1 -1
- data/templates/video.html.slim +14 -8
- metadata +79 -16
- data/CHANGELOG.adoc +0 -396
- data/HACKING.adoc +0 -343
- data/examples/revealjs-features.adoc +0 -23
- data/templates/asciidoctor_revealjs.css.slim +0 -59
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 6b2343b79440b211359d9b5a8cf73fa259d0c46936b37c1d732da9f5610187f0
|
4
|
+
data.tar.gz: 8261031cd8f7a5528a8a4bfc5cd23cecf613f0f66dd6aca1c225de2a9080b4c0
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8e823350491fb2ac4ccde6e606a1e5fdceaffb6a7c4bc30bf21c2c8b6d2132052fc0ea17cd2507584dcccb33d48e842b51514c9d433b9afa24bd259649c5bd7f
|
7
|
+
data.tar.gz: 9fcfd3e2f9703d1032207127b31e836ffa14a83b56414e646cecf183ef15389ca6fe6d6ebf759254c351aa98535a1db06513f80f5f256f76c421d0b036cbbda6
|
data/LICENSE.adoc
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
.The MIT License
|
2
2
|
....
|
3
|
-
Copyright (C) 2012-
|
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
|
data/README.adoc
CHANGED
@@ -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:
|
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
|
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
|
-
|
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/
|
48
|
-
⁃
|
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
|
⁃
|
51
|
-
{uri-project-repo}/tree/
|
50
|
+
{uri-project-repo}/tree/v3.1.0#readme[3.1.0] (latest from 3.x series)
|
52
51
|
⁃
|
53
|
-
{uri-project-repo}/tree/reveal.js-2.x#readme[Unversioned pre-release] (compatible with
|
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:
|
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.
|
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://
|
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
|
-
$
|
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
|
-
$
|
202
|
+
$ npx asciidoctor-revealjs presentation.adoc
|
186
203
|
|
187
204
|
On windows, open PowerShell and type:
|
188
205
|
|
189
|
-
$ .\node_modules\.bin\asciidoctor.cmd
|
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-
|
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-
|
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-
|
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-
|
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-
|
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-
|
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
|
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-
|
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-
|
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
|
-
|
477
|
-
Asciidoctor
|
478
|
-
You can activate
|
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
|
-
|
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
|
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-
|
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
|
-
|
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-
|
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-
|
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-
|
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://
|
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 `
|
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.
|
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}/
|
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-
|
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-
|
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.]
|