My Digital Junk Drawer, Adding Code Formatting

The Goal

I wanted to have the ability to include code snippets in my blog posts and have them nicely formatted. I wanted this to happen without any additional markup in my posts and without having to modify my workflow in any way. This meant I needed code in my template to handle this automatically. I see no reason to reinvent the wheel, so I set about picking a javascript library to handle this.

First Pass

Google’s Code Prettify js is pretty widely used and the colors can be customized with themes defined as css files, so that is the library I have chosen. Incorporating this code into Tumblr (or any webpage for that matter) is pretty straight forward. Once you’ve added the css and javascript files to your site, you simply reference them in the head of your document. You then need to add a call to the prettyPrint javascript function in the onload event for the html body tag like so ¹:

<head>
    <link rel="stylesheet" href="css/prettify.css" type="text/css" media="screen" />
    <script src="scripts/prettify.js" type="text/javascript" charset="utf-8"></script>
</head>
<body onload="prettyPrint()">

You then just wrap your code in <code> or <pre> tags with the “prettyprint” class specified like so:

<code class="prettyprint">

This is pretty simple and it would work this way, but there are some parts of this implementation that I’m not thrilled with, so…

Enter jQuery

I identified a couple problems that I wanted/needed to solve in order to meet my goals and clean up some unpleasant code.

That onload attribute in the body tag really doesn’t sit well with me, so it has to go.
I use Markdown to create my posts in a text editor, so the need to add a class attribute to the <code> or <pre> tag is going to be a hassle and I really don’t think it’s needed since I want this formatting applied to all code blocks.

I can use jQuery to solve both problems with a very minimal amount of code. First I’ll reference jQuery, and add my call to prettyPrint(); right in the document.ready event. Problem #1, solved. Problem #2 is pretty simple too, I just need to use jQuery’s addClass() function to apply the required css class to the appropriate tags and I’m all set. The updated code will look like this:

<head>
    <link rel="stylesheet" href="css/prettify.css" type="text/css" media="screen" >
    <script src="scripts/prettify.js" type="text/javascript" charset="utf-8"></script>
    <script src="scripts/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $('pre>code').addClass('prettyprint');
            prettyPrint(); //this calls the function in google's .js file
        });

    </script>
</head>
<body>

A Note About The Selector Used in My Code

I only want the pretty print functionality for blocks of code. For simply mentioning a tag or snippet inline, I’d like to just use standard formatting for <code> tags. That works out perfectly, because when I mark a chunk of text as code inline with markdown, the output looks like this <code>someSampleCode();</code>. When I indent a block of code to specify that it should be displayed as a code block, the output looks like this:

<pre><code>&lt;head&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/prettify.css&quot; type=&quot;text/css&quot; media=&quot;screen&quot; &gt;
    &lt;script src=&quot;scripts/prettify.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;scripts/jquery.js&quot; type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; charset=&quot;utf-8&quot;&gt;
        $(document).ready(function() {
            $('pre&gt;code').addClass('prettyprint');
            prettyPrint(); //this calls the function in google's .js file
        });

    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
</code></pre>

Notice that the <code> tags are wrapped in <pre> tags. This allows me to use the selector $('pre>code') to apply my class only to <code> tags that are immediately preceded by <pre> tags, so I can take adavntage of the way my markdown is translated into html.

And that’s all it takes to add code formatting without the need to apply classes manually to your HTML.

This is according to the instructions in the readme provided with the library. The thought of putting a call to javascript in the body tag’s onload attribute makes me feel dirty, so I won’t actually do it this way. ↩

gabegaster liked this
castelinoui5 liked this
diana2345d liked this
avanslaars posted this