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.

    = AsciiDoc is Writing Zen
    Doc Writer <doc.writer@example.com>
    :icons: font
    _Zen_ in the *art* of writing `plain text` with
    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
    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.