The Main page heading or h1

Optional article lead. An overview of the document this could be the tutorial or guide objectives. It's probably not necessary for reference documents.

This is a normal paragraph style. It could contain some emphasized text or it can contain some strong text. Sometimes it may even contain some highlighted text.

This is a weighted paragraph style Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Text can be highlighted as a block level notice. Notices can be used to draw attention to important blocks of text, be careful not to use this too often on a single page.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, quasi, numquam, quidem reprehenderit cupiditate animi dolor ut exercitationem rerum molestias ad inventore accusantium voluptate ex recusandae aliquam sunt officiis iste.

A Second level heading or h2

This is a basic unordered list style. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

• List item 1
• List item 2
• List item 3
• List item 4

List items can contain nested paras:

• Lorem ipsum — dolor sit amet, consectetur adipisicing elit. Soluta, eum, dicta reiciendis est aut modi quam provident doloribus magnam molestiae non numquam iure facilis odio harum vero tempore voluptatum accusantium.

• Soluta eum — dicta reiciendis est aut modi quam provident doloribus magnam molestiae non numquam iure facilis odio harum

Need to show keyboard input: ssh user@server_address -i /path/to/downloaded/ssh/key/key.pem. or instead show a terminal block:

This is a basic ordered list style:

1. This is the first item.
2. This is the second item.
3. This is the third item.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

ssh user@server_address -i /path/to/downloaded/ssh/key/key.pem

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, omnis, necessitatibus.

Tabular Data

Tabs Basic Navigation

A basic example of tabs for navigation. The tab switching is configured by updating the href and id on the related Tabs-content element.

Tabs Enclosed Navigation

An example of Enclosed tabs navigation.

Accordion Navigation

Prism Syntax Highlighter

As of July 2020 we have removed the Jekyll syntax highlighter and the js based Google Code Prettify. These have been replaced with the Prism js code highlighter.

Basic Examples of use are documented below:

Prism will be automatically invoked on a page when you add a language to a class. For example <code class="language-javascript">var foo = "bar";</code>

var foo = "bar";

p { color: red }

Default code highlighter

def foo
  puts 'foo'
end

$ pwd
$ echo

Adding line numbers with prism

Add the line-numbers class, for example: <pre class="language-javascript line-numbers"><code>var foo = "bar"; var hello = "world";</code></pre>

var foo = "bar";
var hello = "world";

Soft wrap support

Use the style="white-space:pre-wrap;" in the code below.

Add the line-numbers class to your desired <pre> or any of its ancestors, and the line-numbers plugin will take care of the rest. To give all code blocks line numbers, add the line-numbers class to the

Terminal class

For values returned by the system use the normal `terminal` class:

/Users/me/my_awesome_project

Need help with deployments?

Contact Support

More Questions?

Join the Slack Channel