Markdown is a way to format your text to add bold and italic text, images, headings and a few other things, without having to use HTML.

Bold and italic text

To create italic text, surround one or a few words with stars:

This is how you create *italic text*.

To create bold text, surround one or a few words with double stars:

This is how you create **bold text**.

If you have to, you can make your text both bold and italic:

This is how you create ***bold and italic text***.

A bullet list

Create bullet lists using stars:

* Item 1  
    * Item 2  
    * Item 3

Will look like this:

You can also use plus (+) or minus (-) instead of a star.

A numbered list

Create a numbered lists using number and dot:

1. Item 1  
    2. Item 2  
    3. Item 3

Will look like this:

  1. Item 1
  2. Item 2
  3. Item 3

You can also use plus (+) or minus (-) instead of a star.

Creating links

Combine brackets and parenthesis to create links in the text. It's quite simple:

Here's [a great search engine](http://www.google.com). It'll float your boat.

Will look like this:

Here's a great search engine. It'll float your boat.

Headers

Markdown has support for different levels of headers using the hash sign (#):

# This is the title
    Here's some very good boiler plate text. I don't even know what a boiler is, even less a plate.

    ## This is the subheader
    Subheaders are awesome. Even better than you think.

    ### This is the third level header.
    And so on.

Will look like this:

This is the title

Here's some very good boiler plate text. I don't even know what a boiler is, even less a plate.

This is the subheader

Subheaders are awesome. Even better than you think.

This is the third level header.

And so on.

When converted to HTML, the first level header will be a <h1> element, a third level header will be a <h3>, etc. At SimpleEditions there's only one first level header per page, namely the title (in this case, it's "Markdown: An introduction", a bit further up). Therefore, you typically always begin with a second level header (## Like this) when you write your tutorial text.

Quotes

Add a greater-than sign (>) in front of anything you are quoting, and the text will be moved slightly towards the middle.

> "Never increase, beyond what is necessary,   
    > the number of entities required to explain anything."  
    > – *William Ockham*

Will look like this:

"Never increase, beyond what is necessary,
the number of entities required to explain anything."
William Ockham

Note how the name, William Ockham, is surrounded by stars to make it render in italic text.

Further reading

This tutorial only cover the basics of Markdown, but there are a few more tricks available.

Steps for to add a page.

Go to the pages page by clicking on "Pages" in the top navigation

<%= image_tag "burp/adding-a-page-1.png", :class => "img-polaroid" %>

Click the "Add page" link

<%= image_tag "burp/adding-a-page-2.png", :class => "img-polaroid" %>

Enter the Title of the page and its Path and then click the "Save" button. The Path is the address to the page. http://yourdomain.com/latest-news

<%= image_tag "burp/adding-a-page-3.png", :class => "img-polaroid" %>

You can now find the new page in the pages list.

<%= image_tag "burp/adding-a-page-4.png", :class => "img-polaroid" %>
.

Steps for removing a page.

Go to the pages page by clicking on "Pages" in the top navigation

<%= image_tag "burp/remove-a-page-1.png", :class => "img-polaroid" %>

Click on the page you wish to remove. In the example we click on "News"

<%= image_tag "burp/remove-a-page-2.png", :class => "img-polaroid" %>

Click the "Remove" button.

<%= image_tag "burp/remove-a-page-3.png", :class => "img-polaroid" %>

You can see that the "News" page is no longer in the list.

<%= image_tag "burp/remove-a-page-4.png", :class => "img-polaroid" %>

Steps for changing the title and path of a page.

Go to the pages page by clicking on "Pages" in the top navigation

<%= image_tag "burp/change-page-title-1.png", :class => "img-polaroid" %>

Click on the page you wish to change. In the example we click on "News"

<%= image_tag "burp/change-page-title-2.png", :class => "img-polaroid" %>

Enter the new title and path and click the "Save" button.

<%= image_tag "burp/change-page-title-3.png", :class => "img-polaroid" %>

You can see in the list that the page title and path has changed.

<%= image_tag "burp/change-page-title-4.png", :class => "img-polaroid" %>

Steps for adding a page to the menu.

Go to the "Menu" page.

<%= image_tag "burp/add-page-to-menu-1.png", :class => "img-polaroid" %>

Drag the page you wish to add by pressing down the mouse button on the green "Drag" button and hold it down while you move the mouse up to where you wish to drop it

  1. <%= image_tag "burp/add-page-to-menu-2.png", :class => "img-polaroid" %>
  2. <%= image_tag "burp/add-page-to-menu-3.png", :class => "img-polaroid" %>
  3. <%= image_tag "burp/add-page-to-menu-4.png", :class => "img-polaroid" %>
  4. <%= image_tag "burp/add-page-to-menu-5.png", :class => "img-polaroid" %>

Steps for removing a page from the menu.

Go to the "Menu" page.

<%= image_tag "burp/remove-page-from-menu-1.png", :class => "img-polaroid" %>

Click on the link/page you wish to remove.

<%= image_tag "burp/remove-page-from-menu-2.png", :class => "img-polaroid" %>

Click on the "Remove" button.

<%= image_tag "burp/remove-page-from-menu-3.png", :class => "img-polaroid" %>

Now you can see that they page is no longer in the menu.

<%= image_tag "burp/remove-page-from-menu-4.png", :class => "img-polaroid" %>

Steps for adding a group to the menu.

Go to the "Menu" page.

<%= image_tag "burp/add-group-to-menu-1.png", :class => "img-polaroid" %>

Click on "Add group".

<%= image_tag "burp/add-group-to-menu-2.png", :class => "img-polaroid" %>

Enter the name to be shown in the menu. Then click the "Create" button to create the new group.

<%= image_tag "burp/add-group-to-menu-3.png", :class => "img-polaroid" %>

You can now see the new group in the menu.

<%= image_tag "burp/add-group-to-menu-4.png", :class => "img-polaroid" %>

Steps for chaging the order of the menu.

Add a link to group

Drag and drop the link on the group.

  1. <%= image_tag "burp/add-link-to-group-1.png", :class => "img-polaroid" %>
  2. <%= image_tag "burp/add-link-to-group-2.png", :class => "img-polaroid" %>
  3. <%= image_tag "burp/add-link-to-group-3.png", :class => "img-polaroid" %>

Move link to the bottom

Drag and drop the link to the bottom of the menu.

  1. <%= image_tag "burp/move-link-to-bottom-of-menu-1.png", :class => "img-polaroid" %>
  2. <%= image_tag "burp/move-link-to-bottom-of-menu-2.png", :class => "img-polaroid" %>
  3. <%= image_tag "burp/move-link-to-bottom-of-menu-3.png", :class => "img-polaroid" %>

Enter page edit mode

Go to the "Pages" page.

<%= image_tag "burp/enter-page-edit-mode-1.png", :class => "img-polaroid" %>

Click "Go to page" on page you wish to edit.

<%= image_tag "burp/enter-page-edit-mode-2.png", :class => "img-polaroid" %>

Press Ctrl + Esc on the keybord to open the admin bar.

<%= image_tag "burp/enter-page-edit-mode-3.png", :class => "img-polaroid" %>

You can now see the admin bar at the bottom of the page.

<%= image_tag "burp/enter-page-edit-mode-4.jpg", :class => "img-polaroid" %>

Change the text

Click the "Edit text" button.

<%= image_tag "burp/change-the-text-1.png", :class => "img-polaroid" %>

Enter the some text. Its a Markdown texteditor so it understand both Markdown syntax and HTML syntax. Both are equaly valid to use.

<%= image_tag "burp/change-the-text-2.png", :class => "img-polaroid" %>

Click the "Save" button.

<%= image_tag "burp/change-the-text-3.png", :class => "img-polaroid" %>

Add an image

Click the "Pictures" button.

<%= image_tag "burp/add-image-1.png", :class => "img-polaroid" %>

Drag and drop the image you wish to add.

  1. <%= image_tag "burp/add-image-2.jpg", :class => "img-polaroid" %>
  2. <%= image_tag "burp/add-image-3.jpg", :class => "img-polaroid" %>
  3. <%= image_tag "burp/add-image-4.jpg", :class => "img-polaroid" %>

Click the "Save" button.

<%= image_tag "burp/add-image-5.png", :class => "img-polaroid" %>

Remove an image

Click the "Pictures" button.

<%= image_tag "burp/remove-image-1.png", :class => "img-polaroid" %>

Drag and drop the image you wish to remove onto the "Drop here to remove" area.

  1. <%= image_tag "burp/remove-image-2.jpg", :class => "img-polaroid" %>
  2. <%= image_tag "burp/remove-image-3.jpg", :class => "img-polaroid" %>
  3. <%= image_tag "burp/remove-image-4.jpg", :class => "img-polaroid" %>
  4. <%= image_tag "burp/remove-image-5.jpg", :class => "img-polaroid" %>

Click the "Save" button.

<%= image_tag "burp/add-image-5.png", :class => "img-polaroid" %>