Snippet is a jQuery syntax highlighting plugin built on top of the SHJS script found on SourceForge. Snippet provides a quick and easy way of highlighting source code passages in HTML documents.

 

Features

  • Natively supports 15 popular languages:
    • C
    • C++
    • C#
    • CSS
    • Flex
    • HTML
    • Java
    • JavaScript
    • JavaScript with DOM
    • Perl
    • PHP
    • Python
    • Ruby
    • SQL
    • XML
  • Can be extended to support:
    • Bison
    • ChangeLog
    • Desktop Files
    • Diff
    • GLSL
    • Haxe
    • Java prop files
    • LaTex
    • LDAP files
    • Log files
    • LSM files
    • M4
    • Makefile
    • Objective Caml
    • Oracle SQL
    • Pascal
    • Prolog
    • RPM spec files
    • S-Lang
    • Scala
    • Shell
    • Standard ML
    • Tcl
    • Xorg config files
  • Integration with ZeroClipboard for copy functionality
  • Plain text, pop-up, and expand/collapse options
  • Group or individual line selection
  • 39 unique color schemes
<h1>Snippet style selector</h1>

<div class="instructions">
	<p>Choose your style below.</p>
	<p>Preview your style here.</p>
</div>

<!-- 39 styles to choose from! -->

Current style:  

Prev Next
 

Download

ZeroClipboard
ZeroClipboard.swf ~1KB

Only need styles? Copy the following CSS to your own stylesheet. (~5KB)


 

Usage

1.) Add jQuery and Snippet to your HTML document.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.snippet.js"></script>

2.) Add the Snippet CSS file to your HTML document.

<link rel="stylesheet" type="text/css" href="css/jquery.snippet.css" />

3.) Inside of a <script> block, call Snippet on any <pre> element.

$(document).ready(function(){

$("pre.htmlCode").snippet("html");
	// Finds <pre> elements with the class "htmlCode"
	// and snippet highlights the HTML code within.

$("pre.styles").snippet("css",{style:"greenlcd"});
	// Finds <pre> elements with the class "styles"
	// and snippet highlights the CSS code within
	// using the "greenlcd" styling.

$("pre.js").snippet("javascript",{style:"random",transparent:true,showNum:false});
	// Finds <pre> elements with the class "js"
	// and snippet highlights the JAVASCRIPT code within
	// using a random style from the selection of 39
	// with a transparent background
	// without showing line numbers.

});

4.) Dynamically update your Snippets

$(document).ready(function(){

	$("pre#dynamic").snippet("php",{style:"navy",clipboard:"js/ZeroClipboard.swf",showNum:false});
		// Highlights a snippet of PHP code with the "navy" style
		// Hides line numbers

	$("pre#dynamic").click(function(){
		$(this).snippet({style:"vampire",transparent:true,showNum:true});
		// Changes existing snippet's style to "vampire"
		// Changes the background to transparent
		// Shows line numbers
	});

});

/* See example below */
<?php
session_start();
if(!$_SESSION['logged']){
	header("Location: login_page.php");
	exit;
}
echo 'Welcome, '.$_SESSION['username'];
?>

5.) Clipboard / Collapse / Box / Menu / StartText (new in v2.0)

/****** clipboard ******/ example

$("pre.clipboard").snippet("html",{style:"peachpuff",clipboard:"js/ZeroClipboard.swf"});
	//Clipboard path MUST be defined in order for "copy" functionality to be available.
	//Path can be relative to the document, root, or absolute (http://...) on the same domain.
	//Clipboard functionality can only be added on the initial Snippet call,
	//it cannot be dynamically added to a pre-existing snippet.




/****** collapse ******/ example

$("pre.collapse1").snippet("html",{style:"greenlcd",collapse:true});
	//Snippet will be collapsed by default.
	//Collapse functionality can only be added on the initial Snippet call,
	//it cannot be dynamically added to a pre-existing snippet.

$("pre.collapse2").snippet("html",{style:"greenlcd",collapse:true,startCollapsed:false});
	//Snippet will have collapse functionality, but will be expanded by default

$("pre.collapse3").snippet("html",{style:"greenlcd",collapse:true,
	showMsg:"Custom Show My Code",hideMsg:"Custom Hide My Code"});
	//The expand/collapse messages will be "Custom Show My Code"
	//and "Custom Hide My Code", respectively.




/****** box ******/ example

$("pre.box1").snippet("html",{style:"navy",box:"2,4-6"});
	// this will draw a box around line 2, and another box around lines 4 through 6.

$("pre.box2").snippet("html",{style:"navy",box:"4",boxColor:"red",boxFill:"black"});
	// this will draw a red box with a black background around line 4.




/****** menu ******/ example

$("pre.menu").snippet("html",{style:"dull",menu:false});
	//The hover menu will be disabled




/****** startText ******/ example

$("pre.start-text").snippet("html",{style:"bipolar",startText:true});
	//The snippet will be displayed in "text" view by default





/* See all examples below */
source
<!-- clipboard -->
<h1>Clipboard Example</h1>
<p>Clipboard path defined</p>
source
<!-- collapse -->
<h1>Collapse Example 1</h1>
<p>Default collapse</p>
<!-- collapse -->
<h1>Collapse Example 2</h1>
<p>Expanded by default</p>
<!-- collapse -->
<h1>Collapse Example 3</h1>
<p>Custom expand/collapse link</p>
source
<!-- box -->
<h1>Box Example 1</h1>
<p>
	What we're doing is
	putting boxes around
	line 2 and 4-6
</p>
<!-- box -->
<h1>Box Example 2</h1>
<p>
	Red box, black background.
</p>
source
source
<!-- startText -->
<h1>startText Example</h1>
<p>Starts on text-view by default</p>

6.) Parameters & Defaults

Language Definitions

Language
Language Code
Cc
C++cpp
C#csharp
CSScss
Flexflex
HTMLhtml
Javajava
JavaScriptjavascript
JavaScript with DOMjavascript_dom
Perlperl
PHPphp
Pythonpython
Rubyruby
SQLsql
XMLxml

Settings

Variable
Default Value
Available Values
box"" (empty string)any quoted color name ("red") or hex color ("#XXXXXX")
boxColor"" (empty string)any quoted color name ("red") or hex color ("#XXXXXX")
boxFill"" (empty string)any quoted color name ("red") or hex color ("#XXXXXX")
clipboard"" (empty string)"path/to/ZeroClipboard.swf"
collapsefalsetrue
false
hideMsg"Collapse Code""any string"
menutruetrue
false
showMsg"Expand Code""any string"
showNumtruetrue
false
startCollapsedtruetrue
false
startTextfalsetrue
false
style"random"
"acid"
"berries-dark"
"berries-light"
"bipolar"
"blacknblue"
"bright"
"contrast"
"darkblue"
"darkness"
"desert"
"dull"
"easter"
"emacs"
"golden"
"greenlcd"
"ide-anjuta"
"ide-codewarrior"
"ide-devcpp"
"ide-eclipse"
"ide-kdev"
"ide-msvcpp"
"kwrite"
"matlab"
"navy"
"nedit"
"neon"
"night"
"pablo"
"peachpuff"
"print"
"rand01"
"random"
"the"
"typical"
"vampire"
"vim"
"vim-dark"
"whatis"
"whitengrey"
"zellner"
transparentfalsetrue
false

Examples (click to randomize style)

HTML

<h1>H1 tag!</h1>
<iframe src="index.html"></iframe>
<div id="foo">
<h3>H3 html is awesome!</h3>
<span class="bar">Womp.</span>
<!-- comment -->
click here
</div>

CSS

body #main p.navy {
	text-decoration: none;
	color: navy;
	font-family: arial;
	/* font-size: 12pt; */
	font-size: 14px;
	font-weight: medium;
}

JAVASCRIPT

var a = document.getElementById("me");
function myFunc(foo) {
	var bar = foo.innerHTML;
	// comment
	alert("Text is: "+bar);
	return false;
}
myFunc(a);

PHP

<?php
session_start();
if(!$_SESSION['logged']){
	header("Location: login.php");
	exit;
}
echo 'Welcome, '.$_SESSION['user'];
?>
 

Notes

1.) Tested compatible in IE 6, IE 7, IE 8, FF 3.6, Chrome 6.0, Safari 5.0, Opera 10.62

2.) Note for IE - Within <pre> elements, it is best to indent with the "Tab" key, vs. using the spacebar to indent. When manipulating HTML with javascript, IE strips out extra white space. But tab-indents will be preserved.

3.) To extend Snippet's language support, you will need to download your desired language definition file from http://shjs.sourceforge.net/lang/.

Next, include the file on your HTML document below Snippet, and use your new language as you would any other:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.snippet.js"></script>
<script type="text/javascript" src="js/sh_pascal.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$("pre").snippet("pascal");
});
</script>

* The language name will be the filename minus the "sh_" prefix.

4.) Version Notes

Current Release jquery.snippet.2.0.0.zip ~43KB
Previous Versionsjquery.snippet.1.0.0.zip ~32KB
Reported Bugs (report a bug) - Line numbers copied along with code Use ZeroClipboard "copy" button, or copy from "text" or "pop-up" view.
Pending Fixes - "Text Only" button New in v2.0
- "New Window" button New in v2.0
- "Copy" button New in v2.0


5.) This script is released under the MIT license and is completely open to modification and redistribution.

6.) Bugs? Suggestions? Comments? Questions?

 

The script is 100% free,
but donations are appreciated.