Ghost has a powerful visual editor with familiar formatting options, as well as the ability to seamlessly add dynamic content.

Under the hood the editor delivers power and flexibility, with the ability to quickly add content such as images, galleries, videos, embeds and code!

Using the editor

Rich editing at your fingertips. Using the contextual toolbar allows you to efficiently format your text, add links and insert rich media.

Using the dynamic menu

You can insert a card either by clicking the + button on a new line, or typing / on a new line to search for a particular card. This allows you to insert images, markdown, html, galleries and embeds.

Using Markdown

The  editor will automatically parse Markdown typed in directly.  Alternatively, insert a Markdown card to access all of the same features  of previous versions of the Ghost editor inside a single card.

Alerts

<div class="alert">
	Alert message text here.
</div>

Add alert--danger or alert--warning modifier classes accordingly.

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.

BBC - Home

The best of the BBC, with the latest news and sport headlines, weather, TV & radio highlights and much more from across the whole of BBC Online

Home

YouTube

Enjoy the videos and music that you love, upload original content and share it all with friends, family and the world on YouTube.

Cards

Cards are great for highlighting specific bits of content.

<div class="card">
    <h4 class="card__title">Card title</h4>
    <p>The body of the card. Some short paragraph explaining the card title in more detail.</p>
</div>

Default card:

Invert a card using the .card--inverted modifier class:

Code

Code can be presented inline, like <code>. When creating a code text, all you need to do is add a ` before and  after your text. In the editor ``` (three backticks) defines a code block.

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

Columns

<div class="columns">
    <div class="column"></div>
    <div class="column"></div>
</div>

By default, the .columns class creates a two column layout, setting column widths to 50%.

Use the modifier classes .columns--three and .columns--four to set column widths to 33% and 25% respectively.

Headings

When creating a header, all you need to do is add a # before your header or use the contextual toolbar. You can keep adding up to six # in a row to make the headers smaller.

Heading 1

Heading 2

Heading 3

Highlighting

Highlighting text on a web page can help bring important information immediately to the reader's attention. When creating a highlighting text, all you need to do is add a == before and after your text in Markdown card.

Images

You can upload images using the Image card. Once inserted you can blend images beautifully into your content at different sizes (normal, wide, and full) and add captions wherever needed.

Links

If you paste in a URL, like https://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.

List Types

Unordered List

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

Ordered List

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

Quoting

If you want to add a quote, you just need to add a > to the beginning of the line or use the contextual toolbar, and it will put it into the quote format.

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

Responsive Tables

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

Video