Markup with Markdown!

Posted Sep 13, 2009. Filed under Software.

For quite a while I've been looking for a simple web-based text editor for use with general web forms (comments, contact etc.) and a CMS I'm currently working on. There are a few good full-featured editors out there:, to name a couple, but I was not able to find a simple, light-weight editor. Then I stumbled upon Markdown.

What is Markdown?

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML). -

So what does that mean? Basically, using the Markdown syntax, users with little or no HTML knowledge can make text bold, italic, insert links and lots more. Behind the scenes it looks like this:

   ... **bold**, *italic*, insert [links][5] ...

Confused? It's not as bad as it sounds. Using a markdown editor, such as WMD Editor, allows for easy creating and editing, no need to even remember the syntax! WMD Editor has the typical buttons for bold, italic, links and images, so formatting text is simple. It's an excellent light-weight option, comprised of only 4 javascript files.

So how do I use it on my site?

Here's all you need to know to get up and running with a markdown text editor on your site.

  1. Download the WMD Editor
  2. Extract the contents of the downloaded zip file to a publicly accessible folder on your web server.
  3. Include the javascript file before the ending body tag (</body>) on the page you would like the editor to appear on:

    <script type="text/javascript" src="wmd/wmd.js"></script>

That's it! WMD Editor will automatically turn the first <textarea> tag into the editor. Submitting the form turns the text in that textarea into valid XHTML.

Even More!

Want to use the WMD Editor with your Wordpress Blog? No problem, check out PHP Markdown. Excellent instructions are provided on the PHP Markdown site for integrating it with Wordpress. What about integration with CodeIgniter? Simple! Grab the PHP Markdown file (link above), extract it to the 'helpers' folder in your CodeIgniter installation and rename it to 'markdown_helper.php'. Then load the helper:


and run your text through the function before displaying it:

$myHTML = Markdown($myText);

So there you have it, a quick introduction to text formatting/editing using Markdown and the WMD Editor. To see it in action, check out the demo page on

Further Resources

    The project page and everything you wanted to know about Markdown.
  • WMD Editor
    The WMD Markdown editor web site.
  • PHP Markdown
    A PHP implementation of the Markdown markup language.
  • MarkItUp!
    An excellent Markdown editor built on the jQuery library.
Filed under Software. Tags: codeigniter, markdown, php, text editor, wordpress
Posted Sep 13, 2009 by Dan | 1 comments
Like this post? Share it:                  


January 11, 2010 at 3:21pm

Actually,good post. thx

Leave A Comment

name *
email *

comment *

Preview Comment
Submit Comment!

GUIDELINES: I reserve the right to delete off-topic, inflammatory, or anonymous comments. Get your own picture next to your comment with a Gravatar account.