01: Markdown

Edit

Reditype uses Markdown to help format your content. This means that editing rich content can be a simple matter of starting with plain text, then by applying some very simple syntax rules. To make it even better, your text remains clean, easy to read and “clutter” free.

Lets jump in with a quick example:

1. My first list item
 
   I can even have **multiple paragraphs** in list - _just remember to indent properly_.
 
 2. My second list item

That piece of Markdown would produce the following:

<ol> 
  <li>
    <p>My first list item</p>
    <p>I can even have <strong>multiple paragraphs</strong> in 
      list - <em>just remember to indent properly</em>.</p>
  </li> 
  <li>
    <p>My second list item</p> 
  </li> 
</ol>

Markdown can save a lot of time and sanity.

Headings

To create headings in there range of sizes you have a couple options.

Firstly, for h1 and h2 you can use the following syntax:

This is a heading 1
===================
 
This is a heading 2
-------------------

This syntax only accommodates for h1 and h2 only. As an alternative, you can use a “#” (hash) syntax:

# This is a heading 1
## This is a heading 2
### This is a heading 3
#### This is a heading 4
##### This is a heading 5
###### This is a heading 6

To help navigate large pages anchors can be used in conjunction with headings.

## This is a heading with an ID {#my-heading-id}
 
This is a [link](#my-heading-id) the the heading anchor.

Paragraphs and Line Breaks

To format paragraph block using Markdown, simply place and empty line between two paragraphs. Soft line breaks can be achieved by placing two empty spaces at the end of a line, then continuing on the next line.

This is the first paragraph...
 
An empty line separates this paragraph from the one above.
 
Two empty spaces at the end of a line...  
then continuing on the next line will create a soft line break.

The simplest link type would be the inline sort:

A [simple inline link](http://example.com/ "Link Title") in a small piece of text. 
link.

As an alternative, especially useful if you have a large number of links in a page, reference linking can make things neater. It allows you to keep a separate list of links, outside the text which is referencing it.

Here is a short [paragraph][1] to demonstrate reference [linking][2] - [Reditype][].
 
   [1]: http://en.wikipedia.org/wiki/Paragraph "Wikipedia on paragraphs"
   [2]: http://en.wikipedia.org/wiki/Hyperlink "Wikipedia on Hyperlinks"
   [Reditype]: http://www.reditype.com "Reditype"

The above example demonstrates how reference linking can help keep text blocks clean.

Italic and Bold

Emphasising selected text to bold can be achieved by the following combinations of * (asterisks) and _ (underscore).

When these character wrap text, the following formatting rules are applied:

Markdown Effect Example
*single asterisks* italic single asterisks
_single underscore_ italic single underscore
**double asterisks** bold double asterisks
__double underscore__ bold double underscore
***triple asterisks*** italic and bold triple asterisks
___triple underscore___ italic and bold triple underscore

Images

Images can be added in much the same way that links are added.

<div class="My Image" markdown=1><div class="rt-generic-inner" markdown=1>(/some/place/my-image.jpg)
 
<div class="My Image" markdown=1><div class="rt-generic-inner" markdown=1>(/some/place/my-image.jpg "Optional title")

Note: We extend the basic image link tag in Markdown with some advanced pieces.

Horizontal Rules

To create a horizontal rule in your Markdown text, simply place three or more consecutive “-” (hyphens), “*” (asterisks) or “_” (underscores) on a line by themselves. Any of the following examples would produce a horizontal rule:

---
***
- - -
--------------------
********************

Lists

Lists are one of the basic text devices. Markdown supports ordered and unordered lists.

Ordered list:

1. My first list item.
2. My Second list item.

Unordered list:

* My first list item.
* My Second list item.

Definition lists can be constructed via the following syntax:

Swift
:   adjective - fast, happening quickly or promptly.
:   noun - a swift-flying insectivorous bird.
 
Speed
:   rapidity of movement or action.

Footnotes

Footnotes provide a additional reference text, which sits outside the main body of text. For each footnote, a linked number is generated. The link points to a footnote area at the bottom of the page (see the footer link to the right).1 But all this is managed by Markdown - you only have to place the following syntax in your Markdown text:

Good things come in threes right?[^1]
 
[^1]: An old principle suggesting poetic balance in series of three.

In Page Anchors

For long documents, you might like to include in-page linking to a specified anchor. Anchor ID’s can be added using the following syntax:

## Introduction            {#introduction}

## More Details            {#moredetails}

Anchors can then be referenced within a page:

Read [more details](#moredetails) for a better understanding.

Setting the id attribute will work only with headers for now.

Abbreviation

When an abbreviation such as HTML is used, an additional definition can be set. Simply place the definition somewhere in the markdown text:

The HTML abbreviation here will be automatically "defined".
 
*[HTML]: Hyper Text Markup Language

And all instances of the the abbreviation will be given a special definition when the mouse scrolls over. Try it on this: HTML.

Quoting

To add a block of quoted text, a single “>” (greater than) is used at the start of each line. You can even nest quotes - take a look at this example:

Jenny said it best:
 
> I like apples, but when I hear a statement like:
>
> > apples are the best fruit
>
> I wonder about the sadly forgotten orange.

Tables

Simple table structures can be easily defined with a simple mix of “-” (hyphens) and “|” (pipes).

| Heading 1.        | Heading 2.        |
|-------------------|-------------------|
| Item 1.           | True              |
| Item 2.           | False             |

This will give you a neat and tidy table with headers.

Syntax Highlighting

If you are a developer and would like to have your examples displayed with syntax highlighting, Geshi has been integrated into the Markdown filter.

To trigger a highlighted block, use a tag and language attribute:

[ code php]
<?php echo 'hello world!'; ?>
[ /code]

While a huge number of languages are supported, here are some common favourites: php, ruby, java, javascript, html4strict, xml, css.

Inline HTML

For trickier situations, reverting to segments of HTML is always a possibility. HTML can embedded directly into Markdown.

Some simple **Markdown** test...
 
<div class="special-class" markdown="1">
  Markdown can be **nested** inside HTML - just take note of the
  special "markdown" attribute in the div tag.
</div>

Take note in the example above of the special attribute added to the div - it activates Markdown rendering internally in that block level element.


  1. If you’re curious as to why footnotes look the way they do, John Gruber explains his decision process.