Concise Software - Alain O'Dea

Enabling SyntaxHighlighter in Blogger Step-by-Step

  1. Learn about SyntaxHighlighter
  2. Go to Layout from you Blogger Dashboard
  3. Select Edit HTML
  4. Immediately after <head>, add the following code: 
    <script src=&#x27;http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js&#x27; type=&#x27;text/javascript&#x27;></script>
<script src=&#x27;http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushErlang.js&#x27; type=&#x27;text/javascript&#x27;></script>
<script src=&#x27;http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js&#x27; type=&#x27;text/javascript&#x27;></script>
<link href=&#x27;http://alexgorbatchev.com/pub/sh/2.1.364/styles/styles/shCore.css&#x27; rel=&#x27;stylesheet&#x27; type=&#x27;text/css&#x27; />
<link href=&#x27;http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css&#x27; rel=&#x27;stylesheet&#x27; type=&#x27;text/css&#x27; />
  5. Select Save Template
  6. Select Page Elements
  7. Select Add a Gadget
  8. Select HTML/JavaScript
  9. In the Title field, enter SyntaxHighlighter
  10. In the Content box enter the following code: 
    <script class='javascript'>//<![CDATA[
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
//]]></script>
  11. Select Save
  12. Select Edit HTML
  13. Make note of the widget id of the b:widget whose title is SyntaxHighlighter (for me it was HTML1)
  14. Immediately before ]]></b:skin>, add the following code (with your widget id in place of HTML1): 
    #HTML1 {
display:none;
}
  15. Select Save Template (this step hides the unnecessary visible gadget from your readers)
  16. Enjoy syntax highlighting :)