Format

Format

Headers

Source

 == AsciiDoc Format -> Level 1 Header

 === Headers -> Level 2 Header

 ==== Level 3 Header

...

Render

Level 1 Header

Level 2 Header

Level 3 Header

Anchors

Create Anchor

Create an anchor to a header so it can be accessed quickly.

Source
```
[[test-anchor]]
=== Test Anchor
```
Render

Test Anchor

Use Anchor

Create a link to the previously created anchor.

Source
```
<<test-anchor, Header>>
```
Render

Header

Text Format

Bold

Complete Bold

Use bold font for a word.

Source
```
*word*
```
Render

word

Partial Bold

Use bold font for a part of a word.

Source
```
w**or**d
```
Render

word

Italics

Complete Italics

Use style italics for a word.

Source
```
_word_
```
Render

word

Partial Italics

Use style italics for part of a word.

Source
```
w__or__d
```
Render

word

Emphasis

Give emphasis to a word.

Source
```
Give emphasis to a _word_
```
Render

word

Single Quotes

Place a word in single quotes.

Source
```
'`word`'
```
Render

‘word’

Double Quotes

Place a word in double quotes.

Source
```
"`word`"
```
Render

“word”

Superscripts

Place a word, or part of a word, as a superscript.

Source
```
^super^script
```
Render

^superscript

Subscripts

Place a word, or part of a word, as a subscript

Source
```
~wo~rd
```
Render

_word

Monospaced

Use monospaced font.

Monospaced

Source
```
`word`
```
Render

word

Line Break

Break a line in the same paragraph.

Source

This idea ends here. +
And I want this one in a new line,
but in the same paragraph.

Render

This idea ends here.
And I want this one in a new line, but in the same paragraph.

Escape Character

Use the backslash (\) to escape special characters.

Source

\*word* (Normally, it would make the word bold.)

Render

*word*

Comments

Use two slashes (//) to comment in the text and do not render it in the HTML.

Source

The next line is a comment.
// It should not be rendered in the HTML.

Render

The next line is a comment.

Pass-through HTML - Do not use

Delimit HTML code in 4 plus (+) to execute it once rendered.
Since the idea of Pelican is to separate content from style, do not use this method. Focus only on content in the .adocs.

Source

++++
  <p style="color:green">
  This <I>HTML</I> code will be rendered directly to the page.<br>
  </p>
++++

Render

This HTML code will be rendered directly to the page.

License Characters

Source
```
(C), (R), (TM)
```
Render

©, ®, ™

Media and links

Titles

They are declared before an element, starting with a dot (images, lists, quotes, literals, etc.).

Image Titles

Source
```
.Image Title
image::doge.png[Doge]
```
Render

Figure 1. Image Title

Video Title

Source
```
.Video Title
video::he-man.mp4[He-man]
```
Render

Video Title

Literal Title

Source

 .Literal Title
 ....
 Literal Block
 ....

Render
Literal Title
```
Literal block
```

List Title

Source

.List Title
. Item 1
.. Subitem 1
. Item 2

Render
List Title
1. Item 1
  1. Subitem 1
2. Item 2

Quote Title

Source
```
.Quote Title
[quote]
I'm Batman
```
Render

Quote Title

I’m Batman

Table Title

Source

.Table Title
|====
| Col 1 | Col 2
|====

Render

Table 1. Table Title

Col 1

Col 2

Table 1. Table Title
Col 1	Col 2

Paragraph Title

Source
```
.Paragraph Title
Normal Paragraph
```
Render

Paragraph Title

Normal Paragraph

Code Title

Source

.Code Title
[source, python]
print "Hello World"

Render
Code Title
```
print "Hello World"
```

Images

Block Images

Source
```
image::doge.png[Doge]
```
Render

Block Image

Inline Images

Source
```
image:doge.png[Doge]
```
Render

Inline Image

Videos

Source
```
video::he-man.mp4[He-man]
```
Render

Links

Link - Option 1

When this option is being used, every punctuaction mark goes outside of the square brackets ``[]''.

Source
```
link:https://google.com[Google].
```
Render

Google.

Link - Option 1 - Type button

Source

[button]#link:https://google.com[Google]#.

Render

Google.

Special Blocks

Literals

Literal - Option 1

A literal block is delimited by 4 dots before and after the content.

Source
```
 ....
 Hello
 ....
```
Render
```
Hello
```

Literal - Option 2 - Do not use

Set a blank space as the first character of a line.

Source
```
{space}Hello
```
Render
```
Hello
```

Quotes

Quote Without Source Information

Source
```
[quote]
I'm Batman
```
Render

I’m Batman

Quote With Source Information

Source

[quote, Batman, Detective Comics]
I'm Batman

Render

I’m Batman

— Batman
Detective Comics

Source Code

Simple code

Source

.Code.py
[source, python]
print "Hello World"

Render
Code.py
```
print "Hello World"
```

Source Code With Numbered Lines

Source

.Code.java
[source, java, linenums]
----
Line 1
Line 2
Line 3
----

Render
Code.java
```
Line 1
Line 2
Line 3
```

If there are multiple code blocks with numbered lines, the numbering will be organized sequentially.

Source

.Code.cpp
[source, cpp, linenums]
----
Line 1
Line 2
Line 3
----
+
[source, cpp, linenums]
----
Line 4
Line 5
Line 6
----

Render

Code.cpp

Line 1
Line 2
Line 3

Line 4
Line 5
Line 6

In order to reset the numbering, a title must be given to the desired code block.

Source

.Code1.py
[source, python, linenums]
----
Line 1
Line 2
Line 3
----
+
.Code2.py
[source, python, linenums]
----
Line 1
Line 2
Line 3
----

Render

Code1.py

Line 1
Line 2
Line 3

Code2.py

Line 1
Line 2
Line 3

Source Code from file

The path to the file must be absolute and according to the container’s filesystem.
In the source, there must not be a space between the path and the square brackets. The space was placed, so the file was not rendered in the literal block.

Source

 .Code from file
 [source, gherkin, linenums]
 ----
 include::script.feature [] -> No space
 ----

Render

Code from file

Feature: Make coffee
  Coffee should brew after mixing the ingredients

  Background:
    Given a cofee pot
    And coffee beans
    And water

  Scenario: Make coffee from scratch
    When I grind the coffee
    Then I can put in in the pot
    When I put the cofee and water in the pot
    When I turn it on
    Then coffee should brew

Code Inside a List

Source

. Item 1
+
.Code1.py
[source, python]
----
print "Hello World"
----

. Item 2
+
.Code2.py
[source, python]
----
print "Bye World"
----

Render
1. Item 1
  Code1.py
  print "Hello World"
2. Item 2
  Code2.py
  print "Bye World"

Lists

Unordered Lists

Source
```
* Item 1
- Subitem 1.1
** Subitem 1.2
```
Render
Item 1
- Subitem 1.1
  - Subitem 1.2

Ordered Lists

Source

. Item 1
.. Item 1.1
... Item 1.1.1
.. Item 1.2
... Item 1.2.1
.... Item 1.2.1.1
. Item 2

Render
1. Item 1
  1. Item 1.1
    
    Item 1.1.1
  2. Item 1.2
    
    Item 1.2.1
    
    Item 1.2.1.1
2. Item 2

List Continuation

Source

. Something about a topic
+
Still talking about the same topic

. Another Topic

Talking about something else

Render
1. Something about a topic
  
  Still talking about the same topic
2. Another Topic

Talking about something else

Tables

Simple table

Source

.Title
[options="header"] -> Optional
|====
|Col 1|Col 2      |Col 3
|1    |Item 1     |a
|2    |Item 2     |b
|3    |Item 3     |c
|6    |Three items|d
|====

Render

Table 2. Title

Col 1 Col 2 Col 3

1

Item 1

a

2

Item 2

b

3

Item 3

c

6

Three items

d

Table 2. Title
Col 1	Col 2	Col 3
1	Item 1	a
2	Item 2	b
3	Item 3	c
6	Three items	d

A More Complicated Table

Source

[grid="rows",format="csv"]
[options="header",cols="^,<,<s,<,>m"]
|====
ID,FName,LName,Address,Phone
1,Vasya,Pupkin,London,+123
2,X,Y,"A,B",45678
|====

grid -> Sets borders
format -> Sets the delimiter character between columns
header -> The first column are headers
cols -> Sets format of the columns
  ^  align center in the row
  <  align left in the row
  <s align left in the row and font strong (bold)
  >m align right in the row and font monospaced

The CSS of the site overrides some of the previous.

Render

ID FName LName Address Phone

1

Vasya

Pupkin

London

+123

2

X

Y

A,B

45678

ID	FName	LName	Address	Phone
1	Vasya	Pupkin	London	`+123`
2	X	Y	A,B	`45678`

Multiline cells in a table, custom caption

Source

.Multiline cells, row/col span
[caption="Tabla"]
|====
|Date |Duration |Avg HR |Notes

|22-Aug-08 .2+^.^|10:24 | 157 |
Worked out MSHR (max sustainable
heart rate) by going hard
for this interval.

|22-Aug-08 | 152 |
Back-to-back with previous interval.

|24-Aug-08 3+^|none
|====

.2+^.^ -> Occupy two cells vertically and align center
          horizontally and vertically
3+^    -> Occupy 3 cells horizontally and align center horizontally

A dot (.) represents columns

Render

Tabla 1.Multiline cells, row/col span
Date	Duration	Avg HR	Notes
22-Aug-08	10:24	157	Worked out MSHR (max sustainable heart rate) by going hard for this interval.
22-Aug-08	10:24	152	Back-to-back with previous interval.
24-Aug-08	none

Responsive Table Distributed Horizontally

Use the special class tb-row for this type of table. DO NOT USE MULTILINE CELLS.

Source

[role="tb-row"]
.Horizontal Distribution
[frame="topbot", cols="^s,^,^"]
|====
| Row 1 | Item 1 | Item 2

| Row 2 | Item 1 | Item 2

| Row 3 | Item 1 | Item 2
|====

Render

Table 3. Horizontal Distribution

Row 1 Item 1 Item 2

Row 2

Item 1

Item 2

Row 3

Item 1

Item 2

Table 3. Horizontal Distribution
Row 1	Item 1	Item 2
Row 2	Item 1	Item 2
Row 3	Item 1	Item 2

Source

[role="tb-row"]
.Horizontal Distribution - More Cols than Rows
|====
>m| Row 1 | Item 1 | Item 2 | Item 3 | Item 4

^s| Row 2 | Item 1 | Item 2 | Item 3 | Item 4

| Row 3 | Item 1 | Item 2 | Item 3 | Item 4
|====

Render

Table 4. Horizontal Distribution - More Cols than Rows

Row 1 Item 1 Item 2 Item 3 Item 4

Row 2

Item 1

Item 2

Item 3

Item 4

Row 3

Item 1

Item 2

Item 3

Item 4

Table 4. Horizontal Distribution - More Cols than Rows
Row 1	Item 1	Item 2	Item 3	Item 4
Row 2	Item 1	Item 2	Item 3	Item 4
Row 3	Item 1	Item 2	Item 3	Item 4

Responsive Table Distributed Vertically

Use the special class `tb-col”` for this type of table.
*DO NOT USE MULTILINE CELLS*.

Source

[role="tb-col"]
.Vertical Distribution - NxN
[options="header", cols="^,^,^"]
|====
| Col 1 | Col 2 | Col 3

| Item 1.1 | Item 1.2 | Item 1.3

| Item 2.1 | Item 2.2 | Item 2.3
|====

Render

Table 5. Vertical Distribution - NxN

Col 1 Col 2 Col 3

Item 1.1

Item 1.2

Item 1.3

Item 2.1

Item 2.2

Item 2.3

Table 5. Vertical Distribution - NxN
Col 1	Col 2	Col 3
Item 1.1	Item 1.2	Item 1.3
Item 2.1	Item 2.2	Item 2.3

Source

[role="tb-col"]
.Vertical Distribution - MxN, M < N
[cols="<,^,>,<"]
|====
s| Col 1 s| Col 2 s| Col 3 s| Col 4

| Item 2.1.1 | Item 2.1.2 | Item 2.1.3 | Item 2.1.4

| Item 2.2.1 | Item 2.2.2 | Item 2.2.3 | Item 2.2.4
|====

Render

Table 6. Vertical Distribution - MxN, M < N

Col 1 Col 2 Col 3 Col 4

Item 2.1.1

Item 2.1.2

Item 2.1.3

Item 2.1.4

Item 2.2.1

Item 2.2.2

Item 2.2.3

Item 2.2.4

Table 6. Vertical Distribution - MxN, M < N
Col 1	Col 2	Col 3	Col 4
Item 2.1.1	Item 2.1.2	Item 2.1.3	Item 2.1.4
Item 2.2.1	Item 2.2.2	Item 2.2.3	Item 2.2.4

Source

[role="tb-col"]
.Vertical Distribution - MxN, M > N
|====
| Col 1 | Col 2 | Col 3

| Item 2.1.1 | Item 2.1.2 | Item 2.1.3

| Item 2.2.1 | Item 2.2.2 | Item 2.2.3

| Item 2.3.1 | Item 2.3.2 | Item 2.3.3

| Item 2.4.1 | Item 2.4.2 | Item 2.4.3

| Item 2.5.1 | Item 2.5.2 | Item 2.5.3
|====

Render

Table 7. Vertical Distribution - MxN, M > N
Col 1	Col 2	Col 3
Item 2.1.1	Item 2.1.2	Item 2.1.3
Item 2.2.1	Item 2.2.2	Item 2.2.3
Item 2.3.1	Item 2.3.2	Item 2.3.3
Item 2.4.1	Item 2.4.2	Item 2.4.3
Item 2.5.1	Item 2.5.2	Item 2.5.3

Responsive Table with Alternated Content - Max. 2 Columns

Use the special class tb-alt for this type of table. DO NOT USE MULTILINE CELLS.

Source

[role="tb-alt"]
.Table with Alternated Content
[cols="2*^", frame="none"]
|====
|Text 1
|image:doge.png[Doge]

|image:doge.png[Doge]
|Text 2

|Text 3
|image:doge.png[Doge]

|image:doge.png[Doge]
|Text 4
|====

Render

Table 8. Table with Alternated Content

Text 1

Text 2

Text 3

Text 4

Table 8. Table with Alternated Content
Text 1
	Text 2
Text 3
	Text 4

Questions and Answers

[qanda]
Question 1::
   Answer 1
Question 2::
   Answer 2

Render
1. Question 1
  
  Answer 1
2. Question 2
  
  Answer 2

Definitions

Source

Term 1:: Definition
Term 2:: Definition
[horizontal]
Subterm 2.1::: Definition can also be placed horizontally

Render

Term 1

Definition

Term 2

Definition

Subterm 2.1
Definition can also be placed horizontally.

Admonition Elements

Source

[WARNING]
The speed limit in this road is 60 mph. +
Do not exceed this speed.

NOTE: I left the dinner in the oven.

[CAUTION]
Be careful! The floor is slippery!

TIP: You can also make an appointment via our website.

[IMPORTANT]
Be sure to get all of your belongings
before exiting the vehicle.

Render

The speed limit in this road is 60 mph.
Do not exceed this speed.

I left the dinner in the oven.

Be careful! The floor is slippery!

You can also make an appointment via our website.

Be sure to get all of your belongings before exiting the vehicle.

Horizontal Rule

Source
```
'''
```
Render

Variables

They can be declared at the beginning of the document.

Source

:variable: AsciiDoc

This text is written in {variable}.

Render

This text is written in AsciiDoc.

Classes

Inline Classes

As with colors, inline elements can be given a class name and then be edited in the CSS.

Source
```
[new-class]#element#
```
Render

element

Block Classes

Block elements can also be given class names.

Source
```
[role="new-class"]
----
Text
----
```
Render
```
Text
```

Tooltips

Using images

Source

Term image:{tooltip}[alt="Tooltip icon",title="Additional information about the term"]

Term2 image:{tooltip}[alt="Tooltip icon",title="The description can have
line breaks in the source code"]

Render

Term

Term2

References

Service status - Terms of Use - Privacy Policy - Cookie Policy