vanGogh Syntax Highlighter

by erick

HTML

<script src="https://raw.github.com/mekwall/jquery-vangogh/master/src/jquery.vangogh.min.js"></script>
<h1>Belajar BackboneJS</h1>
<p>Backbone js sebenarnya konsepnya hampir sama seperti mvc(Model View Controller) milik microsoft asp.NET, bedanya kalo ini memiliki model, view, collection dan router</p>
<h2>Contoh Membuat Model</h2>
<p>Kali ini gue akan menjelaskan cara menggunakan backbone js, pertama gue jelasin model atau bisa dibilang object dan property propertynya, kalo yang masih awam dalam dunia programming bisa dibilang data utama/pokok yang akan di otak atik.... hehehe, bagi yang masih awam dengan javascript ke<a href="#">sini</a> aja dulu</p>
<pre id="c"><code class="language-javascript">
//propertynya yang di definisikan dengan defaults
var Book = Backbone.Model.extend({
   defaults: {
      photo: "",
      kode: "",
      judul: "",
      subJudul:"",
      isbn: "",
      bibliografi: "",
      type: ""
   }
});
</code></pre>
<p>di samping itu gue juga bisa mendapatkan value dari salah satu property dengan cara seperti ini</p>
<pre id="c"><code class="language-javascript">
//instance dari model
var b = new Book();
//mengambil value isbn dengan get
b.get('isbn');
//untuk mengececk di console
console.log(b.get('isbn'), "ini nilai isbn");
</code></pre>
kita juga bisa memberi value dengan cara begini
<pre id="c"><code class="language-javascript">
//instance dari model
var b = new Book({isbn:"1234"});
//mengambil value isbn dengan get
b.get('isbn');
//maka yang didapat valuenya = 1234
//untuk mengececk di console
console.log(b.get('isbn'), "ini nilai isbn");
</code></pre>
<p>Oh kamu juga bisa membuat data berupa array kayak gini</p>

<h2>without gutter</h2>
<pre><code class="javascript">// Van Gogh; express your code in color
var setArray = function(elems) {
    this.length = 0; // This is a comment
    push.apply(this, elems);
    return this;
}

var foo = "Hello world!";</code></pre>

<br />

<h2>inline highlighting</h2>

<p>You can easily highlight...

CSS

body, html {
    font: 13.34px helvetica,arial,freesans,clean,sans-serif;
}
 
body {
    line-height: 1.4;
    padding: 20px 30px;
}

p { 
    margin: 1em 0; 
    font-size: 1.1em; 
}
 
h1 {
    margin-bottom: 0;
    font-size: 30px;
    height: 54px;
    line-height: 54px;
    font-weight: bold;
    letter-spacing: -1px;
    text-shadow: 1px 1px 0 white;
    color: #495961;
}
 
h2 {
    color: #4183C4;
    font-size: 1.9em;
    height: 2em;
    line-height: 2em;
    font-weight: bold;
}

/* here thy artist beginst hast work */
.vg-container {
    position: relative;
    overflow: auto;
}
 
.vg-container,
.vg-code {
    border: 0;
    margin: 0;
}
 
.vg-container .vg-line,
.vg-container .vg-number {
    display: block;
    height: 1.5em;
    line-height: 1.5em !important;
}
 
.vg-gutter {
    float: left;
    min-width: 20px;
    width: auto;
    -o-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
 
.vg-number {
    cursor: pointer;
}
 
/*
github.com style (c) Vasily Polovnyov <[email protected]>
extended and modified for vanGogh by Marcus Ekwall <[email protected]>
*/
 
.vg-container {
    font-family: 'Bitstream Vera Sans Mono', 'Courier New', monospace;
    font-size: 12px;
    border: 1px solid #ddd;
}
 
.vg-gutter {
    background-color: #ececec;
    border-right: 1px solid #ddd;
    text-align: right;
    color: #aaa;
    padding: 1em .5em;
    margin-right: .5em;
}

.vg-code *::-moz-selection,
.vg-code *::-webkit-selection,
.vg-code *::selection,
.vg-line.vg-highlight {
    background-color: #ffc;
}
 
.vg-line span.vg-highlight {
    color: blue;
    font-weight: bold;
    text-decoration: underline;
}
 
.vg-container .vg-code {
    display: block;
    padding: 1em .5em;
    background: #fff;
}
 
.vg-code {
    color: #000;
    background: #f8f8ff;
    border: 0;
    padding: .4em;
}
 
.vg-code .comment,
.vg-code...

JavaScript

$(function() {
    // default
    $("#c").vanGogh();
    
    // without numbers/gutter and horizontal scrolling
    $("pre:eq(1), pre:eq(2)").vanGogh({ numbers: false });
    
    // inline highlighting
    $("code.inline").vanGogh();
    
    // remote source
    $("#r").vanGogh({ source: "/deid4r4/gkStE/show/", maxLines: 20 });
});