What is this Markdown editor?

In FunnelWeb you may have noticed that we don't use a standard WYSIWYG editor like TinyMCE or ckEditor.

This is a deliberate choice to provide a simplistic, yet powerful, editing experience.

Markdown

We use in FunnelWeb an editor style called Markdown which is something that you may be familiar with if you've worked with GitHub (which uses a derivative).

Essentially this is a way of structuring a text document with a syntax that is a bit wiki-esque but produces good HTML at the end.

Generally speaking, the features that are provided from more complex WYSIWYG editors are redundant. Seriously, who needs a table on a blog? It's not 1995 people! And after all, FunnelWeb is a coder's blogging platform; we don't need to pretty looking editor interface, notepad is fine for blogging in!

Markdown is a great way to handle the removal of existing formatting, like what happens when you copy/paste from Microsoft Word. Since it isn't storing HTML then you don't have any of the "Word HTML" clogging up your website.

The Syntax

As mentioned above, the Markdown syntax is a little bit like wiki syntax: you put special items in certain places and it will be treated in a special way.

The full syntax can be found on the Markdown site, but here are a few that are really handy.

Headings

Markdown can produce the full range of HTML header tags, h1 to h5, and this is done by putting # tags at the start of the line, with the number of # tags indicating which header level you want:

# I'm a h1

I'm a h1

## And I'm a h2 :)

And I'm a h2 :)

And so on...

Text emphasis

Sometimes you really need to be able to emphasize different parts of your text, and this is done by using * wrapping what you want to emphasize. If you use one * you'll get italics, if you use two * you'll get bold.

I'm *italics* and he's **bold**

PS: Keyboard shortcuts also work, Ctrl+I or Ctrl+B depending on what you want. ;)

Code

FunnelWeb is a coder's blog engine, so you're going to want to post code, right? Right.

There are two ways you can do code:

You can do it in line of a piece of text. this is done by using the ` character, you know, that one to the left of the 1 button on your keyboard? Yeah, that's it.

But if you're writing larger chunks of code then you'll want to use 4 spaces at the start of the line:

With 4 spaces
I become a code block

Lists

If you want to put out lists

  • You can use a * followed by a space
    • And to indent just put an additional space before the *

But if you want numbers?

  1. Just start the line with a number
  2. You don't have to uniquely number each line
    1. It's smart enough to work that shit out

PS: Again keyboard shortcuts work here, Ctrl+O or Ctrl+U if you want an ordered or unordered list

Posted by: The FunnelWeb Team
Last revised: 30 Nov, 2010 08:39 AM History

Comments

No comments yet. Be the first!

No new comments are allowed on this post.