English

Gatsby Starter Blog

Asciidoctor Examples

🎉4 hours ago • ☕️☕️☕️ 16 min readComments

Attributes
:!showtitle:
:!sectnums:
:sectids:
:toc: auto
:sectlinks:
:sectanchors:
:idprefix:
:idseparator: -
:xrefstyle: full
:!example-caption:
:!figure-caption:
:!table-caption:
:!listing-caption:
:icons: font
:experimental:
:!prewrap:

Text

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

This is Asciidoc. The following is a sample of Asciidoc. To start a new line, add + at the end of the line or use the hardbreaks option.
New line using +.

Lead Style

Lead Style

Blockquotes

Source blocks ([source]) can also be used in citations.

— attributed
additional information
Nested Quote

abc

— nest
— root

Lists

Ordered List

  1. List item 1

  2. List item 2

    1. Indented level 2

      1. Indented level 3

  3. List item 3

Unordered List

  • List item 1

  • List item 2

    • Indented level 2

      • Indented level 3

        • Indented level 4

          • Indented level 5

  • List item 3

Markers
square
  • item1

  • item2

    • item3

circle
  • item1

  • item2

    • item3

disc
  • item1

  • item2

    • item3

none
  • item1

  • item2

    • item3

unstyled
  • item1

  • item2

    • item3

Description List

0

123456789

A

BCDEF

a

bcdef

Horizontal
0

123456789

A

BCDEF

a

bcdef

Q&A
  1. ABCDEF

    abcdef

Inline elements

  • This is a text link.

  • This is bold (strong) text.

  • red color

  • This is italic (emphasis) text.

  • This is underlined text.

  • This text is deleted and This text is inserted.

  • This text has a strikethrough.

  • Superscript®.

  • Subscript for things like H2O.

  • This small text is small for for fine print, etc.

  • The mark element indicates a highlight.

  • xross reference.

  • Image gatsby-icon

User Interface Macros

Must set the experimental attribute. (:experimental:)

Display

Asciidoc code

Keyboard shortcuts

CTRL+H

kbd:[CTRL+H]

CTRL+SHIFT+i

kbd:[CTRL+SHIFT+i]

CTRL+ALT+R

kbd:[CTRL+ALT+R]

\

kbd:[\ ]

CTRL+]

kbd:[CTRL+\]]

Meta++

kbd:[Meta + +]

Menu selections

Home

menu:Home[]

Home  Asciidoc Example

menu:View[Asciidoc Example]

Home  Asciidoc Example  User Interface Macros

menu:Home[Asciidoc Example > User Interface Macros]

UI Buttons

Cancel

btn:[Cancel]

NG

btn:[NG]

Icons

Display

Asciidoc code

icon:tags[]

icon:tags[role="white"]

icon:tags[5x]

icon:tags[rotate=90]

icon:tags[flip=horizontal]

icon:tags[flip=vertical]

Line up icons

icon:heart[]
icon:heart[size=fw, role="red"]
icon:heart[lg, role="fuchsia"]
icon:bolt[fw, role="yellow"]
icon:shield[fw, role="silver"]

Position

float

float left
.float left
[role="left"]
float left

float right
.float right
[role="right"]
float right

Alignment

text-left

text-left

text-center

text-center

text-right

text-right

text-justify

text-justify

Tabular data

Normal
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5

Table Cell 1

Table Cell 2

Table Cell 3

Table Cell 4

Table Cell 5

Table Cell 1

Table Cell 2

Table Cell 3

Table Cell 4

Table Cell 5

Table Cell 1

Table Cell 2

Table Cell 3

Table Cell 4

Table Cell 5

Table Cell 1

Table Cell 2

Table Cell 3

Table Cell 4

Table Cell 5

Table Footer 1

Table Footer 2

Table Footer 3

Table Footer 4

Table Footer 5

Format

Format

display

align

horizontal

left

<

center

^

right

>

vertical

left
center
right

.<

left
center
right

.^

left
center
right

.>

style

Asciidoc

  • 1

  • 2

Emphasis

Emphasis

Header

Header

Literal

Literal

Monospaced

Monospaced

Default

Default style

Strong

Strong

Verse

Verse

Asciidoc block

Element

Display

Unordered List

  • 1

  • 2

    • 3

Ordered List

  1. a

  2. b

    1. c

Table

Table 1. Table

nest

table

Source code

!==========  (1)
!nest!table
!==========
1 separate of nested tables

Example

example

Admonition

NOTE

Border

Frame

all (Default)

frame

all

topbot

frame

topbot

sides

frame

sides

none

frame

none

Grid

all (Default)

1

2

3

4

cols

1

2

3

4

rows

1

2

3

4

none

1

2

3

4

Strip

none (Default)

1

2

3

4

5

6

7

8

9

*

0

#

even

1

2

3

4

5

6

7

8

9

*

0

#

odd

1

2

3

4

5

6

7

8

9

*

0

#

all

1

2

3

4

5

6

7

8

9

*

0

#

hover

1

2

3

4

5

6

7

8

9

*

0

#

Code

  • Inline code: <div>code</div>

  • Pre-formatted text:

P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
Wrap
0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789
[source, Asciidoc]
------
abcdef  (1)
------
1 conum

Admonition

If you want to display following icons, you must set font for icons attribute. (:icons: font)

Note

Note

TIP

TIP

IMPORTANT

IMPORTANT

CAUTION

CAUTION

WARNING

WARNING

Sidebar

Sidebar

Form elements

Checkboxes

  • Choice A (checked)

  • Choice B (also checked)

  • Choice C (not checked)

  • normal list item

Interactive
  • checked

  • also checked

  • not checked

  • normal list item

Collapsible

Details

collapsible

Heading 1

Heading 1

Heading 2

Heading 2

Heading 3

Heading 3

Heading 4

Heading 4

Heading 5

Heading 5

Heading 6

Heading 6

Embedded content

Images

gatsby-icon
Here is a caption for this image.

Audio

Video

Youtube Embeddable Player

Passthroughs

Asciidoc code
[pass]
++++
<a href="https://github.com/hitsuji-no-shippo/gatsby-simple-blog-with-asciidoctor">
<img src="https://github-link-card.s3.ap-northeast-1.amazonaws.com/hitsuji-no-shippo/gatsby-simple-blog-with-asciidoctor.png" width="460px"></a>
++++

LICENSE

This document is licensed under MIT.

The MIT License (MIT)

Copyright (c) 2019 hitsuji no shippo

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

The MIT License (MIT)

Copyright (c) 2016 Darshan Soni

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

— Add my copyright to LICENSE in asciidoctor-skins

Edit • View history  in GitHub.


hitsuji no shippo

A starter blog with asciidoctor.