Using The Rookies Markdown Editor

Using The Rookies Markdown Editor

The Rookies editor allows you to add and format text, links, quotes, images and more. Use the toolbar below the editor to quickly access basic formatting options.

You can access the editor from any published post by adding /edit to the end of any published post URL.

The Rookies blog uses a language called Markdown to format text.

When you go to edit a post and see special characters and colours intertwined between the words, those are Markdown shortcuts which tell The Rookies what to do with the words in your document. The biggest benefit of Markdown is that you can quickly apply formatting as you type, without needing to pause.

Editor Toolbar

At the bottom of the editor, you'll find a toolbar with basic formatting options to help you get started as easily as possible. You'll also notice that there's a ? icon, which contains more advanced shortcuts.

TIP: Use the Side-by-Side layout. It splits your screen and displays markup on the left-column and the actual live view on the rigth-column.

For now, though, let's run you through some of the basics. You'll want to make sure you're editing this post in order to see all the Markdown we've used.

Formatting text

The most common shortcuts are of course, bold text, italic text, and hyperlinks. These generally make up the bulk of any document. You can type the characters out, but you can also use keyboard shortcuts.

CMD/Ctrl + B for Bold
CMD/Ctrl + I for Italic
CMD/Ctrl + K for a Link
CMD/Ctrl + H for a Heading (Press multiple times for h2/h3/h4/etc)

With just a couple of extra characters here and there, you're well on your way to creating a beautifully formatted story.

Inserting images

Images in Markdown look just the same as links, except they're prefixed with an exclamation mark, like this:

![Image description](/path/to/image.jpg)

computer

Most Markdown editors don't make you type this out, though. In The Rookies you can click on the image icon in the toolbar at the bottom of the editor, or you can just click and drag an image from your desktop directly into the editor. Both will upload the image for you and generate the appropriate Markdown.

Important Note: We don't currently have automatic image resizing, so it's always a good idea to make sure your images aren't gigantic files before uploading them to The Rookies.

Embedding Videos

You can pretty much embed any video. We recommend Youtube and Vimeo for best results. The site responsively resizes your videos to work, so all you need to do is use the standard embed options available at the site and just paste your code right into the article. No messing around!

<iframe src="https://player.vimeo.com/video/255145305?color=ffffff&title=0&byline=0&portrait=0" width="840" height="473" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Making lists

Lists in HTML are a formatting nightmare, but in Markdown they become an absolute breeze with just a couple of characters and a bit of smart automation. For numbered lists, just write out the numbers. For bullet lists, just use * or - or +. Like this:

  1. Crack the eggs over a bowl
  2. Whisk them together
  3. Make an omellete
    or
  • Remember to buy milk
  • Feed the cat
  • Come up with idea for next story

Adding quotes

When you want to pull out a particularly good except in the middle of a piece, you can use > at the beginning of a paragraph to turn it into a Blockquote. You might've seen this formatting before in email clients.

A well placed quote guides a reader through a story, helping them to understand the most important points being made

All themes handles blockquotes slightly differently. Sometimes they'll look better kept shorter, while other times you can quote fairly hefty amounts of text and get away with it. Generally, the safest option is to use blockquotes sparingly.

Dividing things up

If you're writing a piece in parts and you just feel like you need to divide a couple of sections distinctly from each other, a horizontal rule might be just what you need. Dropping --- on a new line will create a sleak divider, anywhere you want it.


Advanced Tips

Special formatting

As well as bold and italics, you can also use some other special formatting in Markdown when the need arises, for example:

  • strike through
  • highlight
  • escaped characters

Writing code blocks

There are two types of code elements which can be inserted in Markdown, the first is inline, and the other is block. Inline code is formatted by wrapping any word or words in back-ticks, like this. Larger snippets of code can be displayed across multiple lines using triple back ticks:

.my-link {
    text-decoration: underline;
}

Full bleed images

One neat trick which you can use in Markdown to distinguish between different types of images is to add a #full value to the end of the source URL, and then target images containing the hash with special styling. For example:

![Image description](/path/to/image.jpg#full)

walking

Footnotes

The quick brown fox[1] jumped over the lazy dog[2].

To make these work, it take two simple steps

  1. Add [^1] directly next to your linking word eg: fox[^1]
  2. Then add the following text anywhere on the page. It will automatically add the footnotes at the base of the page.
[^1]: Foxes are red
[^2]: Dogs are usually not red

  1. Foxes are red ↩︎

  2. Dogs are usually not red ↩︎