Samples of AsciiDoc Coding and Output

Contributors kevin-hoke

Included in this document are some examples of asciidoc source and the resulting output.

Heading Levels

Source AsciiDoc:

= Heading level 0 (Document Title)
== Heading level 1 (Section Title)
=== Heading level 2 (Section Title)
==== Heading level 3 (Section Title)
===== Heading level 4 (Section Title)
====== Heading level 5 (Section Title)

Generated HTML:

Heading level 1 (Section Title)

Heading level 2 (Section Title)

Heading level 3 (Section Title)

Heading level 4 (Section Title)
Heading level 5 (Section Title)
Note There should only be one Document Title (Level 0) per document and section titles can not be skipped (section sub-titles must be the next heading level under the section). For that reason, the sample is not displayed in the output to eliminate build errors during processing.

Lists

Source AsciiDoc:

Unordered list:

* this is an unordered list
* this is still an unordered list
** this is a sub-element in an unordered list

Ordered list:

. this is an ordered list
. this is still an ordered list
.. this is a sub-element in an ordered list

Generated HTML:

Unordered list:

  • this is an unordered list

  • this is still an unordered list

    • this is a sub-element in an unordered list

Ordered list:

  1. this is an ordered list

  2. this is still an ordered list

    1. this is a sub-element in an ordered list

Images

You can link to images within the repository or anywhere on the web. For images within the repository, they are placed in the media folder, so you need to ensure that the ":imagesdir: ./media/" is set appropriately.

Source AsciiDoc:

image::sample.png[Image within the repository]

Generated HTML:

Image within the repository

Source AsciiDoc:

image::https://www.pngall.com/wp-content/uploads/8/Sample-PNG-Image.png[Image outside the repository]

Generated HTML:

Image outside the repository

Much like images, links can reference documents inside the repository or anywhere on the web. For internal references, it is important to ensure the path to the link source is specified in the "link::" statement.

Source AsciiDoc:

link:change-log-display.html[NetApp Solutions change log (internal)]

Generated HTML:

Source AsciiDoc:

link:https://docs.netapp.com/us-en/netapp-solutions/change-log-display.html[NetApp Solutions change log (external)]

Generated HTML:

Collapsible Content (a.k.a. Twisties)

Source AsciiDoc:

.Title
[%collapsible]
=====
Text to be collapsed goes here.
=====

Generated HTML:

Title

Text to be collapsed goes here.

Note Click on "Title" to see the expanded content

Creating a Table

Source AsciiDoc:

[%autowidth.stretch]
|===
| Column A | Column B | Column C
| Text in column A
| Text in column B
| Text in column C
|===

Generated HTML:

Column A

Column B

Column C

Text in column A

Text in column B

Text in column C

Here’s another example where one row spans the entire table and other rows have data spanning across multiple columns:

Source AsciiDoc:

[%autowidth.stretch,cols="*,*,*,*"]
|===
| Header Column 1 | Header Column 2 | Header Column 3 | Header Column 4

4+| This is a really long row that spreads across all 4 columns of the table.  It is the only cell in this row and leaves no empty cells.
3+| This is a long row that spreads across 3 of the columns in the table leaving one empty cell |
2+| This row spans 2 of the columns and leaves 2 cells empty | |
| This | row | is | normal
|===

Generated HTML:

Header Column 1 Header Column 2 Header Column 3 Header Column 4

This is a really long row that spreads across all 4 columns of the table. It is the only cell in this row and leaves no empty cells.

This is a long row that spreads across 3 of the columns in the table leaving one empty cell.

This row spans 2 of the columns and leaves 2 cells empty.

This

row

is

normal

Note There are many options you can specify to change the layout of a table. For more information, either find an example in the repository (HTML version) that you want to achieve and go to VScode to view the source or visit the AsciiDoc documentation for more information.

Tabbed Blocks

Source AsciiDoc:

[role="tabbed-block"]
====
.First Tab
--
Content for first tab goes here
--
.Second Tab
--
Content for second tab goes here
--
====

Generated HTML:

First Tab

Content for first tab goes here

Second Tab

Content for second tab goes here

Note Click on "Second Tab" to see the content for that section.