13:31
4
Ad by Google
Sponsored Links
What is SyntaxHighlighter?
SyntaxHighlighter helps developers to display code on their website. It is used for readability improvement. SyntaxHighlighter runs in the browser which means it doesn't care what kind of server you have. In fact, SyntaxHighlighter can run locally on your computer without any web server at all.


Some salient features of SyntaxHighlighter :-

  • SyntaxHighlighter is a fully functional self-contained code.
  • It is an open source client side code.
  • Syntax highlighter developed in JavaScript.
  • It is currently used by Apache, Aptana, Mozilla, Yahoo, Wordpress, Bug Labs, Freshbooks and others.
  • SyntaxHighlighter was originally created in 2004 and is still maintained by Alex Gorbatchev.
  • The latest SyntaxHighlighter version is 3.0.83 Click here to check latest version update.
Previous Versions
2.0.278
2.0.287
2.0.296
2.0.320
2.1.364
2.1.382

SyntaxHighlighter comes with almost 30 brushes out of the box. One of the most requested feature has been the ability to dynamically load them without having to load them all on the same page.
SyntaxHighlighter uses separate syntax files called brushes to define its highlighting functionality.

SyntaxHighlighter installation guide for website or blog :-
To get SyntaxHighlighter to work on your page, you need to do the following:

1. Download the latest SyntaxHighlighter version and upload all javascript and CSS file to available hostable place

If you don’t have a place to upload, you can use a free hosted version. This allows you to link to a specific that you need or to the most current, latest release. Currently, there are a number of available versions hosted:
http://alexgorbatchev.com/pub/sh/1.5.1/
http://alexgorbatchev.com/pub/sh/2.0.278/
http://alexgorbatchev.com/pub/sh/2.0.287/
http://alexgorbatchev.com/pub/sh/2.0.296/
http://alexgorbatchev.com/pub/sh/2.0.320/
http://alexgorbatchev.com/pub/sh/2.1.364/
http://alexgorbatchev.com/pub/sh/2.1.364/
http://alexgorbatchev.com/pub/sh/2.1.382/
http://alexgorbatchev.com/pub/sh/current/

How to use these hosted versions
Simple! Just create <script /> and <link /> tags on your pages and point them to the proper files, like so:

For CSS file : styles/fileName.css
<link href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

For Js file : scripts/fileName.js
<script src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js" type="text/javascript"></script>

2. Add required JS files to your page: shCore.js
<script type="text/javascript" src="js/shCore.js"></script>

3. Add brushes that you want (for example, shBrushJScript.js for JavaScript, see the list of all available brushes and aliases.)
<script type="text/javascript" src="css/shBrushJScript.js"></script>

4. Include at least the core style and default theme: shCore.css and shThemeDefault.css
<link href="css/shCore.css" rel="stylesheet" type="text/css" />
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />

5. Call SyntaxHighlighter.all() JavaScript method
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

6. Create a code snippet with either <pre /> or <script /> method

<pre class="brush: js">
function fun()
{
}
</pre>

Here "js" is aliase of shBrushJScript.js javaScript file

Example:
<!-- Include CSS and JS files -->
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script>

<!-- Finally run the highlighter -->
<script language='javascript'> 
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
Note: If you want to use in blogger, must include this method..
SyntaxHighlighter.config.bloggerMode = true;

Now you can use this highlighter anywhere on your page by PRE tag..

<pre class="brush: js">
function fun()
{
}
</pre>
License
You may use any SyntaxHighlighter project under the terms of either the MIT License or the GNU General Public License (GPL) Version 3. You are free to use a SyntaxHighlighter project in commercial projects also.
The MIT License is recommended for most projects. It is simple and easy to understand and it places almost no restrictions on what you can do with a SyntaxHighlighter project.
Sponsored Links
Newer Post
Previous
This is the last post.

4 comments:

  1. Thanks to my father who informed me on the topic of this website, this website is really awesome. itunes store login

    ReplyDelete
  2. Replies
    1. whoah this weblog is excellent i love studying your posts. Keep up the good work! You recognize, many individuals are looking around for this info, you could help them greatly. WordPress

      Delete
  3. I'm really grateful to have found such a great resource. My boss always asks me to find ways to improve our site and this has been extremely helpful! I'm definitely bookmarking your site and using it as a resource for any coding projects. Thank you so much.

    ReplyDelete