Nice Code Blocks in Blogger

This post is mostly for my own use, but I figure some others might like it, too.  You may have noticed that I have some nice code blocks in some of my posts.  I may start with something like:

function(args)
{
    if ( maybe ) do_something();
}

(I set the font to offset the above code using the font-selector make it stand out a bit.)

How to I get those nice looking blocks?

To start, I use a site to format the blocks:

http://hilite.me/

That generates HTML that I can paste into my post.  When editing, normally you're in "compose" mode, but near the top left, you can hit "HTML" to get into the raw code of the page.  I just paste the results from the web page.  Make sure you don't put it in the middle of a <div></div> pair.  I often put a lone line of text where I want to paste into the page to make it easy to find.  Something like this:

==========PASTE_CODE_BLOCK_HERE==========

So doing that, now I have this:

function(args)
{
    if ( maybe ) do_something();
}

After that, I hit "preview."  There I'll see that with a white background, I see lots of off-white text on white.  Not good.  (This is because my normal page style is light text on dark, and the highlighter page assumes you have dark text on light and doesn't override it.)  At the top of the HTML block I paste in, there are some HTML style options separated by semicolons.  I need to add in, "color:black;" to correct the color issue:

function(args)
{
    if ( maybe ) do_something();
}

That's nice, but I don't like that it highlights spaces.  This is a simple matter of removing the "<span ...> </span>" tags around the spaces.  But wait, there's a reason those are there: it's based on where I'm pasting from.  If I'm pasting from a web page with formatting, some of that is getting picked up by the highlighter.  As a general rule, never paste into Blogger from a web page or formatted document--it will mess up all sorts of things.  I have to make sure I'm posting raw ASCII text if I want a nice clean block of code.  So going back to the original code, pasting it first into a text editor, and then into the highlighter, and editing the default text color:

function(args)
{
    if ( maybe ) do_something();
}

So there's just one change, but to be sure I remember it and to make it easy, I'll save a one-line command line for fixing things.  I toss in stripping out stray blank lines.  Since I want to buffer all the input before printing the output, I'll pipe the output to a tail command.  I then add a final comment line and a blank line to keep things easier to follow when editing the page:

sed -e 's/border: *solid gray/&;color:black/' \
    -e 's@<span[^>]*> </span>@ @g'|
    grep -v '^$' |
    tail -n 10000 ; \
    echo '<!-- END HTML generated using hilite.me -->'; \
    echo ''

One simple hint: You're free to leave blank lines in the HTML version of the page outside of the block generated by the web page.  This may make it simpler to find and update the blocks as needed, but Blogger sometimes removes them.  In any case, they're harmless.

Another thing to watch for is that the Blogger composer sometimes gets confused as to the line breaks around code blocks.  Always check the preview--there are often line breaks where the composer doesn't show them between your text and the code block.

For this post I used the "colorful" style.  I think I'll use "emacs" in most of my posts. Somehow that color scheme looks natural to me.

Digital Rights Management (DRM) and Star Wars

Many of my friends have heard me complain (OK, rant) about DRM.  DRM officially stands for "digital rights management," but I prefer "digital restrictions management."  The most common use of DRM is for video like Blu Ray discs and Netflix.  DRM software enforces the restrictions imposed by the seller.  You only get to use the media in the way they intended, no matter how much money you spent to buy it.  You don't fully own that disc you just bought.  Want to skip the previews?  Sorry.  Want to skip the copyright notice?  No way.

Of course, DRM doesn't stop the professional copiers.  People in various countries will take one legal disc and press duplicates that are completely identical, bypassing all the copy protections.  DRM value: zero.  Semi-professional pirates find various ways of bypassing the protection, including ripping from the HDMI output with hacks to remove the copy protection there, and then they share the videos online.  DRM value: none.  Regular owners who want to copy the movie to their iPad to watch in the car can't.  Yes, some discs offer alternatives that may or may not work offline.  DRM value: consumers annoyed.

But let's look at the worst impact of DRM ever:  Star Wars.

In particular, have you ever wondered why Princess Leia had to send the Death Star plans with R2D2 instead of transmitting them to another ship?  Or why they never made copies and sent them with multiple courriers?  Clearly the plans were encumbered with the nastiest DRM ever invented.  Want to copy them?  No way.  Want to transmit them without destroying the original?  Nope, not allowed.  Want to analyze them to find a design flaw allowing you to destroy the Death Star using small fighters too small to be considered a serious threat?  No problem, but only if you watch the Imperial Secret Documents crawl first.

So remember, DRM isn't just about stopping those nasty consumers from watching movies they've legitimately purchased on multiple devices.  DRM is also about preserving the Empire.  Support DRM to help destroy the last vestiges of the Republic.

Happy Star Wars Day.  May the Fourth be with you.