This is a new site. I mentioned somewhere in the front matter that it would be very interesting, and, I really think it will be. I’m going to think of some really great, insightful posts for this here site. I’ll occasionally throw in some code. Some of it will be pseudocode, some of it will be real code, a portion of it will be an admixture of the two. Trying a whole bunch of stuff and seeing what works is the name of the game. I often feel like one of those potential buyers of those old CD-ROMs a guy was trying to sell on TV that would teach you how to use the computer. Basically, I know stuff but I don’t really know stuff. I eventually figure it out or just find a workaround.

Speaking of code, I’ve been playing around with Jekyll (which has generated these pages, this site) and I’d like to routinely share some code that’s mostly going to be in the R language. R is great but it has the misfortune of not being rendered with syntax-hightlighting with the Pygments highlighter (used as a default highlighter in Jekyll). I’ve tried moving to the Rouge highlighter (and also using redcarpet as the Markdown parser), but this is how it appears:

# Create a simple data frame for testing
df <- data.frame(POSIXtime = seq(as.POSIXct('2013-08-02 12:00'),
                             as.POSIXct('2013-08-06 05:00'), len = 45),
                 x = seq(45))
 
# The Subset Examples
#
# All data on 2013-08-06
sub.1 <- subset(df, format(POSIXtime,'%d')=='06')
 
# All data on or before the 2013-08-04 at 5 PM
sub.2 <- subset(df, POSIXtime <= as.POSIXct('2013-08-04 17:00'))
 
# All data in the hours of 12 PM through 4 PM inclusive
sub.3 <- subset(df, format(POSIXtime, '%H') %in% c('12', '13', '14', '15', '16'))
 
# All data from 6 AM through 1:45 AM on the 2013-08-05
sub.4 <- subset(df, POSIXtime >= as.POSIXct('2013-08-05 06:00') &
                  POSIXtime <= as.POSIXct('2013-08-05 13:45'))

Not bad, at least how I’m viewing it (in Safari Version 8.0). The light blue background color is not too bad. The font is a bit wide but I can do some tweaking of the main.css file to change it to my liking.

Things fall apart (for me, anyway) when turning on line numbering using the ‘linenos’ keyword. It seems to want to affect the text styling below the code block in that the text immediately following the code block ends up being rendered in the same fixed width font as in the code block. Also, there’s a great deal of padding in the bottom of the code block. Some serious tweaking to main.css is required here.

Here’s a GitHub gist with the same R code in it:

This GitHub code highlighting is much nicer than that offered by the Rouge highlighter. Why? The font is narrower, more readable (the zero and the uppercase ‘O’ are easily distinguishable), and, R function names are emboldened. I could totally get on board with preparing gists of code then just referencing those gists. It’s quite easy to do so, just use the keyword ‘gist’ with the numeric ID of the gist. However, the line numbers are tiny and don’t correspond to the actual lines of code (there appears to be incorrect line spacing applied). That’s a problem that could, again, just be a problem with my browser type. Some googling about the topic didn’t seem to shed much light on this. So, in the meantime, I’ll resolve to use the Rouge/redcarpet combo of syntax highlighting and Markdown parsing.

2014-10-28 5:02 PM UPDATE:

Found a great way to present GitHub gists with some Jekyll HTML includes and a great by way of jQuery and the awesome gist-embed. I added these lines to the /_includes/head.html file:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/gist-embed/1.9/gist-embed.min.js"></script>

Jekyll will include anything in head.html as part of a default layout. Then, knowing that we can mix HTML with Markdown, use the following to embed a GitHub Gist without those line numbers that don’t work for me:

<code data-gist-id="7551858" data-gist-hide-line-numbers="true"></code>

Here’s the result:

Still, there is a padding issue at the bottom of the wrapper (i.e., too much padding). I finally went into Jekyll’s /_sass/_base.scss file and made a few changes focussing on this section:

/**
 * Code formatting
 */
pre,
code {
    font-size: 14px;
    border: 1px solid $grey-color-light;
    border-radius: 2px;
    background-color: #eef;
}

code {
    padding: 2px 2px;
}

After reducing the font-size to 14px, a little more code was visible without making the text too small. I also reduced the amount of padding (setting the values to 2px 2px) to make the embed wrapper not so obtrusive. It all looks a bit better.