Sometimes the Koenig editor is too simple to format particular elements. It's time unveil all the options you have at your fingertips.

We built this page as one of the most exhaustive markdown reference you can find on the web. If something is missing, please let me know in the comment below!

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 for more resources.

On play-with-ghost.com, every live demos are showing a post labeled as Β« styling guide Β». It will help you see how the content is rendering in a different context. By the way, the theme is responsible for managing how the content looks like on your Ghost site.

Table of Content


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.

on GitHub

We maintained a gist on GitHub.

See it in action

  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. Thanks to Icons8 for the picture.

walking-on-the-beach

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.

follow-me-twitter


Header (title)

Living without those beautiful headers would be hard.

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

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

List unordered

  • 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

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.


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.


Emoji (emoticon)

πŸ”₯ πŸ“° FirePress πŸ™Œ blessed
πŸ˜‚ LOL 😊 smiling
😊 smiling πŸ€” thinking
πŸ€” thinking ✨ star
πŸš€ launch πŸ˜‚ LOL
⚑️ lightning ❀️ heart
πŸ‘ Thumbs Up πŸ™ˆ damm me
πŸ‡¨πŸ‡¦ Canada flag 🎨 design
πŸ’₯ bamm πŸ¦„ licorn
πŸ›  parameters πŸ”₯ fire
πŸŽ‰ hell yeah πŸ™Œ blessed
⚠️ warning 🚫 stop

See them all here at emojipedia.org


Table

There are three ways to create a table.

  1. Grid table (recommended)
  2. Markdown
  3. HTML

Option 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


The MontrΓ©al Special
Fresh basil, mozzarella and olive oil Mozzarella di buffala (+$4), Anchovies (+ $1)
$21
Quattro Formaggi Mozzarella, Aosta Valley fontina, parmesan and spicy provolone
18$
The Meat Lover
Fresh basil, Prosciutto crudo, mozzarella and arugula
24$

Corporate services

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


The Blue plan includes:
  πŸŽ¨ Publish original content on 3 social networks
  πŸŽ¨ Once a day
  πŸŽ¨ 5 days a week
  πŸŽ¨ Billed each month
$1475

The Green plan includes:
     Publish original content on 3 social networks
       Twice a day
     5 days a week
     Billed each month
$2495

Without the whitespace using  :

The Green plan includes:
  Publish original content on 3 social networks
     Twice a day
  5 days a week
  Billed each month
$2495


Option 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

Description Price
Black top pomade $25
Fiber pomade $20
Free form cream $24
Matte pomade paste $24

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

Description Price
Black top pomade $25
Fiber pomade $20
Free form cream $24
Matte pomade paste $24

Here is an example with three columns.

Name Details Cost
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

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

Fistname Lastname City Age
Jimmy Row MontrΓ©al 26
Martine Nadal QuΓ©bec 32
Philippe Green Seatle 43
Mary Woodstock Edmunston 22

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 3) HTML table

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

Variation A

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94

Variation B

Item green $19
Item red $24
Item yellow $1500

Variation C

See all elements See all elements

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:

<i class="fas fa-camera-retro"></i>

you will see:

font-awesome-icon

properties

Change size:

Size: standard
Size: large
Size: 2x
Size: 3x
Size: 4x
Size: 5x

Rotation:

Animate:

 


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.

<iframe width="560" height="315" src="https://www.youtube.com/embed/NikceQYbaBY" frameborder="0" allowfullscreen></iframe>

Vimeo

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


Slides


SoundCloud

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.


Button

Everyone love buttons! Use them as a call to action.

button primary

Host your website

<a href="https://firepress.org/" class="button primary">Host your website</a>

button primary (with an icon)

Β Β Host your website

button

Host your website

button primary large

Host your website

Button small

Host your website

button primary fit

Host your website

button fit

Host your website

button primary fit small

Host your website

button fit small

Host your website

button primary disabled

Host your website

button disabled

Host your website


Anchor

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


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.


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.


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
{ | } ~

! " # $ % & β€˜ ( ) *
, + - . / 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
{ | } ~


Trial

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.

I got a question for you (three actually).

  • Does this Markdown style guide is missing something 😢?
  • Did you see a glitch πŸ™„?
  • Is there something to fix πŸ€’?

Please buzz us on Github or on Twitter and I'll update it!

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

β€” The FirePress Team


  1. https://en.wikipedia.org/wiki/Nelson_Mandela β†©οΈŽ

  2. https://en.wikipedia.org/wiki/Content β†©οΈŽ

  3. https://firepress.org/en/faq/ β†©οΈŽ