Style Guide
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)
- 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
- Go to play-with-ghost
- Select a live demo like FirePress Klimax1
- Click the button
admin panel - Log in with these credentials
relations@firepress.org / firepress1 - In Stories' section, look for the post
Style guide - 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:
- The dating app Tinder
- The analytic app Fullstory
- StackOverflow and Discourse founder's blog Codinghorror
- Jannis is a cool coder blog
- 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.
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.
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.
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)
| 🔥 📰 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 on getemoji.com.
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/.
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 🔥📰
