Sometimes the Koenig editor is too basic to format particular element you need. Time to unveil the options you have when using the Markdown syntax.

We built this page as the most exhaustive markdown reference you can find on the web. If something is missing, please let me know in the comment below! The idea here is that you can easily copy-paste those snippets in your own content.

You probably won't need everything shown below but remember, it is here if you ever need it. The purpose of the content below is to show you how you can style your content with Ghost. Head over to FirePress FAQ section for more resources.

On play-with-ghost.com, each live demos have a post labeled as « styling guide ». It will help you see how the content is rendering in a variety of themes. By the way, the theme is responsible for managing how the content looks like on your Ghost site.

Table of Content

• Markdown sources
• Styling 101
• Image & clickable image
• Header & title
• List numbered & unordered
• Blockquote
• Embed (YouTube, SoundCloud, Vimeo, etc)
• Buttons
• Code block
• Table & Grid
• Icons
• Emoji (emoticon)
• Form
• Anchor (link within a page)
• Footnote
• Redirection
• Latin Character check
• Try Ghost

Markdown sources

From this point, everything you see is formatted using Markdown syntax. It will work in every editor that supports Markdown because it's an open standard on the web. There are two ways to find the sources for this page.

1. On GitHub

We maintained a gist on GitHub.

2) On play-with-ghost

1. Go to play-with-ghost
2. Select a live demo like FirePress Klimax1
3. Click the button admin panel
4. Log in with these credentials relations@firepress.org / firepress1
5. In Stories' section, look for the post Style guide
6. There you go, the source is available to you ✨

Let's start 🚀🚀🚀 , shall we?

Styling 101

This is bold and this is italic. You can create an absolute link like this one. You can create a relative link to pages and posts within your own website.

Sometimes you want to have your visitor open a link into a new tab. This is where you can find me on Twitter

Everyone loves straight to the point bullet points:

• The first rule is: Be honest
• The second rule is: See rule number one
• Rule number #3 should be here too

Fancy elements:

The s element example
The mark element example
The samp element example
The small element example
The _{sub element} example
The ^{sup element} example
The kbd element example

Horizontal bar is made by using three minus signs ---.

Image

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

Clickable image

We need two things: a URL and a picture. Here is how you can do it step-by-step.

Header (title)

Living without those beautiful headers would be impossible.

Header h1

Header h2

Header h3

Header h4

Header h5

Header h6

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

List numbered

It looks like all the cool kids are trusting Ghost as their CMS (content management systems). Here a few of them:

1. The dating app Tinder
2. The analytic app Fullstory
3. StackOverflow and Discourse founder's blog Codinghorror
4. Jannis is a cool coder blog
5. Discover what Ghost can do on Play With Ghost

Here is an unordered list:

• I'm building & bootstraping FirePress. You can see why here
• You can see checkout play-with-ghost.
• See the public roadmap on Trello
• As a developer I tackle these challenges every day.
  • point a
  • point b
  • point c
• Do you have the soul of an early adopter? The beta is open for you

Blockquote

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

Based on the cuisine of medieval. Muffins, foods that were used widely in combination with variations. Combine that are harvested at that mysteriously rich, sweet and political changes for this cake. — HAL 9000

Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

Embed content

Embed are easy to insert in your website.

YouTube

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

Vimeo

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

SoundCloud

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

Github

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

Slides

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

Buttons

Everyone love buttons! As there are so many options, we decided to create three button styles.

Use them as a call to action to get a maximum effect.

Button Style #1

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. Standard size

Click Here
Click Here
Click Here

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. Small size

Click Here
Click Here
Click Here

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. Icons

  Click Here
  Click Here
  Click Here

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. Round

Click Here
Click Here
Click Here

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. Wide

Schedule an appointment

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. Colors

Click Here  Click Here  Click Here  Click Here  Click Here  Click Here  Click Here  Click Here  Click Here  
Click Here  Click Here  Click Here  
Click Here  Click Here  Click Here  
Click Here  Click Here  Click Here

Button Style #2

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. Standard size

Buy Tickets

Click Here

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. Small size

Click Here

Click Here

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. Large size

Click Here

Click Here

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. Fit size (wide)

Click Here

Click Here

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. Icons

  Click Here

  Click Here

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site. Disabled

Click Here

Click Here

Code block

Useful to share snippets or a piece of code.

<style>
  // Menu font size {}
  .site-nav {
    font-size: 1.4rem;
    height: 40px;
  }

  // Title size {}
  h1 {
    font-size: 4.5rem;
  }

  // Title color {}
  .post-full-title {
    margin: 0;
    color: #ffffff;
  }

  // Logo size {}
  img.site-logo {
    max-height: 12vw !important;
  }

  // Main image roudness {}
  .post-full-image {
    border-radius: 0px 0px 6px 6px;
  }

  // Main content section roudness {}
  .post-full-content {
    border-radius: 6px 6px 0px 0px;
  }
</style>

Inline code block: This text is used as a placeholder. <i class="fas fa-code"></i> Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

Table & Grid

There are three ways to create a table. We recommand to use the first or second method.

1. Grid table
2. Markdown table
3. HTML table

1) Grid table

The best way to create a complex table is to use the grid system. We use this
one. Below, is a classic pricing table with a ratio of: 10/12 on the
left and 2/12 on the right.

Our Pizzas

Corporate services

Let's go deepter. See how we use   (non breakable space) in order to create a whitespace in the two tables
below:

Going fancy

Without whitespaces (using  ), it's not as cute.

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

2) Markdown table

A more straightforward way to create tables is to use Markdown.

Allignement: the description is on the left, the price is on the right

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

Allignement: description is left, price is left

Here is an example with three columns.

Here is an example with four columns. You see that you don't have to align your Markdown perfectly to export a beautiful table.

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

3) HTML table

The third way of creating a table is with pure HTML.

Variation A

Variation B

Variation C

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

We love icons

You have access to more than 1400 free icons thanks to the folks at Font Awesome.

You can find free icons directly on Font Awesome.

Let's say you are looking for a camera icon. By using this snippet:

you will see: <i class="fas fa-camera-retro"></i>

you will see:

Size

Rotation

Animation

Emoji (emoticon)

See them all on getemoji.com.

Form

There are many ways to embed a form into your website. The classic use case is to have a contact us form.

Option #1 | formspree

formspree is the most straightforward way to have a form on any website. Use the code below and use your email. In this example we use youremail@here.com. formspree will send you an email to confirm your email and you will start to receive your messages.

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. At the moment, the goal is to build a structure for our site.

Option #2 | third party service

You can also use a third party service like Wufoo or Typeform.

This is a placeholder text to give context. You are about to read words that won't make sense, and this is fine. At the moment, the goal is to build a structure for our site.

Option #3 | via your CRM

Maybe you want something more organized than a simple email. What about having all your messages going thru a CRM? See this example by Airtable.

Anchor

Very practical when you want your user to navigate within a big page. We usually use it to create a Table of content. How use anchors on https://firepress.org/en/faq/.

• Footnotes section
• Code Block
• Start your trial

Footnote

Using a footnote is a great way to credit or reference something in your content ^[1]. Most people use it when they have a lot of references in their content ^[2].

This text is used as a placeholder. Words that will follow won't make any sense and this is fine. From FirePress FAQ's section ^[3], we can understand that the goal is to build a structure for our site.

Redirect traffic to a new page

This is a pure HTML trick. Redirect the traffic from a webpage to another one is useful in cases you want to rename a page.

For example, you have two pages: A is your old page, B is your new page. Instead of renaming page A, create a new page B and use this script on page A to redirect traffic on page B.

This way, the traffic that is still pointing to page A doesn't break, and page B will be loaded.

Create an HTML card and use this script below:

The content on: https://firepress.org/about is now here:
https://firepress.org/en/tag/about/

(You will be redirected automatically in few seconds.)

<script type="text/javascript">
      window.location.href = "https://firepress.org/en/tag/about/"
</script>

Latin Character check

These are the most common Latin characters. It ensures this theme supports them and that everything renders smoothly.

, - . / 0 1 2 3 4
5 6 7 8 9 : ; > = <
? @ A B C D E F G H
I J K L M N O P Q R
S T U V W X Y Z [
] ^ _ a b c d e f
g h i j k l m n o p
q r s t u v w x y z
{ | } ~ ! " # $ % &
‘ ( ) *

Try Ghost

Are you considering Ghost to build your next website? Sign-up today to get your free 10-Day trial. We will take care of your project with our fully managed hosting service. The hosting is provided by FirePress, the official play-with-ghost's sponsor.

Is there something to fix or to improve? If so, please buzz us on Github or on Twitter and I'll update it!

Thanks for being curious and we can't wait to see what you will create with your website.

— The FirePress Team 🔥📰