- Log into your blogspot account, select the "Layout" tab, and then click "Edit HTML."
- Click "Download Full Template" to make a backup of your current template.
- Make a copy of your template, open it in an editor, and find the </head> closing tag. Before that tag, add the following:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<!-- add brushes here -->
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script> - After the comment that says "add brushes here," add the languages you plan to use. For example, I'm using brushes for Javascript, Bash, SQL, XML/HTML, and C++:
<!-- add brushes here -->
See the full list of supported syntaxes.
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> - Save your modified template, and upload it to Blogger (again, under Layout > Edit HTML).
- You should now be able to add syntax highlighting to your blog. Wrap your code in a <pre> tag and specify the brush to use in the class attribute. For example, to highlight a block of SQL:
<pre class="brush:sql">
SELECT *
FROM users
WHERE user_id = 1212;
</pre>
Here's how that looks when rendered:
SELECT *
FROM users
WHERE user_id = 1212;
The code you're formatting should be HTML encoded first. Also note that the Blogger preview won't show the formatting; you'll need to either go ahead and publish it or post it to a test blog first.
