Embed Code Syntax Highlighting in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">Hi Friends,<br /><br />If you are a developer & want to share your code over the blog with proper <span class="IL_AD" id="IL_AD2">highlighting</span> & syntax, then <span class="IL_AD" id="IL_AD6">Blogger</span>/Wordpress doesn't have the immediate solution out here!<br /><br />A quick workaround for Blogger can be to embed your source between:<br /><blockquote></blockquote><br />tags in order to prevent them from getting parsed.<br />E.g.<br /><pre class="brush: js"><br /><blockquote><br /><a href="http://site.com">Site</a><br /></blockquote><br /></pre> But for the formatting & highlighting used <span class="IL_AD" id="IL_AD5">to quote</span> above <br />example, an excellent open source tool called <a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter" linkindex="13">SyntaxHighlighter</a> is available.<br /><br />This is ready to use out of box 100% Javascript based SyntaxHighlighter with extensive features & multiple other options.<br /><br />SyntaxHighlighter can be either <span class="IL_AD" id="IL_AD12">downloaded</span> & used on your own webserver or if you have a blog on Blogger, this can be directly used as well.<br /><br />To downloaded SyntaxHighlighter for your own personal Webserver/Hosted Site: <a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download" linkindex="14">http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download</a><br />Configuration Steps: <a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration" linkindex="15">http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration</a><br /><span class="IL_AD" id="IL_AD9">Brush</span> Aliases:<a href="http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes" linkindex="16">http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes</a><br /><br />In order <span class="IL_AD" id="IL_AD3">to install</span> & use it on Blogger, <span class="IL_AD" id="IL_AD4">follow the</span> below <span class="IL_AD" id="IL_AD11">simple steps</span>:<br />1) Go to your Template Layout-><span class="IL_AD" id="IL_AD1">Download</span> your template as a backup first<br />2)Now click Edit HTML for Layout & then paste the below code in your Template before your </head> tag ends. Note this is pointing to the Latest released version v2.1.364; older versions can be found at: <a href="http://alexgorbatchev.com/pub/sh/" linkindex="17">http://alexgorbatchev.com/pub/sh/</a><br />  <pre class="brush: js"><br /><link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> <br /><link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script> <br /><script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script> <br /><script language='javascript'> <br />SyntaxHighlighter.config.bloggerMode = true;<br />SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';<br />SyntaxHighlighter.all();<br /></script> <br /></pre><br />3)Save the template & open you blog in IE & Firefox to test if any javascript errors are reported as this might conflict with various other embedded scripts in your template.<br /><br />This completes the direct embedding of SyntaxHighlighter in your Blog. Now lets proceed how to use it in your posts:<br /><br />Usage:<br />For SyntaxHighlighter 2.0 & above:<br />Any code you want to be placed & displayed using SyntaxHighlighter must be enclosed in:<br />  <pre class="brush: js"><br /><script type="syntaxhighlighter" class="brush: html"><![CDATA[<br />#######YOUR CODE############<br />]]></script> <br /></pre><br />Note that we have option of using different <span class="IL_AD" id="IL_AD10">brushes</span> for highlighting different type of codes..e.g. HTML/ASP/C++ etc<br />In order to choose the appropriate brush, following are the various brush aliases supporting the corresponding code highlighting:<br />actionscript3<br />bash, shell<br />c-sharp, csharp<br />cpp, c<br />css     <br />delphi, pas, pascal<br />diff, patch<br />groovy <br />js, jscript, javascript<br />java<br />jfx, javafx<br />perl, pl<br />php <br />plain, text<br />ps, powershell <br />py, python<br />rails, ror, ruby<br />scala<br />sql<br />vb, vbnet<br />xml, xhtml, xslt, html, xhtml <br /><br />Above aliases can be used at: class="brush: <b>alias</b>" while embedding your code in the Blog.<br /><br />Another easy way supported by SyntaxHighlighter is to enclose the code within:<br /> <pre class="brush: js"><br /><pre class="brush: js"><br />#########YOUR CODE########<br /></pre></pre> The only catch involved out here is, you have to use encoded HTML while embedding within <pre>tags.</pre>Your code can be converted to HTML Encoded using following easy to use Tool:<br /><a href="http://www.string-functions.com/htmlencode.aspx" linkindex="18">http://www.string-functions.com/htmlencode.aspx</a><br /><br />Just copy paste your code & generate the encoded HTML Code. Paste the encoded HTML within <pre>tags for correct rendering. Failure to do so might render wrong code, especially < & > <span class="IL_AD" id="IL_AD8">brackets</span>.<br /><br />Some examples of codes in my Blog:<br /><a href="http://geektalkin.blogspot.com/2009/07/historical-audit-trail-information.html" linkindex="19">http://geektalkin.blogspot.com/2009/07/historical-audit-trail-information.html</a><br /><br /><a href="http://geektalkin.blogspot.com/2009/11/batch-program-to-rename-file-with-date.html" linkindex="20">http://geektalkin.blogspot.com/2009/11/batch-program-to-rename-file-with-date.html</a> <br /><br />Keep Blogging! </div> Blogger, Embed Code, Code, Syntax, Syntax Highlight, Syntaxhighlighter, Javascript, Blog Tricks, Blogs, Java, SQL, ASP, HTML, HTM, C#, XML, XSL, JS, CSS, PHP, PL, CGI, embed code blog,embed blogger blog, embed youtube blogger, swf embed code, you tube embed code, embed src code, embed wordpress blog, embed video blogger, myspace embed code,embed into, html code,rss feeds,blogger templates, blogger,syntax highlighting,script error,script,etc

Embed Code Syntax Highlighting in Blogger

Hi Friends,If you are a developer & want to share your code over the blog with proper highlighting & syntax, then Blogger/Wordpress doesn't have the immediate solution out here!A quick workaround for …

Read more »