Features

<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! -->

Download

Only need 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 the typical vampire vim vim-dark whatis whitengrey zellner styles? Copy the following CSS to your own stylesheet. (~5KB)

/*-------- Snippet Base Styles ----------*/
.snippet-wrap {position:relative;}
*:first-child+html .snippet-wrap {display:inline-block;}
* html .snippet-wrap {display:inline-block;}
.snippet-reveal{text-decoration:underline;}
.snippet-wrap .snippet-menu, .snippet-wrap .snippet-hide {position:absolute; top:10px; right:15px; font-size:.9em;z-index:1;background-color:transparent;}
.snippet-wrap .snippet-hide {top:auto; bottom:10px;}
*:first-child+html .snippet-wrap .snippet-hide {bottom:25px;}
* html .snippet-wrap .snippet-hide {bottom:25px;}
.snippet-wrap .snippet-menu pre, .snippet-wrap .snippet-hide pre {background-color:transparent; margin:0; padding:0;}
.snippet-wrap .snippet-menu a, .snippet-wrap .snippet-hide a {padding:0 5px; text-decoration:underline;}
.snippet-wrap pre.sh_sourceCode{padding:1em;line-height:1.8em;overflow:auto;position:relative;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
box-shadow: 2px 2px 5px #000;
-moz-box-shadow: 2px 2px 5px #000;
-webkit-box-shadow: 2px 2px 5px #000;}
.snippet-wrap pre.snippet-textonly {padding:2em;}
*:first-child+html .snippet-wrap pre.snippet-formatted {padding:2em 1em;}
* html .snippet-wrap pre.snippet-formatted {padding:2em 1em;}
.snippet-reveal pre.sh_sourceCode {padding:.5em 1em; text-align:right;}
.snippet-wrap .snippet-num li{padding-left:1.5em;}
.snippet-wrap .snippet-no-num{list-style:none; padding:.6em 1em; margin:0;}
.snippet-wrap .snippet-no-num li {list-style:none; padding-left:0;}
.snippet-wrap .snippet-num {margin:1em 0 1em 1em; padding-left:3em;}
.snippet-wrap .snippet-num li {list-style:decimal-leading-zero outside none;}
.snippet-wrap .snippet-no-num li.box {padding:0 6px; margin-left:-6px;}
.snippet-wrap .snippet-num li.box {border:1px solid; list-style-position:inside; margin-left:-3em; padding-left:6px;}
*:first-child+html .snippet-wrap .snippet-num li.box {margin-left:-2.4em;}
* html .snippet-wrap .snippet-num li.box {margin-left:-2.4em;}
.snippet-wrap li.box-top {border-width:1px 1px 0 !important;}
.snippet-wrap li.box-bot {border-width:0 1px 1px !important;}
.snippet-wrap li.box-mid {border-width:0 1px !important;}
.snippet-wrap .snippet-num li .box-sp {width:18px; display:inline-block;}
*:first-child+html .snippet-wrap .snippet-num li .box-sp {width:27px;}
* html .snippet-wrap .snippet-num li .box-sp {width:27px;}
.snippet-wrap .snippet-no-num li.box {border:1px solid;}
.snippet-wrap .snippet-no-num li .box-sp {display:none;}

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 */

<!-- clipboard -->
<h1>Clipboard Example</h1>
<p>Clipboard path defined</p>

<!-- 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>

<!-- 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>

<!-- menu -->
<h1>Menu Example</h1>
<p>Hover menu disabled</p>

<!-- startText -->
<h1>startText Example</h1>
<p>Starts on text-view by default</p>

6.) Parameters & Defaults

Examples (click to randomize style)

<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>

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

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

<?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

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.