Developer Bits: CSS

Feb 13, 2010

Blog - Syntax Highlight, Code Formatting - Part2

So in Part 1, I described how to spruce up code in a blog. It worked well but had a few shortcomings. Largest of which, it didn't automatically wrap lines. So if your code was wider than your blog template, it would get cut off. Another problem was, you needed to find a place to host the javascript and css files.

Since then, I've been pointed to the this blog that shows easy syntax highlighting for blogger. This has several strengths over Google's version that I described. In addition to solving the two problems above, it also offers a great "copy" feature: after hovering over a code section, links appear allowing viewers to copy everything, view the code separately, or even print it!

Here's an example of code highlighted the new way:

<div class="sidebar">
<a href="http://super_long_url_that_makes_this_line_long" target="_blank" name="someName" id="someId">click here for awesome</a>
</div>

The only downside I see is that this version takes a long time to load because it's using javascript files, css files AND a Flash SWF file. I may end up hosting all of these locally (on google's server) to see if that improves speed. Also, it may impact the iphone/ipad (non-flash) view of the site. I'll have to test what happens when a user doesn't have flash (or maybe even javascript) enabled.

All in all, I will keep the previous blog the way it was but, going forward, I'm using the awesome highlighting, instead of Google's! As far as formatting is concerned, I'm still testing different external blog tools. The next part will cover the one I chose and why.

Feb 11, 2010

Blog - Syntax Highlight, Code Formatting - Part1

So, I started this blog and I'm going to be writing a lot of code. I want that code to be readable and I don't feel like formatting it manually.

Syntax Highlighting - Setup
After a little searching, I found that Google has both a CSS file and a JavaScript file you can download that will handle highlighting for you. Here's the direct link:


http://code.google.com/p/google-code-prettify/downloads/list

Download the "small" version. All you need are these two files:
```
prettify.css
prettify.js
```
Place them on a webserver somewhere.
Edit your blog template to link to them (on blogger go to Layout > Edit HTML) place the following code just after the opening <head> tag . . . and you're done!!
```
<link href="[Path_To_Server]prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="[Path_To_Server]prettify.js"></script>
```
Where [Path_To_Server] represents the location on your webhost where you placed those files.

For TESTING PURPOSES ONLY you can use the following code, verbatim, at your own risk (it links directly to Google's hosted version of the files. hehe):

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>

Seriously, though make sure you host those files yourself.

Syntax Highlighting - Use

Place the code you want highlighted in

    <pre class="prettyprint">...</pre>

    <code class="prettyprint">...</code>

and it will automatically be pretty printed.

Checkout the Readme File for more details.

Syntax Highlighting - Customizing
Of course, you can modify the stylesheet to get the look you prefer. On my site, I also modified the CSS in my template for the code and pre tags. I "borrowed" the css code from the stylesheet at StackOverFlow.com and modified it slightly. This way, I can use plain <code> tags without having to specify the class attribute (like I just did):

pre, code {  
  background-color:#efefef;
  font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
  border: 0px;
}

Code Formatting
I'll save this for part 2. My plan is to find an external editor to handle the formatting for me. From there, I will link the editor to my Blogger site and all will be merry. Face it, deep down, I really don't want to keep putting the markup in these blog posts by hand! There's a solution out there, somewhere.