Saturday, May 15, 2010

Syntax Highlighter : Embed code examples in blog posts

Syntax Highlighter is a widely used (Asp.net forums) code/markup embedding script (tool), which supports widely used blog engines including blogspot and wordpress. 

Configuration:

Blogspot:
Settings -> Layout -> Edit Html

Inside the html include following links and java script inside your  head closing tag </head>

<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'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' 
    type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' 
    type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' 
    type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' 
    type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' 
    type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' 
    type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' 
    type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' 
    type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' 
    type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' 
    type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' 
    type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' 
    type='text/javascript'></script> 
 
<script language='javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
    SyntaxHighlighter.all();
</script>

Syntax Highlighter supports vast range of programming and markup syntax as listed below.
  1. HTML
  2. C++ (CPP)
  3. C# (CSharp)
  4. CSS
  5. Java
  6. JScript (javascript)
  7. PHP
  8. Python
  9. Ruby
  10. SQL
  11. VB
  12. XML
  13. Perl
Use with in your post
  1. Click on 'Edit HTML' tab (blogger) 
  2. Wrap your code with <pre> tag as listed below

<pre class="brush:CSharp">
      public void MyMethod()
      {
          ///
          /// Example method
          ///
      }
</pre> 


Available Options

<pre class="brush:html"></pre>
<pre class="brush:cpp"></pre> 
<pre class="brush:csharp"></pre>
<pre class="brush:css"></pre>
<pre class="brush:java"></pre> 
<pre class="brush:jscript"></pre>
<pre class="brush:php"></pre> 
<pre class="brush:python"></pre>
<pre class="brush:ruby"></pre> 
<pre class="brush:sql"></pre>
<pre class="brush:vb"></pre> 
<pre class="brush:xml"></pre>
<pre class="brush:perl"></pre> 

Links and references
  1. Syntax Highlighter
  2. Download
  3. Visit downlaod page
  4. Use online

No comments:

iPhone Launch Screen Sizes

iPhone Portrait iOS 8 Retina HT 5.5 = 1242 X 2208 Retna HD 4.7 = 750 X 1134 iPhone Landscape iOS 8 Retina HD 5.5  2208 X 1242 iPho...