menggabung beberapa pendukung tampilan syntax higlighter untuk blogspot

Diposting oleh: Admin Referensi Blog pada: Waktu On Line :kak:

cuma iseng iseng memodifikasi widget syntax dengan beberapa widget yg serupa.
bila kalian berminat ikuti saja petunjuk selanjutnya.

namun sebelum itu , lihat dulu hasil perubahan di bagian pembungkus <div........

nah , kalian ubah style nya di seputaran itu .

karna tipe font awesome ada beberapa , di antaranya ada yang memakai fa dan juga icon , alangkah baiknya kalian memasang beberapa link rell nya.

ini beberapa link alternatif yang bisa kalian gunakan :
<link href='//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>
<link href='path/to/bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
<link href='path/to/font-awesome/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

mau pasang semuanya , silahkan.


pre {
position:relative}

pre .c_b {

  display:block;

  position:absolute;

  top:0px;

  right:0;

  padding:2px 0px;

}


<script type='text/javascript'>
//<![CDATA[
function copy_code(id) {
    var ref = document.getElementById(id),
        code = ref.getElementsByTagName('code')[0].innerHTML,
        w_w = window.innerWidth,
        w_h = window.innerHeight,
        win = window.open('', '', 'left=' + ((w_w/2)-250) + ',top=' + ((w_h/2)-150) + ',width=500,height=300,scrollbars=0');
    win.document.write('<!DOCTYPE html><html><head><title>Source Code</title><style type="text/css">*{margin:0;padding:0}body{padding:10px;text-aign:center}textarea{display:block;width:98%;height:270px;padding:1px 1px;margin:0 auto;text-align:left;overflow:auto}</style></head><body><textarea>' + code.replace(/<(.*?)>/g, "") + '</textarea><scr' + 'ipt type="text/javascript">var a=document.getElementsByTagName(\'textarea\')[0];a.focus();a.select();</scr' + 'ipt></body></html>');
}

function add_copy_button() {
    var pre = document.getElementsByTagName('pre');
    for (var i = 0; i < pre.length; i++) {
        pre[i].id = 'code-' + i;
        pre[i].className += ' quick-copy';
        pre[i].innerHTML += '<a class="c_b" href="javascript:copy_code(\'code-' + i + '\');"><button class="btn btn-inverse btn-small">copy <i class="icon-folder-open"></i></button></a>';
    }
} add_copy_button();
//]]>
</script>


<style>
pre code {
  display: block; padding: 0.5em;
  background: #272822;
}
pre .tag,
pre .tag .title,
pre .keyword,
pre .literal,
pre .change,
pre .winutils,
pre .flow,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tex .special {
  color: #F92672;
}
pre code {
  color: #DDD;
}
pre code .constant {
  color: #66D9EF;
}
pre .class .title {
    color: white;
}
pre .attribute,
pre .symbol,
pre .symbol .string,
pre .value,
pre .regexp {
color: #BF79DB;
}
pre .tag .value,
pre .string,
pre .subst,
pre .title,
pre .haskell .type,
pre .preprocessor,
pre .ruby .class .parent,
pre .built_in,
pre .sql .aggregate,
pre .django .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .javadoc,
pre .django .filter .argument,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .attr_selector,
pre .pseudo,
pre .addition,
pre .stream,
pre .envvar,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .prompt {
  color: #A6E22E;
}
pre .comment,
pre .java .annotation,
pre .python .decorator,
pre .template_comment,
pre .pi,
pre .doctype,
pre .deletion,
pre .shebang,
pre .apache .sqbracket,
pre .tex .formula {
  color: #75715E;
}pre .keyword,
pre .literal,
pre .css .id,
pre .phpdoc,
pre .title,
pre .haskell .type,
pre .vbscript .built_in,
pre .sql .aggregate,
pre .rsl .built_in,
pre .smalltalk .class,
pre .diff .header,
pre .chunk,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .tex .special,
pre .request,
pre .status { 
font-weight: bold;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}

pre {position:relative}
pre .c_b {
  display:block;
  position:absolute;
  top:0;
  right:0;
  padding:2px 5px;
}
</style>
 <script src="https://problogizjs.googlecode.com/files/highlight.pack.js"></script>
 <script>hljs.initHighlightingOnLoad();</script>


<div style="background: #2c3e50; border-radius:10px 10px 0px 0;padding: 10px; text-align: center;">
<b><span style="color: #cccccc;">contoh CSS [pakai css mentah], maksudnya jangan tambah &lt;style&gt;
</span></b></div>
<div style="background: transparent; border: 1px solid #2c3e50; padding: 10px; text-align: left;">
<pre><code>
------kode-------
</code></pre>
</div>

font awedome
boostrap
dte.web.id
problogiz.blogspot.com
referensi-blog.blogspot.com

referensi blog

menggabung beberapa pendukung tampilan syntax higlighter untuk blogspot

Tambahkan komentar Komentator