Updating the blog with a new layout

It's always a fun exercise to update my blog. Mostly because I have to always remember to update my syntax highlighting code, which I forget to save somewhere for me to remember how to do it. So this time, I'm going to blog about it, so I can remember it. First off, I'm using the syntaxhighlighter provided by Alex Gorbatchev (). It's just awesome, pure and simple. But remembering how to add it to your blog isn't. So, the first thing that you have to do to add it to your Blogger blog is to update your template. I'm not going to detail how to do that, because it changes a fair bit. Once you have your template loaded, look for the /head tag and add the following before it: 
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
Now that you have this in your template (and have saved it) you can now start adding code to your site. In your page, add the following:
You can also use a more concise version using the pre tag: 
<pre class="brush: html">
#include "yourcode.here"
</pre>
Note that there are a lot of different brush types that you can use:
  • actionscript3, as3
  • bash, shell
  • c#, c-sharp, csharp
  • coldfusion, cf
  • cpp, c
  • css
  • delphi, pascal, pas
  • diff, patch
  • erl, erlang
  • groovy
  • java
  • perl
  • php
  • plain
  • powershell
  • python
  • ruby
  • scala
  • sql
  • vb
  • xml, html
The source list can be found at http://alexgorbatchev.com/pub/sh/

Comments

Post a Comment

Popular Posts