Ayman Hourieh

I find Markdown to be a more readable and usable alternative to XHTML/CSS for formatting text, and I use it to format my articles at this Django-powered blog. When implementing syntax highlighting for code blocks within text, I searched for existing solutions and found many approaches that were too complicated and had shortcomings. After more research, I realized that syntax highlighting works out of the box in Django if you have a recent version of Markdown.

Here are the required steps to enable syntax highlighting in your Django application. First, install python-markdown version 2.0+ and python-pygments. Pygments is a syntax highlighter written in Python. Markdown 2.0+ has an extension system and comes with a syntax highlighting extension that uses Pygments. This extension is called CodeHilite. To use it, add the following to a Django template:

{% load markup %}
{{ text|markdown:'codehilite' }}

Next, you need to create a stylesheet that defines colors for syntax highlighting. To do so, run the following command:

$ pygmentize -S default -f html -a .codehilite > code.css

Include code.css in your template.

Now, to create a syntax-highlighted code block, indent the block by 4 spaces and declare the language of the block at the first line, prefixed by ::: (3 colons). This is better explained by example. The following text:

:::python
print 'Hello, World.'

Produces the following syntax-highlighted code block:

print 'Hello, World.'

Keep in mind that Markdown allows embedded HTML elements by default. You shouldn't enable this if the source of the text is untrusted. To disable HTML elements, use the following in your Django template instead:

{% load markup %}
{{ text|markdown:'safe,codehilite' }}

Pygments supports a long list of languages and styles. Be sure to check the demos too.

In the first section of this article I'll demonstrate how to create a drag/drop portal in a few lines of JavaScript code, using the excellent Prototype and Scriptaculous JavaScript libraries. In the second section, I'll explain how to integrate this code into Drupal as a server backend for storing user settings. You may check the frontend here (tested with Firefox 1.5, IE6, and Opera 8.5), and download a reusable JavaScript Portal class and Drupal module for the backend at the bottom of this post.

I wrote two CSS debugging bookmarklets to ease the pain of HTML/CSS development under Internet Explorer. They mimic two commonly-used features in the Web Developer extension for Firefox. The first bookmarklet outlines block-level elements, and the second displays ID and class information. Although that such functionality already exists in Web Developer and other bookmarklets, I couldn't find anything that is compatible with Internet Explorer and works offline (What I found were bookmarklets that relied on including remote stylesheets).

To test a bookmarklet, simply click its link. To use it, drag and drop the link to your Links/Bookmarks toolbar, and press the resulting button when you want to activate the associated functionality. These bookmarklets were tested in Firefox 1.5, Internet Explorer 6.0 and Opera 8.5. I haven't had the chance yet to test with KHTML/Safari, but I think they should work because the code is standards-complaint.

• Outline block elements
• Display ID and class information

Anyone who's worked with HTML/CSS for a while knows that Internet Explorer support for standards is lacking to say the least. It has many obscure bugs and compatibility issues. Firefox is my platform of choice for web development because of its compliance with standards and the plethora of development and debugging tools and extensions available (most notably Web Developer and FireBug). Once coding is finished under Firefox, I validate the code and test with other browsers (IE, KHTML/Safari and Opera). Most of the time the code works in Opera and KHTML without any issues; however, IE often produces problems, and while working around them, I used to wish I had Web Developer's features for IE. Now I have these bookmarklets. They took me about 5 minutes to write and test under Firefox, but IE silently failed to produce the desired results until I did another hour of work. I adopted Web Developer's styles for outlined elements and ID/class information for consistency. And now I'm sharing them here hoping that others will find them useful as well.

Those interested in web development may have heard about the Model-View-Controller software pattern by now. This pattern emphasizes on separation of application's data model, UI (view), and control logic. The concept itself isn't new and has been around since 1979, but recently there have been many successful implementations of the pattern in the domain of web development.

While exploring the available MVC frameworks, I decided to learn TurboGears, which is a Python framework. I viewed many webcasts and documents, then decided to practice my newly-gained knowledge by writing a basic del.icio.us-like social bookmarking application in TurboGears. Now I'm documenting my work as a tutorial, hoping that other TurboGears newcomers would find something useful in it.

A while ago I came across the Python Challenge. It is a series of programming challenges that require writing short programs in order to advance through levels. The creator(s) of the site put a lot of effort into it. The challenges are a lot of fun to solve, and the whole thing is very addictive.

If you are interested in learning the Python programming language, I suggest that you read the tutorial and start solving the challenges. It will be a great learning experience. If you do know Python, the challenges still have a lot to offer on the educational and fun fronts. It will make you explore a variety of libraries and programming domains.

Most of the levels can be solved with other programming languages as well. However, solving them in Python makes the programmer experience the beauty of Python, its power, and ease of use.

To sum up, if you enjoy programming, the Python Challenge is for you. I don't remember having so much fun on a website in a long time.

Subversion is a version control system that is widely used by many Open Source projects such as Apache and GCC. Subversion started as a project to implement features missing in CVS. Subversion commands are very similar to CVS. It's very easy to switch for CVS users. Most of the time it's a matter of replacing cvs with svn. The following is a tutorial and cheat-sheet to help you get up and running in Subversion quickly.