Hello World!
The aim of this post is to showcase the theme’s formatting features, to test if the theme formatting works correctly, and to provide examples for content creation.
Headings
There are six possible levels, from 1 to 6. I do not recommend using header 1 in posts as it conflicts with the post title styling.
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
This post is written with Markdown, and the headings are created with Markdown headings. The headers above are generated with the following code.
# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6
Paragraph
A paragraph (from Ancient Greek παράγραφος (parágraphos) ’to write beside’) is a self-contained unit of discourse in writing dealing with a particular point or idea. In Markdown terms, a paragraph is a block of text with one or more blank lines between them. The next paragraph is the famous Lorem ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tristique senectus et netus et. Mauris a diam maecenas sed. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Nunc eget lorem dolor sed viverra ipsum nunc. Leo integer malesuada nunc vel risus commodo viverra. Sit amet consectetur adipiscing elit pellentesque habitant morbi. Sed ullamcorper morbi tincidunt ornare massa. Turpis egestas integer eget aliquet nibh praesent tristique magna. Diam in arcu cursus euismod quis. Leo in vitae turpis massa sed elementum tempus. Sed vulputate odio ut enim. At quis risus sed vulputate odio. At consectetur lorem donec massa sapien faucibus. Metus aliquam eleifend mi in.
Highlights
Press <kbd>X</kbd> to win. Or press <kbd>CTRL+ALT+F</kbd> to show FPS counter.
Press X to win. Or press CTRL+ALT+F to show FPS counter.
<mark>As a unit of information in information theory, the bit has alternatively been called a shannon</mark>, named after Claude Shannon, the founder of field of information theory.
As a unit of information in information theory, the bit has alternatively been called a shannon, named after Claude Shannon, the founder of field of information theory.
Lists
Ordered List
- First item
- Second item
- Third item
1. First item
2. Second item
3. Third item
Unordered List
- List item
- Another item
- And another item
* List item
* Another item
* And another item
Nested list
- First item
- Second item
- Second item First subitem
- Second item second subitem
- Second item Second subitem First sub-subitem
- Second item Second subitem Second sub-subitem
- Second item Second subitem Third sub-subitem
- Second item Third subitem
- Second item Third subitem First sub-subitem
- Second item Third subitem Second sub-subitem
- Second item Third subitem Third sub-subitem
- Third item
The above list with markdown.
* First item
* Second item
* Second item First subitem
* Second item second subitem
* Second item Second subitem First sub-subitem
* Second item Second subitem Second sub-subitem
* Second item Second subitem Third sub-subitem
* Second item Third subitem
1. Second item Third subitem First sub-subitem
2. Second item Third subitem Second sub-subitem
3. Second item Third subitem Third sub-subitem
* Third item
It can be reproduced with HTML too.
<ul>
<li>First item</li>
<li>Second item
<ul>
<li>Second item First subitem</li>
<li>Second item second subitem
<ul>
<li>Second item Second subitem First sub-subitem</li>
<li>Second item Second subitem Second sub-subitem</li>
<li>Second item Second subitem Third sub-subitem</li>
</ul>
</li>
<li>Second item Third subitem
<ol>
<li>Second item Third subitem First sub-subitem</li>
<li>Second item Third subitem Second sub-subitem</li>
<li>Second item Third subitem Third sub-subitem</li>
</ol>
</ul>
</li>
<li>Third item</li>
</ul>
Definition List
HTML also supports definition lists.
- Blanco tequila
- The purest form of the blue agave spirit...
- Reposado tequila
- Typically aged in wooden barrels for between two and eleven months...
<dl>
<dt>Blanco tequila</dt>
<dd>The purest form of the blue agave spirit...</dd>
<dt>Reposado tequila</dt>
<dd>Typically aged in wooden barrels for between two and eleven months...</dd>
</dl>
Blockquotes
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer
or cite
element, and optionally with in-line changes such as annotations and abbreviations.
Quoted text. This line is part of the same quote. Also you can put Markdown into a blockquote.
Blockquote with a citation.
My goal wasn't to make a ton of money. It was to build good computers. I only started the company when I realized I could be an engineer forever.
According to Mozilla’s website, Firefox 1.0 was released in 2004 and became a big success.
Tables
Tables aren’t part of the core Markdown spec, but Hugo supports them.
ID | Make | Model | Year |
---|---|---|---|
1 | Honda | Accord | 2009 |
2 | Toyota | Camry | 2012 |
3 | Hyundai | Elantra | 2010 |
Colons can be used to align columns.
Tables | Are | Cool |
---|---|---|
align: left | align: center | align: right |
align: left | align: center | align: right |
align: left | align: center | align: right |
You can also use inline Markdown.
Inline | Markdown | In | Table |
---|---|---|---|
italics | bold | code |
Code
// This is a comment, and is ignored by the compiler.
// This is the main function.
fn main() {
// Statements here are executed when the compiled binary is called.
// Print text to the console.
println!("Hello World!");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example HTML5 Document</title>
</head>
<body>
<p>Test</p>
</body>
</html>
Images
<img src="/images/placeholder-400x400.png" alt="A 400x400 placeholder image" style="width:38%;height:auto;float:right;margin:0 0 1em 1em;" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tristique senectus et netus et. Mauris a diam maecenas sed. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Nunc eget lorem dolor sed viverra ipsum nunc. Leo integer malesuada nunc vel risus commodo viverra. Sit amet consectetur adipiscing elit pellentesque habitant morbi. Sed ullamcorper morbi tincidunt ornare massa. Turpis egestas integer eget aliquet nibh praesent tristique magna. Diam in arcu cursus euismod quis. Leo in vitae turpis massa sed elementum tempus. Sed vulputate odio ut enim. At quis risus sed vulputate odio. At consectetur lorem donec massa sapien faucibus. Metus aliquam eleifend mi in.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Tristique senectus et netus et. Mauris a diam maecenas sed. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Nunc eget lorem dolor sed viverra ipsum nunc. Leo integer malesuada nunc vel risus commodo viverra. Sit amet consectetur adipiscing elit pellentesque habitant morbi. Sed ullamcorper morbi tincidunt ornare massa. Turpis egestas integer eget aliquet nibh praesent tristique magna. Diam in arcu cursus euismod quis. Leo in vitae turpis massa sed elementum tempus. Sed vulputate odio ut enim. At quis risus sed vulputate odio. At consectetur lorem donec massa sapien faucibus. Metus aliquam eleifend mi in.
<img src="/images/placeholder-600x400.png" alt="A 600x400 placeholder image" style="width:100%;height:auto;margin-bottom:1em;" />
Other
GIF is a bitmap image format.
H2O
C6H12O6
Xn + Yn = Zn