Styleguide

You're in! Nice. We've put together a little post to introduce you to the Ghost editor and get you started. Go ahead and edit this post to get going and learn how it all works!

Getting Started

Writing in markdown is really easy. In the left hand panel of Ghost, you simply write as you normally would. Where appropriate, you can use formatting shortcuts to style your content. For example, a list:

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

or with numbers!

  1. Remember to buy some milk
  2. Drink the milk
  3. Tweet that I remembered to buy the milk, and drank it

Want to link to a source? No problem. If you paste in 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. Neat.

What about Images?

Images work too! Already know the URL of the image you want to include in your article? Simply paste it in like this to make it show up:

The Ghost Logo

Not sure which image you want to use yet? That's ok too. Leave yourself a descriptive placeholder and keep writing. Come back later and drag and drop the image in to upload:

Quoting

Sometimes a link isn't enough, you want to quote someone on what they've said. It was probably very wisdomous. Is wisdomous a word? Find out in a future release when we introduce spellcheck! For now - it's definitely a word.

Wisdomous - it's definitely a word.

Working with Code

Got a streak of geek? We've got you covered there, too. You can write inline code blocks really easily with back ticks. Want to show off something more comprehensive? 4 spaces of indentation gets you there.

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

Ready for a Break?

Throw 3 or more dashes down on any new line and you've got yourself a fancy new divider. Aw yeah.


Advanced Usage

There's one fantastic secret about Markdown. If you want, you can write plain old HTML and it'll still work! Very flexible.

That should be enough to get you started. Have fun - and let us know what you think :)


Body Copy

Lorem ipsum dolor sit amet, test link adipiscing elit. This is strong. Nullam dignissim convallis est. Quisque aliquam. This is emphasized. Donec faucibus. this is strongly emphasized. Nunc iaculis suscipit dui. 53 = 125. Water is H2O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. The New York Times (That's a citation). Underline. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. To copy a file type COPY <var>filename</var>. Dinner's at 5:00. Let's make that 7. This text has been struck. This text has been marked.

This footnote is made with the small element.


Horizontal Rules

We sometimes use the hr element to separate sections of the page, so we hide them using CSS. However, we sometimes want to use them inline to separate blocks of content, so we should turn them back on, like so.


Headings

H1: The arsonist has oddly shaped feet

H2: The human torch was denied a bank loan

H3: 60% of the time, it works every time

H4: Jackdaws love my big sphinx of quartz

H5: The five boxing wizards jump quickly
H6: The quick brown fox jumps over the lazy dog

List Types

Definition List

Definition List Title
This is a definition.
This is an alternate definition.
Definition
An exact statement or description of the nature, scope, or meaning of something: our definition of what constitutes poetry.

Ordered List

  1. List Item 1
  2. List Item 2
    1. Nested List Item A
    2. Nested List Item B
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
    • Nested List Item A
    • Nested List Item B
  • List Item 3

Tables

  Enterprise Enterprise D Galactica
Captain James Kirk Jean-Luc Picard William Adama
XO Spock William Riker Saul Tigh
Doctor Leonard McCoy Beverly Crusher Doc Cottle
Engineer Montgomery Scott Geordi LaForge Galen Tyrol

Preformatted Text

Typographically, preformatted text is not the same thing as code. Sometimes, a faithful execution of the text requires preformatted text that may not have anything to do with code. For example:

“Beware the Jabberwock, my son!
The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
The frumious Bandersnatch!”
! " # $ % & ' ( ) * + , - . /
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 { | } ~

Code

Code can be presented inline, like <?php bloginfo('stylesheet_url'); ?>, or within a pre block. Because we have more specific typographic needs for code, we'll specify Consolas and Monaco ahead of the browser-defined monospace font.

.container {
  float: left;
  margin: 0 -240px 0 0;
  width: 100%;
}

You can also get syntax highlighting by adding class="language-XXXX" to your code element, like so:

<pre >  
  <code class="language-css">
    p {
      color: red
    }
  </code>
</pre>  

CSS Formatting:

pre[class*="language-"]::selection, pre[class*="language-"]::selection,  
code[class*="language-"]::selection, code[class*="language-"]::selection {  
  text-shadow: none;
  background: #b3d4fc;
}

@media print {
  code[class*="language-"],
  pre[class*="language-"] {
    text-shadow: none;
  }
}

JavaScript Formatting:

for (var i = 1; i <= 100; i++) {  
    if (i % (3 * 5) === 0) {
        console.log('FizzBuzz');
    } else if (i % 3 === 0) {
        console.log('Fizz');
    } else if (i % 5 === 0) {
        console.log('Buzz');
    } else {
        console.log(i);
    }
}

And many more!


Figures

Figures are usually used to refer to images:

Figure Heading

This is a placeholder image, with supporting caption.

Here, a part of a poem is marked up using figure:

‘Twas brillig, and the slithy toves
Did gyre and gimble in the wabe;
All mimsy were the borogoves,
And the mome raths outgrabe.

Jabberwocky (first verse). Lewis Carroll, 1832-98

Blockquotes

Let's keep it simple. Be sure to style the citation.

Good afternoon, gentlemen. I am a HAL 9000 computer. I became operational at the H.A.L. plant in Urbana, Illinois on the 12th of January 1992. My instructor was Mr. Langley, and he taught me to sing a song. If you'd like to hear it I can sing it for you.
HAL 9000, 2000: A Space Odyssey

And here's a bit of trailing text.