Prism Syntax Highlighter

by kompiajaib

HTML

<script src="http://kang-is.googlecode.com/svn/trunk/javascript/prism.js"></script>
<pre><code class="language-markup">
&lt;div class='menu'&gt;&amp;#8801;&lt;/div&gt;<br />
&lt;div id='css-menu'&gt;<br />
&lt;nav id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'&gt;<br />
&lt;ul&gt;<br />
&nbsp; &lt;li class='home'&gt;&lt;span class='close-menu' style='font-size:26px;font-weight:400;position:relative' title='Close'&gt;&amp;#8801;&lt;/span&gt;&lt;/li&gt;<br />
&nbsp; &lt;li&gt;&lt;a href='http://www.kompiajaib.com/' itemprop='url' title='Home'&gt;&lt;span itemprop='name'&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &nbsp;&lt;li&gt;&lt;a href='#' itemprop='url' title='Daftar Isi'&gt;&lt;span itemprop='name'&gt;Daftar Isi&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &nbsp;&lt;li class='has-sub'&gt;&lt;a href='#' title='About This Blog'&gt;&lt;span&gt;About This Blog&lt;/span&gt;&lt;/a&gt;<br />
&nbsp; &nbsp; &nbsp; &lt;ul&gt;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li&gt;&lt;a href='#' itemprop='url' title='About'&gt;&lt;span itemprop='name'&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li&gt;&lt;a href='#' itemprop='url' title='Contact'&gt;&lt;span itemprop='name'&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;li class='last'&gt;&lt;a href='#' itemprop='url' title='Privacy'&gt;&lt;span itemprop='name'&gt;Privacy&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &nbsp; &nbsp; &lt;/ul&gt;<br />
&nbsp; &nbsp;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href='#' itemprop='url' title='Forum'&gt;&lt;span itemprop='name'&gt;Forum&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br />
&lt;li&gt;&lt;a href='#' itemprop='url' title='Pasang Iklan'&gt;&lt;span itemprop='name'&gt;Pasang Iklan&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;<br />
&nbsp; &nbsp;&lt;li class='has-sub'&gt;&lt;a href='#' title='More'&gt;&lt;span&gt;Web Tools&lt;/span&gt;&lt;/a&gt;<br...

CSS

/* Tema : LightSyntax oleh Kang Ismet
URL: http://blog.kangismet.net/2013/05/prism-syntaxhighlighter-untuk-blogger.html */ 
pre {
margin:15px 15px 15px 0;
padding:10px;clear:both;
background:#f2f2f2;
color:#666;
border:1px solid #ddd;
overflow:auto;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 12px !important;
}
code {
color:#126AAF;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 13px !important;
}
code .token.punctuation {
  color:#83405A;
}
pre code .token.punctuation {
  color:#800000;
}
code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#008200;
}
code .namespace {
  opacity:.8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#881280;
}
code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#994500;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#994500;
}
code .token.operator {
  color:#878A85;
}
code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}
pre code .token.atrule,
pre code .token.attr-value {
  color:#227BC0;
}
code .token.keyword {
  color:#881280;
  font-style:italic;
}
code .token.comment {
  font-style:italic;
}
code .token.regex {
  color:#B43D3D;
}
code .token.important {
  font-weight:bold;
}
code .token.entity {
  cursor:help;
}

pre.line-numbers {
	position: relative;
	padding-left: 3.8em;
	counter-reset: linenumber;
}

pre.line-numbers > code {
	position: relative;
}

.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;
	font-size: 100%;
	left: -3.8em;
	width: 3em; /* works for line-numbers...