getting_started.adoc

Asciidoc Slides: Getting started

Table of Contents

• Getting started
• Features
• A slide
• A slide with a background image
• Awesome bullet points
• Put all your knowledge on one slide
• Slides are HTML
• Themes
• Asciidoc
• Speaker notes
• Some images
• A quote
• Some code
• Tabular Tables
• Fantastic printing
• Take a Moment
• Fullscreen
• Help

Getting started

I was looking for an easy way to create HTML slides from Asciidoc. Since I was not happy with RevealJS, I came up with this simple framework.

Features

• Focus on the content using Asciidoc.

• Use web standard to create a simple and lightweight implementation.

• Give user full control over stylings.

A slide

A slide is simply a level 2 section in Asciidoc.

== Your slide title
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat, sed diam voluptua.

A slide is simply a level 2 section.

A slide with a background image

Photo by Lukasz Szmigiel on Unsplash

Awesome bullet points

• Milk

• Eggs

• Sugar

• Bread

• Cheese

Put all your knowledge on one slide

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.

Slides are HTML

So you can do whatever you want.

See the Pen <a href='https://codepen.io/ivorjetski/pen/ExaKmjw'>Pure CSS Playing Card No.1 - King of Hearts</a> by Ben Evans (<a href='https://codepen.io/ivorjetski'>@ivorjetski</a>) on <a href='https://codepen.io'>CodePen</a>.

Themes

Just link your css at the end and override or add styles. Modify the file dist/docinfo/docinfo-footer.html to add your custom css or just edit the dist/css/theme-simple.css

Asciidoc

The slides are generated from Asciidoc. Unfourtunalty, I had to modify the HTML output. For that you have to require a ruby class.

$ asciidoctor -r ./dist/lib/asciidoc_slides_converter.rb getting_started.adoc

Speaker notes

Use N to switch into presentation mode. You can add notes using the following code.

[.notes]
* Your help text.
* You can use all Asciidoc features for writing notes.

These are your notes. Never forget what you want to say.

[.notes]
* Your help text.
* You can use all Asciidoc features for writing notes.

Some images

You can also use inline images.

Photo by Sebastian Unrau on Unsplash

== Some images
You can also use inline images.

image:forest.jpg[height=400px]
image:forest.jpg[height=400px]

A quote

Either write something worth reading or do something worth writing.

— Benjamin Franklin

Some code

Foo foo = new Foo();
Bar bar = foo.bar();
System.out.println(bar);

Tabular Tables

Column A	Column B
Lorem	Ipsum
dolor	sit

Fantastic printing

Just print this page. The ''print.css'' should take care of everything.

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you’re on stage and want to take distracting slides off the screen.

Fullscreen

Press F to enter or leave fullscreen mode.

Help

Pressing H displays the help dialog with all shortcut options.