I had a few issues with version 2 and at the time resorted to version 1.5.5. Guess what? Yes I solved the little issues I had so here is how to add version 2!
The route is very similar just with some config changes.
Im now using Alex's site to host the source files.
Modify your template to add in CSS and JS files & Add startup script.
Goto Layouts --> Edit HTML to edit your Blogger template.
It's worth taking a backup of your layout, just copy and paste into a text file.
In the previous post I simply added the raw CSS to the template head element, I did this because it didnt seem to work with the linked CSS. This time im using a link element.
You can see that I also added the startup script after the JS includes.
<head>
<!-- Add-in CSS for syntax highlighting -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.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/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>SyntaxHighlighter.config.bloggerMode=true;SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';SyntaxHighlighter.all();</script>
<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' id='shTheme' rel='stylesheet' type='text/css'/>
Make sure you save your template.
Add your code blocks to your blog
Thats about it really
The changes to the syntaxhighlighter allow greater configuration of the behaviour. It's worth reading the documentation! The main difference for me was to assign the brush in the class attribute:
<pre class="brush: js;">
....encoded code here
</pre>
If your code contains a lessthan < then you need to encode your contents. There are quite a few tools around to Encode HTML.
I have noticed a small issue where the copy/paste element which is Flash is not displaying the icon. I'm goint to try to solve this at some point.
No comments:
Post a Comment