asciidoctor-revealjs 3.1.0 → 4.1.0.rc4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.adoc +328 -55
- data/Rakefile +30 -7
- data/asciidoctor-revealjs.gemspec +5 -3
- data/examples/a11y-dark.css +99 -0
- data/examples/autoslide.adoc +22 -0
- data/examples/custom-layout.adoc +10 -0
- 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 +18 -3
- 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 -770
- 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 -60
- 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 -456
- data/HACKING.adoc +0 -404
- data/examples/revealjs-features.adoc +0 -23
- data/templates/asciidoctor_revealjs.css.slim +0 -59
@@ -0,0 +1,23 @@
|
|
1
|
+
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');
|
2
|
+
section.white.background {
|
3
|
+
background-color: white;
|
4
|
+
}
|
5
|
+
|
6
|
+
section.important h2 {
|
7
|
+
font-family: 'Permanent Marker', cursive;
|
8
|
+
text-transform: none;
|
9
|
+
font-size: 3em;
|
10
|
+
}
|
11
|
+
|
12
|
+
div.red > p > span.icon {
|
13
|
+
color: red;
|
14
|
+
}
|
15
|
+
|
16
|
+
/* theme overrides */
|
17
|
+
.reveal pre code {
|
18
|
+
max-height: none;
|
19
|
+
}
|
20
|
+
.reveal section img {
|
21
|
+
background: none;
|
22
|
+
border: none;
|
23
|
+
}
|
@@ -0,0 +1,133 @@
|
|
1
|
+
= Asciidoctor reveal.js 4.1
|
2
|
+
:source-highlighter: highlight.js
|
3
|
+
:highlightjs-theme: a11y-dark.css
|
4
|
+
:highlightjs-languages: asciidoc
|
5
|
+
:icons: font
|
6
|
+
:imagesdir: images/
|
7
|
+
// reveal.js config
|
8
|
+
:customcss: release-4.1.css
|
9
|
+
:revealjs_hash: true
|
10
|
+
:revealjs_width: 1080
|
11
|
+
|
12
|
+
== New Features icon:rocket[set=fas]
|
13
|
+
|
14
|
+
== Steps
|
15
|
+
|
16
|
+
You can use steps to [.highlight-strong.step]#highlight# or [.highlight-strong.step]#incrementally reveal individual elements# on a slide!
|
17
|
+
|
18
|
+
[%notitle]
|
19
|
+
=== Cats!
|
20
|
+
|
21
|
+
[.grow,step=1]
|
22
|
+
Here's some cute cats!
|
23
|
+
|
24
|
+
image:cute-cat-1.jpg[cute-cat-laying,step=4]
|
25
|
+
image:cute-cat-2.jpg[cute-cat-yawning,step=2]
|
26
|
+
image:cute-cat-3.jpg[cute-cat-melting,step=3]
|
27
|
+
|
28
|
+
[%notitle]
|
29
|
+
=== List
|
30
|
+
|
31
|
+
You can declare the `%step` option on lists...
|
32
|
+
|
33
|
+
[%step]
|
34
|
+
* α
|
35
|
+
* β
|
36
|
+
* γ
|
37
|
+
|
38
|
+
[%notitle]
|
39
|
+
=== Blocks
|
40
|
+
|
41
|
+
...or on virtually any block like code blocks, tables, images or paragraphs
|
42
|
+
|
43
|
+
[%step]
|
44
|
+
--
|
45
|
+
[.highlight-blue%step]
|
46
|
+
blue
|
47
|
+
|
48
|
+
white
|
49
|
+
|
50
|
+
[.highlight-red%step]
|
51
|
+
red
|
52
|
+
--
|
53
|
+
|
54
|
+
== Footnotesfootnote:[Just a title, nothing more.]
|
55
|
+
|
56
|
+
[%notitle]
|
57
|
+
=== Press Release
|
58
|
+
|
59
|
+
The hail-and-rainbow protocol can be initiated at three levels:
|
60
|
+
|
61
|
+
. doublefootnote:[The double hail-and-rainbow level makes my toes tingle.]
|
62
|
+
. tertiary
|
63
|
+
. supermassive
|
64
|
+
|
65
|
+
A bold statement!footnote:disclaimer[Opinions are my own.]
|
66
|
+
|
67
|
+
Another outrageous statement.footnote:disclaimer[]
|
68
|
+
|
69
|
+
== Data attributes
|
70
|
+
|
71
|
+
You can declare custom data attributes on _virtually any blocks_ using AsciiDoc attributes prefixed by `data-`. +
|
72
|
+
Here's an example:
|
73
|
+
|
74
|
+
[source, asciidoc]
|
75
|
+
----
|
76
|
+
== Atom podium
|
77
|
+
|
78
|
+
[data-medal=gold]
|
79
|
+
. Protons
|
80
|
+
|
81
|
+
[data-medal=silver]
|
82
|
+
. Electrons
|
83
|
+
|
84
|
+
[data-medal=bronze]
|
85
|
+
. Neutrons
|
86
|
+
----
|
87
|
+
|
88
|
+
== Font Awesome icon:font-awesome-flag[set=fab]
|
89
|
+
|
90
|
+
* Version 5.13.0
|
91
|
+
* Support icon sets (using `set` attribute)
|
92
|
+
** *Brand:* icon:firefox[set=fab]
|
93
|
+
** *Solid*: icon:address-book[set=fas]
|
94
|
+
** *Regular*: icon:address-book[set=far]
|
95
|
+
* `font-awesome-version` attribute
|
96
|
+
|
97
|
+
== MathJax
|
98
|
+
|
99
|
+
* Version 2.7.6
|
100
|
+
* `mathjaxdir` attributefootnote:[Configure MathJax location.]
|
101
|
+
|
102
|
+
[.text-left]
|
103
|
+
== Built-in text alignments
|
104
|
+
|
105
|
+
[%notitle]
|
106
|
+
=== Text Alignments
|
107
|
+
|
108
|
+
[.text-left]
|
109
|
+
--
|
110
|
+
[.text-align-attr]`[.text-left]` +
|
111
|
+
Let's go to the left!
|
112
|
+
--
|
113
|
+
|
114
|
+
[.text-center]
|
115
|
+
--
|
116
|
+
[.text-align-attr]`[.text-center]` +
|
117
|
+
Right in the middle
|
118
|
+
--
|
119
|
+
|
120
|
+
[.text-right]
|
121
|
+
--
|
122
|
+
[.text-align-attr]`[.text-right]` +
|
123
|
+
Now to the right!
|
124
|
+
--
|
125
|
+
|
126
|
+
[transition=fade,transition-speed=slow]
|
127
|
+
== Learn More!
|
128
|
+
|
129
|
+
* https://github.com/asciidoctor/asciidoctor-reveal.js/[Asciidoctor reveal.js]
|
130
|
+
* https://revealjs.com[reveal.js]
|
131
|
+
* https://github.com/asciidoctor/asciidoctor/[Asciidoctor]
|
132
|
+
* https://asciidoctor.org/docs/what-is-asciidoc/[What is AsciiDoc?]
|
133
|
+
* https://github.com/asciidoctor/asciidoctor-reveal.js/raw/master/examples/release-4.1.adoc[This slide deck's AsciiDoc source]
|
@@ -0,0 +1,50 @@
|
|
1
|
+
.reveal .slides section .fragment.highlight-strong{
|
2
|
+
opacity: 1;
|
3
|
+
visibility: inherit;
|
4
|
+
background-image: linear-gradient(transparent 7px, #0352a7 0);
|
5
|
+
background-size: 0;
|
6
|
+
background-repeat: no-repeat;
|
7
|
+
display: inline;
|
8
|
+
-webkit-transition: 0.5s ease;
|
9
|
+
transition: 0.5s ease;
|
10
|
+
}
|
11
|
+
|
12
|
+
.reveal .slides section .fragment.highlight-strong.visible {
|
13
|
+
background-size: 100%;
|
14
|
+
}
|
15
|
+
|
16
|
+
.reveal .slides section :not(pre) > code {
|
17
|
+
padding: .2em .4em;
|
18
|
+
margin: 0;
|
19
|
+
font-size: 85%;
|
20
|
+
background-color: #8787877a;
|
21
|
+
border-radius: 6px;
|
22
|
+
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
|
23
|
+
}
|
24
|
+
|
25
|
+
.reveal .slides .paragraph + .ulist {
|
26
|
+
padding-top: 2rem;
|
27
|
+
}
|
28
|
+
|
29
|
+
.reveal .slides .paragraph + .openblock {
|
30
|
+
padding-top: 2rem;
|
31
|
+
}
|
32
|
+
|
33
|
+
.reveal .slides .paragraph + .listingblock {
|
34
|
+
padding-top: 2rem;
|
35
|
+
}
|
36
|
+
|
37
|
+
.footnotes {
|
38
|
+
border-top: 1px solid #fff3;
|
39
|
+
color: #c3c3c3;
|
40
|
+
}
|
41
|
+
|
42
|
+
.reveal .slides section :not(pre) > code.text-align-attr {
|
43
|
+
padding: 0;
|
44
|
+
margin: 0;
|
45
|
+
font-size: 1.5rem;
|
46
|
+
background-color: transparent;
|
47
|
+
border-radius: 6px;
|
48
|
+
color: #f5ab35;
|
49
|
+
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
|
50
|
+
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
// .revealjs-custom-theme
|
2
|
+
// :include: //head//link[@rel="stylesheet"]
|
3
|
+
// :header_footer:
|
4
|
+
= Use a Custom reveal.js Theme
|
5
|
+
// please note that in this specific case it would be better to use :revealjs_theme: beige
|
6
|
+
:revealjs_customtheme: reveal.js/css/theme/beige.css
|
7
|
+
|
8
|
+
== Beige is the New Black
|
9
|
+
|
10
|
+
Some text.
|
@@ -31,3 +31,18 @@ to your `Gemfile` and re-run:
|
|
31
31
|
|
32
32
|
puts 'Hello, world!'
|
33
33
|
----
|
34
|
+
|
35
|
+
== Highlight Lines
|
36
|
+
|
37
|
+
// TODO linenums CSS negatively affects the output
|
38
|
+
// TODO highlighting is invisible
|
39
|
+
|
40
|
+
[source,ruby,highlight=2..5]
|
41
|
+
----
|
42
|
+
ORDERED_LIST_KEYWORDS = {
|
43
|
+
'loweralpha' => 'a',
|
44
|
+
'lowerroman' => 'i',
|
45
|
+
'upperalpha' => 'A',
|
46
|
+
'upperroman' => 'I',
|
47
|
+
}
|
48
|
+
----
|
@@ -0,0 +1,128 @@
|
|
1
|
+
// .source-emphasis
|
2
|
+
// Demonstration of highlighting portions of source
|
3
|
+
// :include: //div[@class="slides"]
|
4
|
+
// :header_footer:
|
5
|
+
= Source Code Emphasis
|
6
|
+
:icons: font
|
7
|
+
:source-highlighter: highlightjs
|
8
|
+
:highlightjs-languages: x86asm
|
9
|
+
:revealjs_hash: yes
|
10
|
+
:revealjs_height: 1080
|
11
|
+
:revealjs_width: 1920
|
12
|
+
|
13
|
+
== Using Asciidoctor features
|
14
|
+
|
15
|
+
=== Bold markers and `subs="+quotes,+macros"` attribute
|
16
|
+
|
17
|
+
[source,java,subs="+quotes,+macros"]
|
18
|
+
----
|
19
|
+
protected void configure(HttpSecurity http) throws Exception {
|
20
|
+
http
|
21
|
+
.authorizeRequests()
|
22
|
+
**.antMatchers("/resources/$$**$$").permitAll()**
|
23
|
+
.anyRequest().authenticated()
|
24
|
+
.and()
|
25
|
+
.formLogin()
|
26
|
+
.loginPage("/login")
|
27
|
+
.permitAll();
|
28
|
+
----
|
29
|
+
|
30
|
+
=== Callouts
|
31
|
+
|
32
|
+
[source, rust]
|
33
|
+
----
|
34
|
+
fn main() {
|
35
|
+
println!("Hello World!"); // <1>
|
36
|
+
}
|
37
|
+
----
|
38
|
+
<1> `println!` is a macro.
|
39
|
+
|
40
|
+
|
41
|
+
== Using reveal.js <mark> tags
|
42
|
+
|
43
|
+
Needs `subs="none"` attribute
|
44
|
+
|
45
|
+
[source, rust, subs="none"]
|
46
|
+
----
|
47
|
+
fn main() {
|
48
|
+
<mark>println!</mark>("Hello marked World!");
|
49
|
+
}
|
50
|
+
----
|
51
|
+
|
52
|
+
== Using reveal.js data-line-numbers
|
53
|
+
|
54
|
+
// This example was taken from Reveal.js README
|
55
|
+
// https://github.com/hakimel/reveal.js/blob/master/README.md#line-numbers--highlights
|
56
|
+
|
57
|
+
Highlights are using Asciidoctor syntax not reveal.js.
|
58
|
+
Ex: `4..8,11` instead of `4-8,11`.
|
59
|
+
|
60
|
+
[source, javascript, highlight="4..8,11"]
|
61
|
+
----
|
62
|
+
import React, { useState } from 'react';
|
63
|
+
|
64
|
+
function Example() {
|
65
|
+
const [count, setCount] = useState(0);
|
66
|
+
|
67
|
+
return (
|
68
|
+
<div>
|
69
|
+
<p>You clicked {count} times</p>
|
70
|
+
<button onClick={() => setCount(count + 1)}>
|
71
|
+
Click me
|
72
|
+
</button>
|
73
|
+
</div>
|
74
|
+
);
|
75
|
+
}
|
76
|
+
----
|
77
|
+
|
78
|
+
== Step by Step with data-line-numbers
|
79
|
+
|
80
|
+
// Requires reveal.js 3.9.0+
|
81
|
+
Highlights are using Asciidoctor syntax not reveal.js.
|
82
|
+
Ex: `1|2..3|4,6..10` instead of `1|2-3|4,6-10`.
|
83
|
+
|
84
|
+
[source, javascript, highlight="1|2..3|4,6..10"]
|
85
|
+
----
|
86
|
+
import React, { useState } from 'react';
|
87
|
+
|
88
|
+
function Example() {
|
89
|
+
const [count, setCount] = useState(0);
|
90
|
+
|
91
|
+
return (
|
92
|
+
<div>
|
93
|
+
<p>You clicked {count} times</p>
|
94
|
+
<button onClick={() => setCount(count + 1)}>
|
95
|
+
Click me
|
96
|
+
</button>
|
97
|
+
</div>
|
98
|
+
);
|
99
|
+
}
|
100
|
+
----
|
101
|
+
|
102
|
+
[.columns]
|
103
|
+
== ASM from Compiler
|
104
|
+
|
105
|
+
[source.column,x86asm,highlight="3..6|7..9|10|11,12"]
|
106
|
+
----
|
107
|
+
main proc near
|
108
|
+
var_10 = dword ptr -10h
|
109
|
+
push ebp <1>
|
110
|
+
mov ebp, esp
|
111
|
+
and esp, 0FFFFFFF0h
|
112
|
+
sub esp, 10h
|
113
|
+
mov eax, offset aHelloWorld <2>
|
114
|
+
mov [esp+10h+var_10], eax
|
115
|
+
call _printf
|
116
|
+
mov eax, 0 <3>
|
117
|
+
leave <4>
|
118
|
+
retn
|
119
|
+
main endp
|
120
|
+
----
|
121
|
+
|
122
|
+
[.column]
|
123
|
+
--
|
124
|
+
<1> Function prologue
|
125
|
+
<2> Preparing arguments and calling `printf`
|
126
|
+
<3> Clean-up registers
|
127
|
+
<4> Function epilogue
|
128
|
+
--
|
@@ -0,0 +1,27 @@
|
|
1
|
+
// .source-highlightjs-languages
|
2
|
+
// Demonstration of source highlighting with highlight.js using additional languages
|
3
|
+
// :include: //div[@class="slides"] | //body/script
|
4
|
+
// :header_footer:
|
5
|
+
= Scilab Code with Highlight.js: using additional languages
|
6
|
+
:source-highlighter: highlight.js
|
7
|
+
:highlightjs-languages: yaml, scilab
|
8
|
+
|
9
|
+
== Use the Source
|
10
|
+
|
11
|
+
[source,scilab]
|
12
|
+
----
|
13
|
+
function B=gauss_filter_3_3(A)
|
14
|
+
x=size(A,2);
|
15
|
+
y=size(A,1);
|
16
|
+
B = zeros(y, x);
|
17
|
+
for j = 2:y-1
|
18
|
+
for i= 2:x-1
|
19
|
+
val= 4*A(j,i)+2*(A(j,i-1)+A(j,i+1)+A(j+1,i)+A(j-1,i))+A(j+1,i+1)+A(j-1,i+1)+A(j+1,i-1)+A(j-1,i-1);
|
20
|
+
B(j,i) = val/16;
|
21
|
+
end
|
22
|
+
end
|
23
|
+
endfunction
|
24
|
+
|
25
|
+
A = rand(10, 10) * 256;
|
26
|
+
B = gauss_filter_3_3(A);
|
27
|
+
----
|
@@ -1,10 +1,11 @@
|
|
1
1
|
// .source-highlightjs
|
2
|
-
// Demonstration of source highlighting with
|
2
|
+
// Demonstration of source highlighting with highlight.js
|
3
3
|
// :include: //div[@class="slides"]
|
4
4
|
// :header_footer:
|
5
|
-
= Source Code with Highlight.
|
5
|
+
= Source Code with Highlight.js
|
6
6
|
:icons: font
|
7
7
|
:source-highlighter: highlightjs
|
8
|
+
:highlightjs-languages: clojure
|
8
9
|
|
9
10
|
== Use the Source
|
10
11
|
|
@@ -15,6 +16,17 @@ fn main() {
|
|
15
16
|
}
|
16
17
|
----
|
17
18
|
|
19
|
+
== Numbered lines
|
20
|
+
|
21
|
+
With standard `linenums` attribute
|
22
|
+
|
23
|
+
[source, rust, linenums]
|
24
|
+
----
|
25
|
+
fn main() {
|
26
|
+
println!("Hello World!");
|
27
|
+
}
|
28
|
+
----
|
29
|
+
|
18
30
|
== Stretch the Source
|
19
31
|
|
20
32
|
[source, rust, role="stretch"]
|
@@ -23,3 +35,74 @@ fn main() {
|
|
23
35
|
println!("Hello stretched World!");
|
24
36
|
}
|
25
37
|
----
|
38
|
+
|
39
|
+
== Marked Source
|
40
|
+
|
41
|
+
// This example was taken from Reveal.js README
|
42
|
+
// https://github.com/hakimel/reveal.js/blob/master/README.md#code-syntax-highlighting
|
43
|
+
Using `<mark>` in source requires a `subs="none"` attribute to the source block.
|
44
|
+
|
45
|
+
[source, clojure, subs="none"]
|
46
|
+
----
|
47
|
+
(def lazy-fib
|
48
|
+
(concat
|
49
|
+
[0 1]
|
50
|
+
<mark>((fn rfib [a b]</mark>
|
51
|
+
(lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
|
52
|
+
----
|
53
|
+
|
54
|
+
== Highlight Lines in Source
|
55
|
+
|
56
|
+
// This example was taken from Reveal.js README
|
57
|
+
// https://github.com/hakimel/reveal.js/blob/master/README.md#line-numbers--highlights
|
58
|
+
|
59
|
+
Highlights are using Asciidoctor syntax not reveal.js.
|
60
|
+
Ex: `4..8,11` instead of `4-8,11`.
|
61
|
+
|
62
|
+
[source, javascript, highlight="4..8,11"]
|
63
|
+
----
|
64
|
+
import React, { useState } from 'react';
|
65
|
+
|
66
|
+
function Example() {
|
67
|
+
const [count, setCount] = useState(0);
|
68
|
+
|
69
|
+
return (
|
70
|
+
<div>
|
71
|
+
<p>You clicked {count} times</p>
|
72
|
+
<button onClick={() => setCount(count + 1)}>
|
73
|
+
Click me
|
74
|
+
</button>
|
75
|
+
</div>
|
76
|
+
);
|
77
|
+
}
|
78
|
+
----
|
79
|
+
|
80
|
+
== Step by Step Highlights
|
81
|
+
|
82
|
+
// Requires reveal.js 3.9.0+
|
83
|
+
Highlights are using Asciidoctor syntax not reveal.js.
|
84
|
+
Ex: `1|2..3|4,6..10` instead of `1|2-3|4,6-10`.
|
85
|
+
|
86
|
+
[source, javascript, highlight="1|2..3|4,6..10"]
|
87
|
+
----
|
88
|
+
import React, { useState } from 'react';
|
89
|
+
|
90
|
+
function Example() {
|
91
|
+
const [count, setCount] = useState(0);
|
92
|
+
|
93
|
+
return (
|
94
|
+
<div>
|
95
|
+
<p>You clicked {count} times</p>
|
96
|
+
<button onClick={() => setCount(count + 1)}>
|
97
|
+
Click me
|
98
|
+
</button>
|
99
|
+
</div>
|
100
|
+
);
|
101
|
+
}
|
102
|
+
----
|
103
|
+
|
104
|
+
== Regression test for issue 338
|
105
|
+
|
106
|
+
[listing]
|
107
|
+
This is an example of a paragraph styled with `listing`.
|
108
|
+
Notice that the monospace markup is preserved in the output.
|