Post formatting

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.

![Mountain](/images/image-1200.jpg)

Mountain

Image with caption

Centered image with caption

image
Mountain

Mountain

Mountain

Image aligned left

Mountain

Image aligned right

Mountain

Post width image

Full width image

Using Markdown:

Input:

![Mountain](/images/image-600.jpg)
{: .full .tc}

Result:

Mountain

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 two
  • List item three
  • List item four

Ordered List (Nested)

  1. List item one
    1. List item one
      1. List item one
      2. List item two
      3. List item three
      4. List item four
    2. List item two
    3. List item three
    4. List item four
  2. List item two
  3. List item three
  4. List item four

Buttons

primary secondary success warning danger info light dark

primary secondary success warning danger info light dark

extra large extra large

large large

small small

Block level button Block level outline button

uppercase capitalised LOWERCASE

grow glow dim


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.


Primary link - Set primary colors in variables.scss.

Open link in new tab

Link title on hover

Dim on hover

Link without underline

Underline on hover

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 Loop
Cupertino, 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.

  1. http://google.com/ “Google” 

  2. http://search.yahoo.com/ “Yahoo Search” 

  3. http://search.msn.com/ “MSN Search”