Formatting Objective-C code with the HTML code tag
Andy on Aug 18th 2007
You might have noticed, especially given the last post, that the code formatting on this blog leaves much to be desired. I’m trying to rectify that, but I’m not quite sure how to do it.
I’ve always assumed that when presenting code, I should use the the <code> tag. Unfortunately, the default formatting of this tag is indeterminate at best. From trial and error I’ve determined that it’s usually best to put each line of code in its own set of <code></code> tags, otherwise formatting gets really wonked. I’ve also found, depending on the CSS, I might have to put a <br> after each line of code, otherwise my nice, pretty function all ends up on one line.
And this completely ignores indented code. There seem to be a couple of ways to making indentation work. The first is to use the white-space: pre; CSS rule and make sure the tab characters are in the <code> tags. The second is to use the text-indent CSS attribute for each line of code I want to indent.
None of these options are easy or simple, which makes me think I’m doing something wrong. Are there are any web designers/HTML coders in the audience that know the proper way of doing this? Surely it’s not intended to be this painful.
The problem with formatting code on this blog has led me to the conclusion that I’m probably going to have to ditch my current WordPress theme. Sure it’s pretty, but it does float: right on my images with a rule that has high specificity, making it very difficult to not float my images to the right, which is what I usually want. It also has a fixed width, which doesn’t really mix well with my code examples, not to mention it doesn’t style the <code> tags well.
Unfortunately I haven’t been able to to find an appropriate WordPress theme that will fit my needs. I’d really like a two column layout, with a fluid width, and, if it’s not too much to ask, decent <code> tag handling.
Filed in Programming, WordPress, Writing | 5 responses so far
Matt Schinckel Aug 19th 2007 at 01:58 am 1
Think you meant to escape the tags now, too.
I use SubEthaEdit, just to use the Copy As XHTML menu item. Even if I have been coding in another application (Komodo, or Script Editor).
I have had to tweak the output, and my CSS file, but it is the method I have found works best.
Ankur Aug 19th 2007 at 02:33 am 2
Use the <pre> tag for block level code. It’s usually monospace as well, so your formatting stays nice. For semantics, I wrap code in <pre> and <code>, and in my theme I’ve styled <code> to display:block. For indentation, just use the padding-left CSS attribute.
If you need some help or if you’re interested with what I’ve done with my theme, just let me know. Unfortunately, there is a real shortage of semantic, optimized and accessible themes for WordPress and I’m considering releasing the theme I’m using… maybe.
But seriously, it sounds as if you’re going through a lot of pain for something that shouldn’t really be a pain. PRE, CODE, SAMP and VAR… they wont bite!
Jeff Johnson Aug 19th 2007 at 06:58 am 3
I agree with Ankur: use <pre><code>. By the way, Ankur, doesn’t <pre> already create a block?
In my style.css, I use the following to automatically create a horizontal scrollbar so that the content doesn’t overflow to the right:
.entry pre {overflow: auto;}Andy Aug 19th 2007 at 08:25 am 4
> Think you meant to escape the tags now, too.
*sigh*, yes. In fact, I did the first time I pasted into the WordPress editor. It was just kind enough to switch the < and > into actual < and > characters the first time I hit save (I do a “Save and Continue” first to preview it, then hit “Publish”).
Denis Defreyne Aug 20th 2007 at 01:25 am 5
Looks like my markup broke, so let’s try that again…
I use <pre><code>…</code></pre>. (<pre> is a block element, so no need for code { display: block; }.)
On my blog, I use syntax highlighting, but I mark up everything manually: <span class=”variable”>, <span class=”function”>, etc. Takes a while, but the result is pretty. (And I can distinguish variables from functions, which no syntax highlighter can do.)
TextMate also has copy-as-HTML functionality, but I don’t use it because the HTML it generates is *massive*.
Additionally, on my site, if a code block becomes to large, I make it expand horizontally when hovering over it. Real nifty, if I say so myself.