Syntax Highlighter Full Color Versi Zure Design Keren

Syntax Highlighter Full Color Versi Zure Design Keren

Syntax Highlighter Full Color Versi Zure Design. Untuk kali ini aku bergotong-royong tidak bermaksud untuk membagikan tutorial pemasangan syntax Highlighter pada blog. Hanya alasannya yaitu dikala ini syntax Highlighter aku tiba-tiba jadi acak acakan dikala mau bikin postingan. Sekalian sambil browsing di mbah google aku menemukan Syntax Highlighter versi zure design. Cukup keren juga sih sesudah dicoba Dan ini aku bagikan kepada teman-teman blogger barang kali ada yang minat.

Cara memasang Syntax Highlighter

Langsung saja aku berikan tutorial singkat pemasangan syntax Highlighter pada blog, ini berjalan optimal di blogger bila buat wordpress aku belum coba, untuk yang blog wordpress mau coba silahkan. Untuk kalian yang menggunakan blog blogger ikuti langkah-langkah dibawah ini.

  Penting

Sebaiknya parse dulu scriptnya sebelum dipasang. Supaya script yg dicopy atau dibentuk dapat teratur sesuai dengan bentuk struktur script yang asli.

1. Langkah pertama buka dasbor blogger >> Template>> Edit Template>> Kalian copy Script CSS dibawah ini sempurna diatas tag ]]></b:skin>

/* CSS Syntax Highlighter */ pre {padding:35px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#333;position:relative;max-height:500px;box-shadow:0 0 0 1px #eee;border-radius:3px;} pre::before {font-size:13px;content:attr(title);position:absolute;top:0;background-color:transparent;padding:6px 10px 7px 10px;left:0;right:0;color:#333;display:block;margin:0 0 15px 0;font-weight:700;box-shadow:0 0 3px #ccc;} pre::after {content:"Double click to selection";padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:4px;font-size:12px;color:#888;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:#aaa;background-color:transparent; padding:1px 2px;font-size:12px;} pre code {display:block;background:none;border:none;color:#aaa;direction:ltr; text-align:left;word-spacing:normal;padding:10px;font-weight:bold;} code .token.punctuation {color:#bbb;} pre code .token.punctuation {color:#777;} code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {color:#aaa;} code .namespace {opacity:.8;} code .token.property,code .token.tag,code .token.boolean,code .token.number {color:#d75046;} code .token.selector,code .token.attr-name,code .token.string {color:#88a9ad;} pre code .token.selector,pre code .token.attr-name {color:#00a1d6;} pre code .token.string {color:#6fb401;} code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {color:#5ac954;} code .token.operator {color:#1887dd;} code .token.atrule,code .token.attr-value {color:#009999;} pre code .token.atrule,pre code .token.attr-value {color:#1baeb0;} code .token.keyword {color:#e13200;font-style:italic;} code .token.comment {font-style:italic;} code .token.regex {color:#ccc;} code .token.important {font-weight:bold;} code .token.entity {cursor:help;} pre mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;} code mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;} pre code mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;} .comments pre {padding:10px 10px 15px 10px;background:#333;border-radius:3px;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);text-shadow:0 -1px 0 rgba(0,0,0,0.3);} .comments pre::before {content:'Code';font-size:10px;font-weight:700;position:relative;top:0;background-color:#363636;padding:2px 8px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;border:none;border-radius:2px;border:1px solid #2a2a2a;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),inset 0 20px 20px rgba(255,255,255,0.1);text-shadow: 0 -1px 0 rgba(0,0,0,0.3);} .comments pre::after {font-size:11px;} .comments pre code {color:#aaa;} .comments pre.line-numbers {padding-left:10px;} pre.line-numbers {position:relative;padding-left:3.0em;counter-reset:linenumber;} pre.line-numbers > code {position:relative;} .line-numbers .line-numbers-rows {height:100%;position:absolute;top:0;font-size:100%;left:-3.5em;width:3.5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:10px 0 0 0;background:#444;} .line-numbers-rows > span {display:block;counter-increment:linenumber;} .line-numbers-rows > span:before {content:counter(linenumber);color:#aaa;display:block; padding-right:0.8em;text-align:right;transition:350ms;} pre[data-codetype="ScriptKu"]:before{background-color:#fff;} 

2. Untuk langkah kedua ini kalian tinggal copy saja Script dibawah daerah diatas tag </body>

3. Klik Simpan template dan silaah dicoba. Untuk menerapkan scriptnya pada postingan yang menggunakan script, kalian copy code dibawah ini saat mau membuat postingan dengan cara klik Postingan >> Entri Baru >> Arahkan pada bab HTML.

<pre data-codetype="Kodeku" title="LENKTECH"><code class="language-css"> .....Copy Code Scriptnya..... </code></pre>