Sunday, November 28, 2010

Publish Source Code in Blogger Using SyntaxHighlighter

  • In blogger under "Design" tab click "Edit HTML".
  • Copy following and paste it just before the </head> tag in the area under "Edit Template".
  • <link href="http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css" rel="stylesheet" type="text/css"></link> <script language="javascript" src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js"> <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js'/>  </script>
  • Copy following and paste it in the same area as in the second step but this time paste it just before the </body> tag.
  • <script language="javascript"> dp.SyntaxHighlighter.BloggerMode(); dp.SyntaxHighlighter.HighlightAll('code'); </script>
  • Goto http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css and copy the entire stylesheet paste it in the same area as step one and two, but this time paste it just before ]]<.
  • HTML Encode the source code using "HTML-encode a string".
  • Composing a blog post inside the "Edit HTML" editor,when you encounter a place where it is required to add the code snippet copy the encoded source code and paste it in between following tags.
  • <pre name="code" class="Cpp"> ….My code here… </pre>  

3 comments :

  1. Really informative post.. thanks for sharing...

    Salwar

    ReplyDelete
  2. you mean -/head- tag (closing 'HEAD' tag) not above opening -head- as in article

    ReplyDelete
  3. Thanks a lot for the correction... :-) Just fixed it...

    ReplyDelete