Literate Code

— a responsive layout module for great-looking programming essays.

This paragraph is an example of a textual block of the essay, it is set with the same typographic measure as all other article content on this site (8 columns), just aligned left instead of center.

Here's how code listings look like:

A long method (12 columns):

    
      def longish_method
        [1, 2, 3, 4, 5].map {|el| el * 2}.reject {|el| !(el % 2).eql? 0}.reduce {|sum, el| sum + el}
      end
    
  

A shorter method (11 columns):

    
      def shorter_method
        [1, 2, 3, 4, 5].map {|el| el * 2}.reject {|el| !(el % 2).eql? 0}.cycle {|el| puts el}
      end
    
  

A short method (10 columns):

    
      def short_method
        [1, 2, 3, 4, 5].map {|el| el * 2}.reject {|el| !(el % 2).eql? 0}.take(3)
      end
    
  

An even shorter method (9 columns):

    
      def even_shorter_method
        [1, 2, 3, 4, 5].map {|el| el * 2}.reject {|el| !(el % 2).eql? 0}
      end
    
  

A very short method (8 columns — i.e., the measure):

    
      def very_short_method
        'I fit well within the measure.'
      end
    
  

Finally, some inline code: [1, 2, 3, 4, 5].map {|el| el * 2}.

You can mix & match these columns as you want, based on how long your lines of code are. It's just a matter of declaring an enclosing div block with the appropriate class (col[12-8]p, columns 12 through 8).

For this, I've found that writing your essay in plain HTML is the easiest (just declare :plain in your HAML and nest the HTML under it).

Notes

  1. This is very much "a minimal viable product". I'm not using any syntax highlighter because the goal of this demo is design and cross-device adaptability. (Also, I havent found a multi-language highlighter that I really like).
  2. In WebKit browsers, pre elements wrap their contents instead of vertical-scrolling when resized. This layout currently looks best in Firefox.
  3. I haven't yet figured out a way to manipulate padding and margins on pre elements (and embedded code elements) to override browser defaults. These elements' padding and margin rules are unlike all other elements.

Grab the source

The HTML & CSS for Literate Code will be available in the Droplets GitHub repository once I extract the styles from the present site.