Chicken Scratches

How I edit Django templates

NOTE: This post is pretty old, and I no longer use mmm-mode for Django template editing.
This post and this post are still accurate, though.

Every programmer has their favorite editor and mode of
working. Some people have more than one. For example, I use
Microsoft Visual Studio when editing .NET code, DrScheme for editing
Scheme code, and XEmacs for pretty much everything else.

This post is about how I use XEmacs for editing Django template
files, in the hopes that others may find this useful.

The “Other” One True Editor

It’s rare that people will get passionate about something as
pedestrian as a way of editing plain text, but the brief history
of the internet is awash with flamewars and heated discussions
with titles like “Emacs vs. XEmacs,” “Emacs vs vi,” and so
on. I’m not about to go into the relative merits, but the fact
that certain editors pop up time and time again in these debates
must mean there is something special about them.

Early on in my college education I started using Emacs because
it was all that was available on the school’s servers. (Well,
that or vi, but vi was and still is black-magic to me.) I got
over the learning curve, and now I’m hooked.

At some point, I switched from Emacs to XEmacs, for reasons I
can’t remember. At the time, it had some feature which was to me
essential. That reason no longer applies, but neither have I had
a reason to switch back. These tips may apply even if you use
GNU Emacs, but they’ve only been tested in XEmacs.

My current setup is Xemacs 21.4 (patch 20), running on Windows
XP. *gasp!* Yes, I use Windows for Django development. Shocking,
I know. I have my reasons. In any case, these tips should work
equally well with XEmacs on other platforms.

Multiple Major Modes

I won’t include a full XEmacs tutorial here, since there is
already plenty of info on the web about it. The key point
is that there is a “major mode” for each programming
environment. There is a Python mode, a Java mode, and so
on. Django templates tend to combine more than one language in a
file, so that’s when the mmm library comes in handy. It
stands for “multiple major modes,” and it turns out to be just
exactly what we need. We can have html-mode for the HTML parts,
JavaScript-mode for the JavaScript parts, css-mode for embedded
CSS, and python-mode for the Django template filters and tags.

Which HTML mode?

As often happens in the world of Free Software, there are
several options to choose from when setting up HTML editing in

  • html-mode. This has the fullest support for HTML
    parsing and validation. The problem is, when dealing with
    templates, the HTMl will often not validate, so all kinds of
    error messages show up.
  • sgml-mode. This is a more general mode for SGML (of
    which XML and HTML 4 are subsets).
  • xml-mode. SGML mode specialized for XML.
  • hm–html-mode. I have no idea what the HM stands for,
    but this is a lightweight HTML mode, with basic syntax
    highlighting and indentation.

I use html-mode for full-fledged HTML documents, and
hm–html-mode for templates. So that XEMacs can tell the difference,
I use the suffix “.tmpl” for template files.

One problem

I did run into some problems getting mmm-mode to work with
XEmacs. It turns out the version of mmm-mode that is distributed
with the XEmacs package system is ancient – from 2001. I had to
download the newer version of mmm-mode and unzip it into my site-packages directory.

How it looks

Here’s a screenshot of me editing an example Django template
(borrowed from my beta-registration Django app). I’ve chosen
fairly bright colors to make the syntax highlighting more
obvious, but that’s all customizable. Notice how the Django tags
and variables are easy to find in the file. (Click on the image
for a larger size.)

My initialization file

Here is the subset of my ~/.xemacs/init.el file dealing with
setting up mmm-mode for XEmacs. I hope someone finds this
useful. Let me know if you do, or if you encounter problems.

;; CSS-Mode
(autoload 'css-mode "css-mode" "Mode for editing CSS files" t)
(add-to-list 'auto-mode-alist '("\\.css\\'" . css-mode))
(setq cssm-indent-function #'cssm-c-style-indenter)
(setq cssm-indent-level '2)

;; Use hm--html-mode for files that end in .tmpl (Django templates)
(add-to-list 'auto-mode-alist '("\\.tmpl\\'" . hm--html-mode))

;; Multiple Major Modes.
(require 'mmm-vars)
(require 'mmm-mode)
(require 'mmm-sample)
(setq mmm-global-mode 'maybe)

;; Custom MMM classes for Django templates
    :submode python-mode
    :face mmm-declaration-submode-face
    :front "{%"
    :back "%}"
    :include-front t
    :include-back t)))

    :submode python
    :face mmm-output-submode-face
    :front "{{"
    :back "}}"
    :include-front t
    :include-back t)))

(mmm-add-mode-ext-class nil "\\.tmpl\\'" 'embedded-css)
(mmm-add-mode-ext-class nil "\\.tmpl\\'" 'my-django-var)
(mmm-add-mode-ext-class nil "\\.tmpl\\'" 'my-django-expr)
(mmm-add-mode-ext-class nil "\\.tmpl\\'" 'html-js)

;; Use different colors for different sub-modes.
(setq mmm-submode-decoration-level 2)
;; Make the code submode a little more readable.
(set-face-background 'mmm-code-submode-face "#EEEEFF")
%d bloggers like this: