Post formatting looks pretty damn amazing
Subtitles are optional and look just as good
You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.
To add new posts, simply add a file in the _posts directory that follows the convention YYYY-MM-DD-name-of-post.ext and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.
Headings
View heading documentation.
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Images
View image documentation.
Add images to your post using the markdown.
Image with caption
Centered image with caption
Image aligned left
Image aligned right
Post width image
Full width image
Responsive Videos
View responsive video documentation.
YouTube
Vimeo
Blockquotes
View blockquote documentation.
Single line blockquote:
I am not talented, I am obsessed
Multi line blockquote with a cite reference:
There’s no talent here, this is hard work. This is an obsession. Talent does not exist, we are all equal as human beings. You could be anyone if you put in the time. You will reach the top, and that’s that. I am not talented, I am obsessed.
— Conor McGregor
Tables
View table documentation.
Table.
| Employee | Salary | |
|---|---|---|
| John Joe | $1 | Needs a better salary |
| Jane Doe | $10K | Blogging intern |
| Joe Bloggs | $25k | Photographer |
| Jane Bloggs | $100k | Marketer & Copywriter |
Table with a footer.
| Header1 | Header2 | Header3 |
|---|---|---|
| cell1 | cell2 | cell3 |
| cell4 | cell5 | cell6 |
| cell1 | cell2 | cell3 |
| cell4 | cell5 | cell6 |
| Footer1 | Footer2 | Footer3 |
Codeblocks
View codeblock documentation.
Minimal codeblock.
def print_hi(name)
puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.
Codeblock with line numbers.
1
2
3
4
5
6
7
def show
@widget = Widget(params[:id])
respond_to do |format|
format.html # show.html.erb
format.json { render json: @widget }
end
end
Command line prompt.
gem install jekyllThis is what <html> code looks like in a paragraph of text.
List Types
View list types documentation.
Definition Lists
- Definition
- An exact statement or description of the nature, scope, or meaning of something: our definition of what constitutes poetry.
Unordered Lists (Nested)
- List item one
- List item one
- List item one
- List item two
- List item three
- List item four
- List item two
- List item three
- List item four
- List item one
- List item two
- List item three
- List item four
Ordered List (Nested)
- List item one
- List item one
- List item one
- List item two
- List item three
- List item four
- List item two
- List item three
- List item four
- List item one
- List item two
- List item three
- List item four
Buttons
View button documentation.
primary secondary success warning danger info light dark
primary secondary success warning danger info light dark
Block level button Block level outline button
uppercase capitalised LOWERCASE
Alerts/Notices
View alerts documentation.
Beautiful notices that are designed to grab a visitors attention.
Beautiful notices that are designed to grab a visitors attention.
Beautiful notices that are designed to grab a visitors attention.
Beautiful notices that are designed to grab a visitors attention.
Beautiful notices that are designed to grab a visitors attention.
Beautiful notices that are designed to grab a visitors attention.
Beautiful notices that are designed to grab a visitors attention.
Beautiful notices that are designed to grab a visitors attention.
Links / Anchor Tag
View link documentation.
Primary link - Set primary colors in variables.scss.
blue link black link green link gray link yellow link gold link orange light-purple link pink/ hover light pink dark-pink/ hover hot pink red link/ hover dark red
HTML Tags
View HTML tags documentation.
Address Tag
1 Infinite LoopCupertino, CA 95014
United States
Abbreviation Tag
The abbreviation CSS stands for “Cascading Style Sheets”.
Cite Tag
“Code is poetry.” —Automattic
Strike Tag
This tag will let you strikeout text.
Emphasize Tag
The emphasize tag should italicize text.
Insert Tag
This tag should denote updated text inserted in a blog post.
Keyboard Tag
This scarcely known keyboard tag emulates represents user input and produces an inline element displayed in the browser’s default monospace font.
Footnotes
I get 10 times more traffic from [Google] 1 than from [Yahoo] 2 or [MSN] 3.
Strong Tag
This tag makes bold text, try not to overuse it tho.
Subscript Tag
C6H12O6
Superscript Tag
E = mc2
Variable Tag
The variable tag allows you to denote variables.
Horizontal Rules
Mark Tag
The mark tag allows you to highlight parts of your text.
Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk.