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:

Azure Storage Account Types

Defferent Types of Blobs Block blobs store text and binary data. Block blobs are made up of blocks of data that can be managed individually...