Friday, July 29, 2011

Programming language Syntax highlighter in Javascript

Syntax highlighter is a fully functional code syntax highlighter written in Javascript by Alex Gorbatchev ( Syntax highlighting is the feature where the source code written in different programming languages are displayed in different colours and fonts according to the grouping in that language.
Example: Syntax highlighting for a javascript code:

function helloSyntaxHighlighter()
{
 return "hi!";
}

How to do Syntax highlighting ?

  1. Download syntax highlighter from here. Download Latest Version
  2. Alternative to Downloading: If you dont have hosting space to host your downloaded scripts, Alex Gorbatchev provide you the already hosted scripts.So what you have to do? No need of downloading the script. Just add the following lines and Skip to Step 5
  3. <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/shAutoloader.js" type="text/javascript"></script>
    
  4. Include the shCore.js and shCoreDefault.css
  5. <script src="scripts/shCore.js" type="text/javascript"/> 
    <link href="styles/shCoreDefault.css" rel="stylesheet" type="text/css">
    
  6. Include the brush for particular language. For javascript syntax highlighting, include Javascript brush file shBrushJScript.js
  7. <script type="text/javascript" src="scripts/shBrushJScript.js"/>
    
    
    See available brushes.
  8. If you are integrating syntax highlighter in Blogger, Skip this step. Else Call the function SyntaxHighlighter.all()
  9. <script type="text/javascript">SyntaxHighlighter.all();/>  
    
  10. Blogger Integration (New in Syntax highlighter Version:3.0.83)
  11. If using in blogger, use it like
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
    
  12. Now write the code inside <pre> </pre> tags. See that all < and > are replaced with &lt; and &gt; respectively.
  13. <pre class='brush:html' >
     &lt;html&gt;
       &lt;head &gt;
       &lt;/head&gt;
       &lt;body&gt;
       &lt;body&gt;
     &lt;html&gt;
    </pre>
    


See more at : http://alexgorbatchev.com/SyntaxHighlighter/

Syntax Highlighter Evolved - Wordpress Plugin

SyntaxHighlighter Evolved is a wordpress plugin which works based on Alex Gorbatchev's Syntax highlighter .

How wordpress plugin?

  1. Install the wordpress plugin directly or by uploading the zipped file into wp-content/plugins and activate it.
  2. Just wrap your code in [language], such as [php]code here[/php] or [css]code here[/css].
  3. The shortcodes accept a wide variety of parameters. These are listed in plugin settings page.