Presentation

Complex example

author name

Hotkeys

  • use the arrows keys to navigate between the slides

  • press the S key to open the speaker view

  • press the O key to overview the presentation’s slides

  • press the F key for full screen

  • press the Shift + ? to show the keyboard shortcuts

Basic presentation with speaker notes

= Title Slide

== Slide One

* Foo
* Bar
* World

== Slide Two

A Great Story

[.notes]
--
* tell anecdote
--

Vertical slides

Use === Header for vertical slides.

== Vertical slides
    Content

=== Vertical sub slide 1
    Content

=== Vertical sub slide 2
    Content

Vertical sub slide 1

Vertical sub slide 1 will be rendered vertically below Vertical slides

Vertical sub slide 2

Vertical sub slide 2 will be rendered vertically below Vertical sub slide 1

No title slide

== !

This

[%notitle]
== Presentation

presentation's titles

[%conceal]
== Concealed

should be concealed

Typography

Paragraphs

Paragraphs don’t require any special markup in AsciiDoc. A paragraph is just one or more lines of consecutive text.

To begin a new paragraph, separate it by at least one empty line from the previous paragraph or block.

Text format

Text Formatting bold text and italic.

Underline text and text

Some text or code highlight

Some link example or auto convert http://link.to.site.com

**bold**

_italic_

[.underline]#text#

[.line-through]#text#

`highlight code`

https://google.com[link]

Text format

Use tilde ~ for subscript

Use caret ^ for superscript

Use [.small] for smaller text size.
~subscript~

^superscript^

[.small]
Small text will be here

Text alignment

Text alignment of columns and blocks is also supported.

You can use .has-text-left

.has-text-right classes for align content

Or .has-text-justified lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lists

List example:

  • Few

  • Bullets

  • Here

* Unordered list item
* Unordered list item
* Unordered list item

Number the items:

  1. One

  2. Two

  3. Three

. Number list item
. Number list item
. Number list item

Complex list

  • grandparent list item

    • parent list item

      • child list item

    paragraph attached to grandparent list item

* grandparent list item
+
--
** parent list item
*** child list item
--
+
paragraph attached to grandparent list item

Checkbox

  • Clone the repo

  • Install dependencies

  • Build it and check it locally

- [ ] Checkbox
- [x] Checkbox checked

Code

Code highlight

Use [source] block for highlight a code.

.The title (optional)
[source,javascript]
----
const ingredients = [ "lemon", "tomato", "salt", "potato"];

for (const key in ingredients) {
  console.log( ingredients[key] );
}
----

By default, [source] blocks and blocks delimited by ---- will be highlighted.

Code highlight and marks

Also, you can use marks inside a code: <1>, <2>, etc.

for (let i = 0; i < 9; i++) { (1)
  console.log(i);             (2)
}
1The for loop
2Just a console call
[source,javascript]
--
for (let i = 0; i < 9; i++) { <1>
  console.log(i); <2>
}
--
<1> The `for` loop
<2> Just a `console` call

Line numbers

Line Numbers & Highlights for source code blocks

<table>
  <tr>
    <td>Apples</td>
    <td>$1</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Oranges</td>
    <td>$2</td>
    <td>18</td>
  </tr>
</table>
[source,html,linenums,highlight="3,8-10"]
----
<table>
...
</table>
----

Math

Math

This is the build-in plugin, just enable it and use.

:stem:

Math

\$sqrt(4) = 2\$

Water (\$H_2O\$) is a critical component.

A matrix can be written as \$[[a,b],[c,d]]((n),(k))\$.

:stem:

[stem]
++++
sqrt(4) = 2
++++

Water (stem:[H_2O]) is a critical component.

A matrix can be written as stem:[[[a,b\],[c,d\]\]((n),(k))].

Content

Sidebar

Main text is here.

Sidebars are used to visually separate auxiliary bits of content that supplement the main text.

And here…​

[sidebar]
Sidebars are used to visually separate auxiliary bits of content that supplement the main text.

Labels

The AsciiDoc language provides five admonition types represented by the following labels:

  • NOTE

  • TIP

  • IMPORTANT

  • CAUTION

  • WARNING

Note to yourself.
You can warm up food with fire.
Fire can be dangerous.
Be careful with it!
Run, if you want to live!
NOTE: Note to yourself

Icon’s macro

You can use

icon:<target>[<attrlist>]

ruby, asciidoctor

icon:heart[2x,role=red]

icon:tags[] ruby, asciidoctor

Labels + Icons

php

ruby

Quoted block

Dennis: Come and see the violence inherent in the system. Help! Help! I’m being repressed!

King Arthur: Bloody peasant!

Dennis: Oh, what a giveaway! Did you hear that? Did you hear that, eh? That’s what I’m on about! Did you see him repressing me? You saw him, Didn’t you?

— Monty Python and the Holy Grail

Markdown-style blockquotes

What’s new?

I’ve got Markdown in my AsciiDoc!

> > What's new?
>
> I've got Markdown in my AsciiDoc!

Q&A

  1. What is the answer?

    This is the answer.

  2. Are cameras allowed?

    Are backpacks allowed?

    No.

[qanda]
What is the answer?::
This is the answer.

Are cameras allowed?::
Are backpacks allowed?::
No.

Table

Table 1. Table header
Header 1Header 2

Row 1, Col1

Row 1, Col2

Row 2, Col1

Row 2, Col2

[cols=2,frame=none,options=header]
.Table header
|===
| Header 1
| Header 2

| Row 1, Col1
| Row 1, Col2

| Row 2, Col1
| Row 2, Col2
|===

Cross-References

Open typography section

Or back to the previous slide

[#typography]
== Typography

Open xref:#typography[typography section]

Or back to the <<Table,previous>> slide

Footnotes

The hail-and-rainbow protocol can be initiated at three levels:

  1. double[1]

  2. tertiary

  3. apocalyptic

A bold statement![2]

Another outrageous statement.[2]

1. The double hail-and-rainbow level makes my toes tingle.
2. Opinions are my own.

Images

Image

image::your_link_to_image[]
600x400

Image Border

Round image

200x200
image::....jpg[role="round"]

Thumbnail

200x200
image::....jpg[role="thumb"]

Background image

image::cover.jpg[background, size=cover]

This will put cover.jpg as the slide’s background image.

Background color

Yellow background

[background-color="yellow"]
== Background color

Yellow background

Video

Video player

# video file
video::https://my.video/file.mp4[]
# youtube
video::9CSp9ZQEtBQ[youtube, start=34, options=autoplay]
# vimeo
video::357862493[vimeo, options=autoplay]

Background video

A background video for a slide can be specified using the background-video element attribute.
[background-video="https://my.video/file.mp4",options="loop,muted"]
== Nice background!

Layout

Columns

Use [.columns] and [.column] for flex layout

[.columns]
== Slide title

[.column]
Column one content

[.column]
Column two content

Columns vcenter

Add .is-vcentered class to [.columns] for vertical align

600x400

Columns size

If you want to change the size of a single column, you can use one of the following classes:

  • is-three-quarters

  • is-two-thirds

  • is-half

  • is-one-third

  • is-one-quarter

  • is-full-column

The other columns will fill up the remaining space automatically.

ok
ok
ok
ok

Columns size

.is-one-quarter
.is-three-quarters
.is-one-third
.is-two-thirds
.is-half
.is-half
.is-full-column

Animation

Step by step

  • this

  • is

  • revealed

  • gradually

Style

The style can be changed by using a different role

ONE
TWO
THREE

Order

The order can be changed using the step attribute

Finally, a pro tip…​
First, watch out for…​
Second, don’t forget…​

Zoom zoom

This slide will override the presentation transition and zoom!

[transition=zoom]
=== Zoom zoom
...

You can choose from none, fade, slide, convex, concave and zoom.

Speed

Choose from three transition speeds: default, fast or slow!

Finish Him!

🇺🇦