Everything you need to format your posts
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
Here are paragraph headings:
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Images
Add images to your post using markdown.
Image with caption
Centered image with caption
Image aligned left
Image aligned right
Post width image
Full width image
Using Markdown:
Input:
{: .full .tc}
Result:
Make sure your block inline attribute lists like {: .full .tc} is not on the same line as your image markup to render styling properly
Responsive Videos
YouTube
Vimeo
Blockquotes
Single line blockquote:
I have no idea
Multi line blockquote with a cite reference:
I have no idea, but I do have ideas.
— Yves Capelle
Tables
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
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 jekyll
This is what <html> code looks like in a paragraph of text.
List Types
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
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
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.
Beautiful notices that are designed to grab a visitors attention.
Links / Anchor Tag
Primary link - You can set custom primary colors in sup-theme.css.
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
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.