Markdown in django

2 minute read Published: 2010-08-01

Last week, I added markdown support to a little blog engine I wrote for a django tutorial. And well, I accomplished it in minutes! I like markdown because is really easy to write and generates amazing html. It is presented here and the syntax is explained neatly in Stack Overflow, and they use it, too.

My approach was really simple: I wanted to write the posts in markdown with a preview (like in the question edition in Stack Overflow), store the posts in markdown and display them in html.

So, the steps:

  1. Install markdown (get it from the cheese shop ), if you use app engine, you'll have to copy the markdown folder to your project root.
  2. Add django.contrib.markup to your INSTALLED_APPS
  3. With your content stored as markdown, to show it in templates, you'll simply have to add tag withload markup at the beginning of your templates and use the markdown filter (like in entry.body|markdown to show entries stored in markdown as html).
  4. Download showdown.js and copy the minified js to your static files folder. (you can get it from the project homepage)
  5. In a template for edition, let's say you have a textarea with id id_body and want to show the preview. Well, add a div -let's call it preview and the following javascript (added somewhere in your <head>.
$(function(){
        var converter = new Showdown.converter();
    	function update_description_preview(){
        	$('#preview').html(converter.makeHtml($("#id_body").val()));
    	}
    	$("#id_body").keyup(function(){
        	update_description_preview();
    	});	
});

And that's it, you have markdown in your app! Don't make humans edit raw html ever again!

-More info can be found here