Cara Membuat Simple Pre Code

Apa itu Pre Code ?

Bagi teman-teman yang sudah sering berbagi ilmu tutorial blogger pasti sudah tidak asing lagi  kan dengan penerapan baik itu HTML, CSS , JavaScript maupun JQuery ?. Namun bagi blogger yang sedikit awam mungkin masih asing mendengan kata kata tersebut. Kalau menurut saya pre code itu seperti wadah tempat menampung kode yang sudah di parse(khusus HTML atau JavaScript). Dibawah ini adalah contoh penggunaan pre code .

<li><a href='#'>Test</a></li>

Contoh di atas merupakan contoh HTML yang sebelumnya sudah di parse manual atau dengan tool
seperti yang pernah saya buat lalu di masukkan ke dalam tag pre code.

Baca Juga: Code Converter HTML Parse

Oke langsung saja.

1. Buka Blogger Template Edit HTML lalu copy code di bawah ini dan paste  kode sebelum
]]></b:skin> atau </style>   

body {
  background:#eee;
  padding:0;
  margin:0;
}

#wrapper {
  padding:5%;
  margin:0 auto;
}

/* 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;
}

2. Simpan kode di bawah ini sebelum tag </body>
script ini berfungsi untuk menyeleksi otomatis semua teks yang ada di dalam tag pre ketika di klik dua kali

$('i[rel="pre"]').replaceWith(function() {
    return $('
' + $(this).html() + '
');
});
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);
}

3. Simpan template

4. Penggunaan

Untuk menggunakan simple pre code ini pada postingan  dibutuhkan kode pengaktif , tambahkan kode di bawah ini pada mode HTML (bukan compose) saat mengepos artikel. Jika hanya ingin mengeluarkan HTML hapus kode JQuery,JS,CSS. Jika hanya ingin mengeluarkan CSS hapus kode HTML,JS,JQuery

<div id='wrapper'>
<pre class='code code-html'><label>HTML</label><code> Tulis kode HTML ( yang sudah di escaped/parse )di sini </code></pre>

<pre class='code code-css'><label>CSS</label><code> Tulis kode CSS di sini tanpa di parse </code></pre>

<pre class='code code-javascript'><label>JS</label><code>  Tulis kode Javascript ( yang sudah di escaped/parse )di sini </code></pre>

<pre class='code code-jquery'><label>Jquery</label><code> Tulis kode JQuery di sini tanpa di parse </code></pre>
<div>

Untuk demo hasilnya bisa klik di tombol bawah ini

Demo
Klik Disini

Demikian tutorial saya kali ini yang berjudul "Cara Membuat Simple Pre Code"
Semoga ilmu yang saya bagikan bermanfaat bagi para pembaca


Sumber: https://codepen.io/

Diupload pada : Kamis, 21 Juli 2016

• Tweet
• Share
• Share
• Share
• Share

Tentang AdminTechnology For Future

Biasa dipanggil Radit. Masih bersekolah di SMPN 9 Denpasar. Memiliki kreatifitas dan waktu yang terbatas

Related Post