Improved syntax highlighting and deep linking
A couple of improvements to the site generation have been added.
Syntax highlighting
We were previously using literal <pre>
blocks in markdown pages so that we
could set the CSS necessary for the syntax highlighter. The big downside of
this was the need to HTML-escape the code within those <pre>
blocks. Using
an awestruct 'transformer' it's now possible to use
the more natural markdown way of including example code
(i.e. using indentation), which means you don't have to worry about using
HTML entities for <, & etc.
By default <pre>
blocks will not be subject to highlighting. To enable
highlighting simply preceed the block with an HTML comment hinting at the
language being included. For example
class Foo() {
void bar() {
}
}
It's also easy to have a page with syntax highlighting of multiple languages, by using an appropriate hint.
For those who are interested, the way this works is having a transformer
perform a global gsub
on the generated output using a suitable regular
expression to pick out the code blocks generated by markdown.
Deep linking
Markdown by itself doesn't allow the author to put id
attributes or anchors
(<a name="...">
) in the generated HTML, which is annoying if you want to link
to a particular part of the page. You can of course put <a name="...">
elements in yourself, but:
- It clutters up the nice markdown with HTML.
- It forces you to ensure the uniqueness of the ids you use.
- It's tedious.
Using another transformer we now generate id attributes automatically for all
<h*>
and <p>
elements. For headings we use the heading text (suitably
munged into an XML NAME). For paragraphs we use the first few words (again
suitable normalized, and also worrying about uniqueness). If an element
already has an id
then it's untouched. If there's a matching id
(or name
, since they share the same namespace), steps are taken to
disambiguate the generated one.
The long and the short of this is that we can now easily and accurately link
into the middle of documents. The caveat is that you should be aware that
changing the first few words of a paragraph (or the text of a heading) is
likely to break any links which point to it. To prevent such broken links
you can always use an explicit <a name="">
at the relevant point.