Style Guide

Blog posts in Ghost are written using Markdown. Markdown is a minimal syntax for marking up your documents with formatting, using punctuation and special characters.

Headings

Headers are set using a # before the title. The number of hashes before the title text will determine the depth of the header. Header depths are from 1-6.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Links

If you paste in a URL, like http://ghost.org - it'll automatically be linked up. But if you want to customise your anchor text, you can do that too! Here's a link to the Ghost website.

Quoting

When you want to add a quote in Markdown, it’s exactly the same as the formatting which you may already be familiar with from your email app of choice when you reply to someone. Prefixing the line with a > converts it into a block-quote.

Ghost is a fully open source, hackable platform for building and running a modern online publication. We power blogs, magazines and journalists from Zappos to Sky News.

Bookmarks

With the Bookmark card you can present links in a much richer format, similar to Twitter cards. If the URL points to a page with right meta information it can show the page title, excerpt, author, publisher and even a preview image.

Images

You can upload images using the Image card. You can choose from three image width options: normal, wide, and full.

A pear, a lime, and a kiwi balance on a yellow background — Photo by Dose Juice

riped banana on pink surface — Photo by Mike Dorner

Gallery

You can also upload images using the Gallery card.
Supports up to 9 images. Max 3 images per row.

List Types

Unordered List

Item number one
Item number two
- A nested item
- A nested item
A final item

Ordered List

Item number one
Item number two
1. A nested item
2. A nested item
A final item

Responsive Tables

A responsive table will display a horizontal scroll bar if the screen is too small to display the full content.

#	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell

Video

Footnotes

Footnotes can be added to the body of your text using placeholders like this: [^1] or [^note] coupled with the note text at the end of the document. For example:

Here is a footnote reference,^[1] and another.^[2]

Here's the footnote. ↩︎
Here's one with multiple blocks. ↩︎

Working with Code

Code can be presented inline, like <code>. Indenting by 4 spaces will turn an entire paragraph into a code-block.

.awesome-thing {
    display: block;
    width: 100%;
}