Memasang Simple Pre Code Dengan Seleksi

Bloggerisn - Memasang Simple Pre Code Dengan Seleksi. Hai sobat Blogger, kali ini saya akan memberikan tutorial pertama untuk Anda, dan pastinya Sobat tidak asing dengan kata Pre. Bagi sebagian sobat blogger yang memberikan tutorial di blognya tentang HTML, CSS, ataupun Java Script, pasti agak sulit untuk membuat backgroud pada seleksi kodenya menjadi menarik.

Nah kali ini Saya akan memberikan tutorialnya yang saya dapatnya dari seorang blogger wanita. Arlina Fitriyani dengan Blog mantapnya arlinadesign.blogspot.com

Baca juga :

1. Memasang Prism Syntax Highlighter di Blogger

Proses Pemasangan :

1. Buka Blogger.
2. Klik Template.
3. Klik Edit HTML.
4. Simpan kode CSS dibawah ini sebelum ]]></b:skin> atau </style>

/* CSS Simple Pre Code */
pre {
    background: #fff;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
}

pre.code label {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #444;
    position: absolute;
    left: 1px;
    top: 16px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #d9d9d9;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #444;
}

pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #aaa;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #0288d1;
}

pre.code-html code {
    color: #558b2f;
}

pre.code-javascript code {
    color: #f57c00;
}

pre.code-jquery code {
    color: #78909c;
}

Berikutnya, tambahkan script berikut ini tepat diatas tag </body>

 <script type='text/javascript'>
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script> 

Fungsi dari script diatas adalah, untuk menyeleksi otomatis setiap kali Anda melakukan klik dua kali/double klik pada arean didalam tag pre, kbd, dan blockquote.

Demo

5. Selanjutnya Simpan Template.

Untuk penerapan pada postingan sobat, silahkan tambahkan kode HTML dibawah ini pada tab HTML Post bukan Compose

<pre class='code code-html'><label>HTML</label><code>... kode HTML (yang telah diparse) di sini ...</code></pre>

<pre class='code code-css'><label>CSS</label><code>... kode CSS di sini ...</code></pre>

<pre class='code code-javascript'><label>JS</label><code>... kode JavaScript di sini ...</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>... kode jQuery di sini ...</code></pre>

Jika Sobat ingin tampilan tag Pre-nya dengan warna gelap/dark, sobat bisa ganti kode CSS diatas dengan yang dibawah ini

/* CSS Simple Pre Code */
pre {
    background: #333;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}

pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #ddd;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}

pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #91a7ff;
}

pre.code-html code {
    color: #aed581;
}

pre.code-javascript code {
    color: #ffa726;
}

pre.code-jquery code {
    color: #4dd0e1;
}

Demo

Nah sekarang penerapan Pre Code Dengan Seleksi pada Blog sobat telah selesai, Bagaimana? Cukup mudah bukan?

Source

http://bloggerisn.blogspot.com/2015/05/memasang-simple-pre-code-dengan-seleksi.html

Suka Dengan Artikel Diatas? Bagikan Gratis:

• Tweet
• Share
• Share
• Share
• Share

Irham Satriawan

Saya adalah seorang yang sangat menyukai design dan juga dunia internet sobat bisa memanggil saya (CT), dengan blog ini semoga saya akan berbagi pengalaman saya kepada sobat semua.

Artikel Menarik Lainnya