layout-elements

Layout elements

In this page you can find all the layout elements that can be used in the playbook, they have examples you can copy/paste in your text

Headings

The following syntax will output various weights of headings, from <h1> to <h6>

# Heading H1

## Heading H2

### Heading H3

#### Heading H4

##### Heading H5

###### Heading H6

See the resulting output below:

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5

Heading H6

Headings make use of the anchorjs plugin

Heading with ID

It's also possible to have headings with id, so you can link directly to them. The following syntax

# This is an H1 Heading with a "\#title" id {#title}

Will give the following result:

This is an H1 Heading with a "#title" id

Paragraphs

Regular paragraph text

**Bold text**

Bold text

_Italic text_

Italic text

_**Bold and italic text**_

Bold and italic text

~~Strikethrough text~~

~~Strikethrough text~~

Lists

Of course it's possible to have lists in your text. Please check the following syntax:

1. First ordered list item
2. Another item
   * Unordered sub-list.
3. Actual numbers don't matter, just that it's a number
   1. Ordered sub-list
4. And another item.

   You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces \(at least one, but we'll use three here to also align the raw Markdown\).

   To have a line break without a paragraph, you will need to use two trailing spaces.  
   Note that this line is separate, but within the same paragraph.  
   \(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.\)

5. And another item after a lot of text


6. You can start a new list after two line breaks

The above will generate the following output: 1. First ordered list item 2. Another item

Unordered sub-list.
1. Actual numbers don't matter, just that it's a number
Ordered sub-list 4. And another item.
You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).
To have a line break without a paragraph, you will need to use two trailing spaces. Note that this line is separate, but within the same paragraph. (This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

And another item after a lot of text
You can start a new list after two line breaks

Tasks list

This feature requires the to-do plugin

A syntax like the following

- [ ] task 1
- [x] task 2

Will generate the following output

task 1
task 2

Links

You can link to a heading within the same article or to an heading in another article with the following syntax:

You can link to a [heading within the same article](#layout_elements) or to [an heading in another article](/chapter-1/content.md#content)

You can link to an article (but if you are linking to a readme file you need to use a special syntax [article](/chapter-1/README.md/#readme)) with the following syntax:

You can link to an [article](/chapter-1/content.md)
(but if you are linking to a `readme` file you need to use a special syntax `[article](/chapter-1/README.md/#readme)`)

You can of course always link to whatever web address with the following syntax:

You can of course always link to [whatever web address](http://www.google.com)

Footnotes

You can have footnotes wherever you want in your text and page. Please check the following syntax:

footnote[^1]

footnote [link](/www.google.com)[^2]

[^1]: this is a plain footnote

[^2]: link: [http://www.google.com](http://www.google.com)

That will generate the following output:

footnote

footnote link

Code

This feature makes use of the copy-code-button plugin, but it is not a necessary plugin

this is a
code block

/* this is a code block with syntax highlighting */  
#title {  
  padding-bottom: .2rem;  
  border-bottom: 1px solid #eaecef;  
}

this is inline code instead

IMPORTANT Please check the book source to see the correct syntax to insert code in your text.

Include code from an external file

This feature requires the include-codeblock and ace plugins

include

IMPORTANT Please check the book source to see the correct syntax to insert code in your text.

Blockquote

A blockquote can be used to highlight a block of text with special importance.

The following syntax:

> this is a very famous quote, you should read it 'cause it will make you smarter.
>
> and it can continue on a second paragraph.  
> and you can also have a single line break without starting a new paragraph

Would give the following result:

this is a very famous quote, you should read it 'cause it will make you smarter.
and it can continue on a second paragraph. and you can also have a single line break without starting a new paragraph

Special blockquotes

This feature requires the styled-blockquotes plugin

Special blockquotes are available to highlight pieces of text throughout the book.

The following syntax

> **info**
> This is an info blockquote with icon (the icon will not render in the PDF...)

Would give the following result:

info This is an info blockquote with icon (the icon will not render in the PDF...)

IMPORTANT

Please check the playbook source for all the tags to show different icons and blockquote style
Also, please be aware that the icons won't be shown in the PDF version of the book

info no-icon This is an info blockquote without icon