Be Genius

Fork Me
Mugshot

Hi, I'm Bodaniel Jeanes.

I'm a Ruby developer from Brisbane, Australia

I am a freelancer who hacks on awesome code. Follow me, recommend me, and link with me.

Code formatting in RSS Feeds

Apologies readers — I just realised that the code formatting is kinda screwed up in RSS feeds because I am using some HTML5 elements to represent my code blocks and using CSS to style them appropriately on the site. The RSS feeds obviously lack these stylesheets and so look pretty crap. I am not sure what the best solution is yet. Perhaps I embed a <style> in each RSS post or simply have the RSS feeds only show an excerpt of the full post.

Any ideas?

Comments

  1. Jason Weathered says:

    Firstly, please don't limit your feed to just excerpts. Clicking through to read content is annoying at best (more clicks) and impossible at worst (i.e. offline).

    Inline styling of the feed content is a much better idea but still not the best. Markup should be semantic (your current code block are not IMO) and feed readers may not even respect user styles.

    I think the markup needs to be fixed so it makes sense semantically. I'm thinking it should be a normal <pre/> with <span/>s for style hooks. To add line numbers, wrap each line in <code/> so we can style each line (unless I'm missing a way to write a selector to match all lines a la ::first-line).

    I have quickly thrown together a proof of concept, tested in Safari 4 only. It's roughly styled like your blog with the <pre/> code generated by the TextMate.tmbundle but with manually added <code/> tags. The styling is a good candidate for SASS with all the calculations.

    What I particularly like about this solution is it degrades well and at least in Safari, when you copy blocks of code, line numbers don't come along for a ride as well.

    Download: http://gist.github.com/198936

  2. Bodaniel Jeanes says:

    Hey Jason -- your suggestion looks really nice. I hadn't thought of using the css counters to do the line numbers. I have to play around with an implementation that doesn't select line numbers when you select the text though. It originally went from tables (from ultraviolet/coderay or whatever) to my figure based implementation.

    I disagree though that my current implementation isn't semantic. It's non-standard but it's actually more semantic than most people's code blocks (usually just pre tag). I use code blocks because they are code blocks.

    A selector to match each line would be nice, but wrapping each line in code tag will do the trick and is a method i've seen elsewhere a lot. I've never liked it in the past because the code is one block, not multiple individual lines. Nonetheless, it might be the way to go.

    Will have a look at this over the weekend if I can find some time.