Powered by:

Features

<h1>Snippet style selector</h1>

<div>
	<p>Choose your style below.</p>
	<p>Preview your style here.</p>
</div>

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

Download

Only need 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; .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-.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-px 1px 0 !important;}
.snippet-wrap li.box-bot {border-px 1px !important;}
.snippet-wrap li.box-mid {border-px !important;}
.snippet-wrap .snippet-num li .box-sp {px; display:inline-block;}
*:first-child+html .snippet-wrap .snippet-num li .box-sp {px;}
* html .snippet-wrap .snippet-num li .box-sp {px;}
.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="/img/spacer.gif"> 

2.) Add the Snippet CSS file to your HTML document.
<link rel="stylesheet" type="text/css" class="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 (...) 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
<!-- menu -->
<h1>Menu Example</h1>
<p>Hover menu disabled</p>




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




6.) Parameters & Defaults



Language Definitions

Language
Language Code



C
c
C++
cpp
C#
csharp
CSS
css
Flex
flex
HTML
html
Java
java
JavaScript
javascript
JavaScript with DOM
javascript_dom
Perl
perl
PHP
php
Python
python
Ruby
ruby
SQL
sql
XML
xml





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"
collapse
false
true
false
hideMsg
"Collapse Code"
"any string"
menu
true
true
false
showMsg
"Expand Code"
"any string"
showNum
true
true
false
startCollapsed
true
true
false
startText
false
true
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"
transparent
false
true
false

Examples (click to randomize style)

<h1>H1 tag!</h1>
<br src="/img/spacer.gif"> 

body #main p.navy {
	text-decoration: none;
	color: navy;
	font-family: arial;
	/* pt; */
	px;
	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 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="/img/spacer.gif"> 

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

4.) Version Notes


Current Release
jquery.snippet.2.0.0.zip ~43KB

Previous Versions
jquery.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.