Quickstart

To reproduce the example shown in View AsciiDoc as HTML5 on the features page, do the following:

  1. Install the Asciidoctor Browser Extension using the Install page

  2. Create ex-writing-zen.adoc from the text below or download it.

    ex-writing-zen.adoc
    = AsciiDoc is Writing Zen
Doc Writer <doc.writer@example.com>
:icons: font

_Zen_ in the *art* of writing `plain text` with
https://asciidoc.org[AsciiDoc]

TIP: Use https://asciidoctor.org[Asciidoctor] for the best AsciiDoc experience.footnote:[Not to mention the best looking output!]
Then icon:comments[role=aqua] about it!

== Sample section

. item
** point
** point
+
NOTE: Auto numbered, auto indented
. item

[,ruby]
----
puts "Hello, World!"
----

  3. Open ex-writing-zen.adoc in your browser. You may either:

    • Open it by pressing Control+O

    • Drag and drop ex-writing-zen.adoc onto your browser

    • Double-click ex-writing-zen.adoc

      For double-click to work, you may need to change your computer settings to associate .adoc with your web browser.

  4. Try different features with the following:

    1. Toggle the Asciidoctor Browser Extension activation by clicking its extension icon in the browser bar.

      You’ll see the AsciiDoc behind the rendered HTML page.

    2. Change the Option: Theme/Stylesheet and reload.

    3. Change the Theme/Stylesheet using a query parameter. Add stylesheet=github to the end of the URL.

    4. Edit the AsciiDoc file and save. Observe it update.

    5. Add toc=left to Option: Custom Attributes String, and reload.

  5. Next steps

    After the above, you may like to try the exercise in the Option: Diagrams Extension.