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.
A Default Notice
Call-out some text on the page as important but use sparingly! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
A Warning Notice
Callout some text on the page as warning but use sparingly! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
A Danger Notice
Callout some text on the page as dangerous but use VERY sparingly! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
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:
- This is the first item.
- This is the second item.
- 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
Attribute | Default Value |
---|---|
user | nginx |
worker_processes | Dynamicly set based on instance size |
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.
Alpha
This is some alpha content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Beta
This is some beta content. Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et doloreatat non proident, sunt in culpa qui.
Gamma
This is some gamma content. Amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Tabs Enclosed Navigation
An example of Enclosed tabs navigation.
One
This is some One content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
This is some One content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Two
This is some Two content. sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
Three
This is some Three content. sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
Accordion Navigation
Accordion 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Accordion 2
This is a list item accordion. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco .
Accordion 3
This is a list item accordion. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco .
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
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