Skip to content

An end to end presentation to discover the great Asciidoctor processor

Notifications You must be signed in to change notification settings

Ardemius/asciidoctor-presentation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

44 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 πŸ˜‰

πŸ“Ž

In the previous command, the path to <your directory> must be formatted depending on your OS.
Here is an example for Windows : docker run -it -v D:\work\my-folder-with-the-adoc-file:/documents/ asciidoctor/docker-asciidoctor

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published