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.
<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>
or <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 FormattingI'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.
Beautiful! Just what I need for my blog. But I notice that it seems to break the bounds of the css. Is there a way to get the highlighting without breaking the bounding of the css?
ReplyDeleteYou mean the way it get's cut off, right? Yeah, there's only 3 things I can do about that: 1) use a smaller font 2) widen my template 3) put more returns/indentation in my code. Currently, I'm trying to find a wider template. It's not going so well. At the end of the day, I'm just going to have to keep my code shorter. I'm hoping an external editor will take care of that for me (I'm going to try to connect DreamWeaver)
ReplyDelete