Prism Syntax Highlighter

by Arlina Fitriyani

HTML

<script src="https://arlina-design.googlecode.com/svn/prism.js"></script>
<body>  
  <div class='post-body'>
    <h2 class='post-title'>Contoh Penerapan Prism Syntax Highlighter</h2>
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup">&lt;ul id=&quot;arlina-design&quot;&gt;
  &lt;li class=&quot;active&quot;&gt;
    &lt;a href=&quot;#&quot;&gt;Top&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
</br>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> #arlina-design {
    position: fixed;
    z-index: 1;
    background: white;
    left: 0;
    right: 0;
    top: 0;
}</code></pre>
</br>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript">&lt;script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/&gt;</code></pre>
</br>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript">var lastId,
    topMenu = $(&quot;#arlina-design),
    topMenuHeight = topMenu.outerHeight()+15,
    menuItems = topMenu.find(&quot;a&quot;),
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr(&quot;href&quot;));
      if (item.length) { return item; }
    }); </code></pre>
</div>   
</body>

CSS

body {
    background-color: #f9f9f9;
    font-size: 16px;
    color: #444;
}

.post-body h2 {
    color: #e25633;
    text-align: center;
}

.post-body {
    max-width: 680px;
    margin: 20px auto;
    border: 10px solid #f0f0f0;
    padding: 15px 20px;
    background-color: #fff;
    color: #444;
}

/* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code...

JavaScript

//Line Number
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})