field-guide uses a language called Markdown to format text, just like all the rest of the Empress products
If you want to start a new page we recommend that you use the built in generator ember generate page "The next big feature - documented with Field Guide"
. This will create a file for you and setup the start of the metadata.
For now, though, let's run you through some of the basics of editing Markdown. You can see this post directly on github if you want to see all the Markdown we've used. (don't forget to click the Raw button to see the source).
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 also make headings using #
at the start of the line (multiple #
symbols 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)
If you want to add images to your field-guide app you can just drop them in the /public
folder, which you should see if you are running this locally!
Important Note: field-guide does not currently have automatic image resizing, so it's always a good idea to make sure your images aren't gigantic files before adding them to your project.
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:
- Crack the eggs over a bowl
- Whisk them together
- Make an omelette
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 excerpt 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 handle 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 sleek divider, anywhere you want it.
This should get you going with the vast majority of what you need to do in the editor, but if you're still curious about more advanced tips then check out the Advanced Markdown Guide