Skip to content

An end to end presentation to discover the great Asciidoctor processor

Notifications You must be signed in to change notification settings

MischaR/asciidoctor-presentation

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

43 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

AsciiDoctor presentation

Whatโ€™s AsciiDoctor?

Asciidoctor is a fast text processor and publishing toolchain for converting AsciiDoc content to HTML5, DocBook 5 (or 4.5) and other formats

โ€” asciidoctor.org

As suggested by this quote, it is important to distinguish AsciiDoc and AsciiDoctor:

  • [file text] AsciiDoc = lightweigh language, the "syntax" part

  • [wrench] AsciiDoctor = parser + tools

AsciiDoc was created in 2002 by Stuart Rackham, and is written in Python.
AsciiDoctor was initiated in 2012 by Ryan Waldron and Nick Hengeveld, is currently led by Dan Allen and Sarah White, and is written in Ruby.

Lightweigh languages

As said above, AsciiDoc belongs to the category of the lightweigh markup languages (LML).
As the name implies, those last are markup languages, but are intended to be far less complex and verbose than HTML and especially XML.
It is designed to be easy to create with any generic text editor, as well as easy to read in its raw form.

Generally used in wiki, we now also find them in common Web tools like GitHub, Jira, Redmine, etc.
Once the raw format saved, all those tools convert it into HTML for display in the browser.

To my mind, most popular LMLs currently are Markdown and AsciiDoc(tor).

AsciiDoc(tor) syntax

๐Ÿ“Ž
AsciiDoctor extends AsciiDoc syntax, adding some features not natively present.

You will find everything you want in the 2 following resources:

Those 2 resources are really awesomely well done, do not hesite to abuse it!

Here is just a small example of the syntax:

asciidoctor example
AsciiDoc syntax example
๐Ÿ’ก

Asciidoctor can โ€œdrawโ€ icons using Font Awesome and CSS, which is just a kick-ass feature!
Some examples: [tags] [car] [cloud upload] [heartbeat] [fire]

AsciiDoctor in GitHub

GitHub natively supports AsciiDoctor, meaning you have nothing to install on your local desktop ๐Ÿ˜‰

Just a have a look at some .adoc in repos to get some examples, like README.adoc or some GitHub wikis.
As an example, here are some of mines:

HubPress: AsciiDoc based blog using GitHub Pages

HubPress is a free, open source tool you can use to build a rich, AsciiDoc based blog using GitHub Pages.

Everything can be done through its web interface, meaning you donโ€™t have to install AsciiDoctor on your local desktop.
Instead of using the HubPress editor, you can also write the raw document on your desktop, and push it to the backing GitHub repo.

The installation instructions are rather simple and can be found, with the documentation, on the HubPress GitHub Repo.

Examples:

AsciiDoc highlighting for Sublime Text

To add syntax highlighting and snippets for AsciiDoc to Sublime Text, just follow the instructions at https://github.com/SublimeText/AsciiDoc.

Here is an example of rendering:

asciidoc support in sublime text
AsciiDoc highlighting in Sublime Text
๐Ÿ“Ž

From the original repo https://github.com/mrchief/AsciiDoc.SublimeText2, you learn that the AsciiDoctor syntax highlighting works best in Sublime Text with theme Sunburst or Twilight.

AsciiDoctor in Chrome

Using the extension Asciidoctor.js Live Preview, AsciiDoc documents can be rendered as HTML directly in Chrome, without a prior transformation on your desktop (meaning you donโ€™t even need to install AsciiDoctor on your Desktop).
For your information, this extension uses the asciidoctor.js script to perform its rendering.

โ—

Be sure to have a look to the extension GitHub repo, and its documentation.
It warns you about common troubleshooting as the Allow access to file URLs option, or the correct way to display a table of content.

Asciidoctor.js live preview configuration
Do NOT forget the "Allow access to file URLs option"

AsciiDoctor and its backends: ONE TOOL TO RENDER THEM ALL!!!!

Here comes the big part, the one where the magic happens ๐Ÿ˜ค

Installation instructions

From this point, you will have to install AsciiDoctor and its backends on your local desktop.
First, to install AsciiDoctor, just follow those instructions at this page: https://docs.asciidoctor.org/asciidoctor/latest/install/#installation-methods

๐Ÿ“Ž

EASIEST WAY : Just use the Docker image, as explained a bit below ๐Ÿ˜‰

OLD WAY :
I became a big fan of JRuby as the Ruby implementation to use with Asciidoctor.
Easy to install, and to switch from a version to another (just by updating environment variables).
Just do not forget to use a 1.7.x JRuby version (02/11/2016)

AsciiDoctor has 4 native backends: html5, xhtml5, docbook and docbook45.
Several others exist (deck.js, DZSlides), that require a complementary install, check https://github.com/asciidoctor/asciidoctor-backends for more details.

To know how to render a document, check this link http://asciidoctor.org/docs/render-documents/

HTML5 rendering

In the directory that contains your .adoc document, just run:

asciidoctor mysample.adoc

DocBook rendering

In the directory that contains your .adoc document, just run:

asciidoctor -b docbook mysample.adoc

Slides rendering with reveal.js โ†’ FAVORITE SLIDES SOLUTION ๐Ÿ‘

Again, as a not native backend, it requires a complementary install, which is described here:

Running a Asciidoctor Docker Container โ†’ EASIEST SOLUTION ๐Ÿ‘

Thanks to Docker, you now even donโ€™t need to install the Asciidoctor stack anymore, (nearly) everything is available in the Asciidoctor Docker image ๐Ÿ˜Ž

Its use is explained here : https://github.com/asciidoctor/docker-asciidoctor
And it is as simple as docker run -it -v <your directory>:/documents/ asciidoctor/docker-asciidoctor to create the Asciidoctor container and run it ๐Ÿ˜‰

As can be seen, the reveal.js backend is installed in the image, and so you can use it by simply running in the container the following command:

asciidoctor-revealjs </path/to/asciidoctor-document> -D </path/to/output-dir> -o <generated-filename>
โš ๏ธ
Beware of the compatibility !

Always beware of the compatibility between the Asciidoctor reveal.js converter version AND the reveal.js version !

Install with Bundler

๐Ÿ’ก
Use Docker Asciidoctor instead!
Since a Docker Asciidoctor is available, I find it the best way to run Asciidoctor

Using Bundler proved to be a very convenient and efficient way to install the Asciidoctor / reveal.js stack for a projet.

โš ๏ธ
  1. Step 4 of the install procedure, "Optional: Copy or clone reveal.js presentation frameworkโ€ฆโ€‹", is NOT optional.
    You have to retrieve the reveal.js presentation library to view your slides.

  2. To use a syntax highlighting, you have to use the document attribute :source-highlighter: highlightjs.
    See http://discuss.asciidoctor.org/Highlighting-source-code-for-reveal-js-backend-td2750.html

Once done, the render command is the following (using bundler):

bundle exec asciidoctor-revealjs </path/to/asciidoctor-document>

If you want to precise an output directory and a specific filename, you can use:

bundle exec asciidoctor-revealjs </path/to/asciidoctor-document> -D </path/to/output-dir> -o <generated-filename>

Keyboard shortcuts

Several keyboard shortcuts are available in the browser while viewing reveal.js slides:

Shortcut Purpose

Up, Down, Left, Right

Navigation

f

Full-screen

s

Show speaker notes interface (open a separate browser window)

o

Toggle overview

b, .

Turn screen black

Alt+click

Zoom in and out

Slides rendering with DZSlides

As DZSlides is not a native backend, it requires a complementary install, which is described here https://github.com/asciidoctor/asciidoctor-backends/tree/master/slim/dzslides#initial-setup

The 2 main parts of additional backends are:

  • the template directory: required for the transformation of the .adoc into an HTML document

  • the presentation library: required for the rendering of the final HTML document

Once done, the render command is the following:

asciidoctor -T </path/to/asciidoctor-backends> -E slim </path/to/asciidoctor-document>
๐Ÿ’ก

To know what role are available for DZSlides, have a look at: https://github.com/mojavelinux/dzslides/blob/master/themes/style/asciidoctor.css

Examples of rendering:

Slides rendering with Deck.js

Examples of rendering:

Slides printing

To print the slides, you first need to convert them in PDF.
To realize that easily, you can use the excellent deck2pdf from Cรฉdric CHAMPEAU.

Once done, the printing itself can be done using you favorite PDF viewer.

About

An end to end presentation to discover the great Asciidoctor processor

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 87.8%
  • CSS 10.9%
  • Ruby 1.3%