Usage

Prism.js is a lightweight syntax highlighter with no dependencies. It's quite easy to work with too … All you need to do is include js/libs/prism.js and styles/syntax-highlighting.css

Example

Wrap your snippet in a <code class="language-*lang*"></code> tag. That <code></code>-tag can optionally be wrapped in a <pre></pre> tag if you want preformatted output.


<pre><code class="language-*lang*">
    <!-- Preformatted code -->
</code></pre>

In other words, wrap in a pre-tag if you want multiple lines as opposed to inline code.

Beware that indentation can mess up the padding around the code a bit, so if you get big marins try un-indenting your code snippet

The theme supports the following languages

  1. HTML
  2. scss
  3. css
  4. JavaScript
  5. PHP

And here's how those different languages look:


<!-- Here's a basic web page -->
<!doctype html>
<html lang="en-US">
<head>
	<meta charset="utf-8">
	<title>Untitled</title>
</head>
<body>
	<div id="container">
		<header>
			<h1>Untitled</h1>
		</header>
		<div id="main" role="main">
			 <p>Here's some content...</p>
		</div>
	</div>

	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
	<script>
		$(function() {
			log('DOM is Ready ...');
		});
	</script>
</body>
</html>


// Add code type before code box
pre {
	position: relative;

	&:before {
		padding: .5em 0;
		@include background(linear-gradient(#333, black));
		@include border-radius(4px 4px 0 0);
	}

	code {
		display: block;
	}
}


/* line 251, syntax-highlighting.scss */
pre {
	position: relative;
}
/* line 254, syntax-highlighting.scss */
pre:before {
	padding: .5em 0;
	background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(100%, #000000));
	background: -webkit-linear-gradient(#333333, #000000);
	background: -moz-linear-gradient(#333333, #000000);
	background: -o-linear-gradient(#333333, #000000);
	background: linear-gradient(#333333, #000000);
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	-ms-border-radius: 4px 4px 0 0;
	-o-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
}
/* line 269, syntax-highlighting.scss */
pre code {
	display: block;
}


	function highlight(text, grammar) {
		return Token.stringify(_.tokenize(text, grammar));
	}

	highlight( "My fantastic code", "JavaScript" );


/*-----------------------------------------------------------------------------------*/
/*	Human readable time. '7 hours ago', '2 days ago', etc.
/*-----------------------------------------------------------------------------------*/
function time_ago($timestamp) {
	$t1 = new DateTime( 'now' );
	$t2 = new DateTime( '@'.$timestamp );

	foreach ( $t2->diff( $t1 ) as $period => $value )
	{
		if ( $value > 0 && strlen( $period ) == 1 )
		{
			switch ($period)
			{
				case 'y': $name = 'year'; break;
				case 'm': $name = 'month'; break;
				case 'd': $name = 'day'; break;
				case 'h': $name = 'hour'; break;
				case 'i': $name = 'minute'; break;
				case 's': $name = 'second'; break;
			}
			return $value.' '.$name.($value>1?'s':'').' ago';
		}
	}

	return '0 seconds ago';
}