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

data/examples/release-4.0.css

@@ -0,0 +1,23 @@
+@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');
+section.white.background {
+  background-color: white;
+}
+
+section.important h2 {
+    font-family: 'Permanent Marker', cursive;
+    text-transform: none;
+    font-size: 3em;
+}
+
+div.red > p > span.icon {
+  color: red;
+}
+
+/* theme overrides */
+.reveal pre code {
+  max-height: none;
+}
+.reveal section img {
+  background: none;
+  border: none;
+}

data/examples/release-4.1.adoc

@@ -0,0 +1,133 @@
+= Asciidoctor reveal.js 4.1
+:source-highlighter: highlight.js
+:highlightjs-theme: a11y-dark.css
+:highlightjs-languages: asciidoc
+:icons: font
+:imagesdir: images/
+// reveal.js config
+:customcss: release-4.1.css
+:revealjs_hash: true
+:revealjs_width: 1080
+
+== New Features icon:rocket[set=fas]
+
+== Steps
+
+You can use steps to [.highlight-strong.step]#highlight# or [.highlight-strong.step]#incrementally reveal individual elements# on a slide!
+
+[%notitle]
+=== Cats!
+
+[.grow,step=1]
+Here's some cute cats!
+
+image:cute-cat-1.jpg[cute-cat-laying,step=4]
+image:cute-cat-2.jpg[cute-cat-yawning,step=2]
+image:cute-cat-3.jpg[cute-cat-melting,step=3]
+
+[%notitle]
+=== List
+
+You can declare the `%step` option on lists...
+
+[%step]
+* α
+* β
+* γ
+
+[%notitle]
+=== Blocks
+
+...or on virtually any block like code blocks, tables, images or paragraphs
+
+[%step]
+--
+[.highlight-blue%step]
+blue
+
+white
+
+[.highlight-red%step]
+red
+--
+
+== Footnotesfootnote:[Just a title, nothing more.]
+
+[%notitle]
+=== Press Release
+
+The hail-and-rainbow protocol can be initiated at three levels:
+
+. doublefootnote:[The double hail-and-rainbow level makes my toes tingle.]
+. tertiary
+. supermassive
+
+A bold statement!footnote:disclaimer[Opinions are my own.]
+
+Another outrageous statement.footnote:disclaimer[]
+
+== Data attributes
+
+You can declare custom data attributes on _virtually any blocks_ using AsciiDoc attributes prefixed by `data-`. +
+Here's an example:
+
+[source, asciidoc]
+----
+== Atom podium
+
+[data-medal=gold]
+. Protons
+
+[data-medal=silver]
+. Electrons
+
+[data-medal=bronze]
+. Neutrons
+----
+
+== Font Awesome icon:font-awesome-flag[set=fab]
+
+* Version 5.13.0
+* Support icon sets (using `set` attribute)
+** *Brand:* icon:firefox[set=fab]
+** *Solid*: icon:address-book[set=fas]
+** *Regular*: icon:address-book[set=far]
+* `font-awesome-version` attribute
+
+== MathJax
+
+* Version 2.7.6
+* `mathjaxdir` attributefootnote:[Configure MathJax location.]
+
+[.text-left]
+== Built-in text alignments
+
+[%notitle]
+=== Text Alignments
+
+[.text-left]
+--
+[.text-align-attr]`[.text-left]` +
+Let's go to the left!
+--
+
+[.text-center]
+--
+[.text-align-attr]`[.text-center]` +
+Right in the middle
+--
+
+[.text-right]
+--
+[.text-align-attr]`[.text-right]` +
+Now to the right!
+--
+
+[transition=fade,transition-speed=slow]
+== Learn More!
+
+* https://github.com/asciidoctor/asciidoctor-reveal.js/[Asciidoctor reveal.js]
+* https://revealjs.com[reveal.js]
+* https://github.com/asciidoctor/asciidoctor/[Asciidoctor]
+* https://asciidoctor.org/docs/what-is-asciidoc/[What is AsciiDoc?]
+* https://github.com/asciidoctor/asciidoctor-reveal.js/raw/master/examples/release-4.1.adoc[This slide deck's AsciiDoc source]

data/examples/release-4.1.css

@@ -0,0 +1,50 @@
+.reveal .slides section .fragment.highlight-strong{
+  opacity: 1;
+  visibility: inherit;
+  background-image: linear-gradient(transparent 7px, #0352a7 0);
+  background-size: 0;
+  background-repeat: no-repeat;
+  display: inline;
+  -webkit-transition: 0.5s ease;
+  transition: 0.5s ease;
+}
+
+.reveal .slides section .fragment.highlight-strong.visible {
+  background-size: 100%;
+}
+
+.reveal .slides section :not(pre) > code {
+  padding: .2em .4em;
+  margin: 0;
+  font-size: 85%;
+  background-color: #8787877a;
+  border-radius: 6px;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+}
+
+.reveal .slides .paragraph + .ulist {
+  padding-top: 2rem;
+}
+
+.reveal .slides .paragraph + .openblock {
+  padding-top: 2rem;
+}
+
+.reveal .slides .paragraph + .listingblock {
+  padding-top: 2rem;
+}
+
+.footnotes {
+  border-top: 1px solid #fff3;
+  color: #c3c3c3;
+}
+
+.reveal .slides section :not(pre) > code.text-align-attr {
+  padding: 0;
+  margin: 0;
+  font-size: 1.5rem;
+  background-color: transparent;
+  border-radius: 6px;
+  color: #f5ab35;
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+}

data/examples/revealjs-custom-theme.adoc

@@ -0,0 +1,10 @@
+// .revealjs-custom-theme
+// :include: //head//link[@rel="stylesheet"]
+// :header_footer:
+= Use a Custom reveal.js Theme
+// please note that in this specific case it would be better to use :revealjs_theme: beige
+:revealjs_customtheme: reveal.js/css/theme/beige.css
+
+== Beige is the New Black
+
+Some text.

data/examples/source-coderay.adoc

@@ -31,3 +31,18 @@ to your `Gemfile` and re-run:
 
 puts 'Hello, world!'
 ----
+
+== Highlight Lines
+
+// TODO linenums CSS negatively affects the output
+// TODO highlighting is invisible
+
+[source,ruby,highlight=2..5]
+----
+ORDERED_LIST_KEYWORDS = {
+  'loweralpha' => 'a',
+  'lowerroman' => 'i',
+  'upperalpha' => 'A',
+  'upperroman' => 'I',
+}
+----

data/examples/source-emphasis.adoc

@@ -0,0 +1,128 @@
+// .source-emphasis
+// Demonstration of highlighting portions of source
+// :include: //div[@class="slides"]
+// :header_footer:
+= Source Code Emphasis
+:icons: font
+:source-highlighter: highlightjs
+:highlightjs-languages: x86asm
+:revealjs_hash: yes
+:revealjs_height: 1080
+:revealjs_width: 1920
+
+== Using Asciidoctor features
+
+=== Bold markers and `subs="+quotes,+macros"` attribute
+
+[source,java,subs="+quotes,+macros"]
+----
+protected void configure(HttpSecurity http) throws Exception {
+    http
+        .authorizeRequests()
+            **.antMatchers("/resources/$$**$$").permitAll()**
+            .anyRequest().authenticated()
+            .and()
+        .formLogin()
+            .loginPage("/login")
+            .permitAll();
+----
+
+=== Callouts
+
+[source, rust]
+----
+fn main() {
+    println!("Hello World!"); // <1>
+}
+----
+<1> `println!` is a macro.
+
+
+== Using reveal.js <mark> tags
+
+Needs `subs="none"` attribute
+
+[source, rust, subs="none"]
+----
+fn main() {
+    <mark>println!</mark>("Hello marked World!");
+}
+----
+
+== Using reveal.js data-line-numbers
+
+// This example was taken from Reveal.js README
+// https://github.com/hakimel/reveal.js/blob/master/README.md#line-numbers--highlights
+
+Highlights are using Asciidoctor syntax not reveal.js.
+Ex: `4..8,11` instead of `4-8,11`.
+
+[source, javascript, highlight="4..8,11"]
+----
+import React, { useState } from 'react';
+
+function Example() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}
+----
+
+== Step by Step with data-line-numbers
+
+// Requires reveal.js 3.9.0+
+Highlights are using Asciidoctor syntax not reveal.js.
+Ex: `1|2..3|4,6..10` instead of `1|2-3|4,6-10`.
+
+[source, javascript, highlight="1|2..3|4,6..10"]
+----
+import React, { useState } from 'react';
+
+function Example() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}
+----
+
+[.columns]
+== ASM from Compiler
+
+[source.column,x86asm,highlight="3..6|7..9|10|11,12"]
+----
+main        proc near
+var_10      = dword ptr -10h
+            push ebp                      <1>
+            mov ebp, esp
+            and esp, 0FFFFFFF0h
+            sub esp, 10h
+            mov eax, offset aHelloWorld   <2>
+            mov [esp+10h+var_10], eax
+            call _printf
+            mov eax, 0                    <3>
+            leave                         <4>
+            retn
+main        endp
+----
+
+[.column]
+--
+<1> Function prologue
+<2> Preparing arguments and calling `printf`
+<3> Clean-up registers
+<4> Function epilogue
+--

data/examples/source-highlightjs-html.adoc

@@ -2,7 +2,7 @@
 // Avoiding regressions with HTML source code inside source block
 // :include: //div[@class="slides"]
 // :header_footer:
-= HTML Source Code with Highlight.JS
+= HTML Source Code with Highlight.js
 :icons: font
 :source-highlighter: highlightjs
 

data/examples/source-highlightjs-languages.adoc

@@ -0,0 +1,27 @@
+// .source-highlightjs-languages
+// Demonstration of source highlighting with highlight.js using additional languages
+// :include: //div[@class="slides"] | //body/script
+// :header_footer:
+= Scilab Code with Highlight.js: using additional languages
+:source-highlighter: highlight.js
+:highlightjs-languages: yaml, scilab
+
+== Use the Source
+
+[source,scilab]
+----
+function B=gauss_filter_3_3(A)
+   x=size(A,2);
+   y=size(A,1);
+   B = zeros(y, x);
+   for j = 2:y-1
+       for i= 2:x-1
+           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);
+           B(j,i) = val/16;
+       end
+   end
+endfunction
+
+A = rand(10, 10) * 256;
+B = gauss_filter_3_3(A);
+----

data/examples/source-highlightjs.adoc

@@ -1,10 +1,11 @@
 // .source-highlightjs
-// Demonstration of source highlighting with highlightjs
+// Demonstration of source highlighting with highlight.js
 // :include: //div[@class="slides"]
 // :header_footer:
-= Source Code with Highlight.JS
+= Source Code with Highlight.js
 :icons: font
 :source-highlighter: highlightjs
+:highlightjs-languages: clojure
 
 == Use the Source
 
@@ -15,6 +16,17 @@ fn main() {
 }
 ----
 
+== Numbered lines
+
+With standard `linenums` attribute
+
+[source, rust, linenums]
+----
+fn main() {
+    println!("Hello World!");
+}
+----
+
 == Stretch the Source
 
 [source, rust, role="stretch"]
@@ -23,3 +35,74 @@ fn main() {
     println!("Hello stretched World!");
 }
 ----
+
+== Marked Source
+
+// This example was taken from Reveal.js README
+// https://github.com/hakimel/reveal.js/blob/master/README.md#code-syntax-highlighting
+Using `<mark>` in source requires a `subs="none"` attribute to the source block.
+
+[source, clojure, subs="none"]
+----
+(def lazy-fib
+  (concat
+   [0 1]
+   <mark>((fn rfib [a b]</mark>
+        (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
+----
+
+== Highlight Lines in Source
+
+// This example was taken from Reveal.js README
+// https://github.com/hakimel/reveal.js/blob/master/README.md#line-numbers--highlights
+
+Highlights are using Asciidoctor syntax not reveal.js.
+Ex: `4..8,11` instead of `4-8,11`.
+
+[source, javascript, highlight="4..8,11"]
+----
+import React, { useState } from 'react';
+
+function Example() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}
+----
+
+== Step by Step Highlights
+
+// Requires reveal.js 3.9.0+
+Highlights are using Asciidoctor syntax not reveal.js.
+Ex: `1|2..3|4,6..10` instead of `1|2-3|4,6-10`.
+
+[source, javascript, highlight="1|2..3|4,6..10"]
+----
+import React, { useState } from 'react';
+
+function Example() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  );
+}
+----
+
+== Regression test for issue 338
+
+[listing]
+This is an example of a paragraph styled with `listing`.
+Notice that the monospace markup is preserved in the output.