Simple Pre Code Seleksi Bagus Buat Blog Anda

IDTGADGET - Sobat blogger pasti sudah mengenal apa itu Pre Code ya kan? buat yang belum saya jelaskan sedikit dan isngkat ya soalnya saya masih belum mahir untuk merangkai kata - kata yang panjang 😆 Pre Code berfungsi untuk menaruh kode HTML, CSS, JAVASCRIPT ataupun JQUERY di halaman posting agar terlihat rapi dan istimewa untuk di copy - paste, singkat saja simak cara memasang simple pre code seleksi di bawah ini.

Contoh posting kode HTML ⇓

<pre><code><button>Press Me!</button></code></pre>

Cara memasang kode HTML di atas tidak akan muncul jika sobat pasang langsung.

Why ?

Karena sebelum memasang kode HTML, CSS, JAVASCRIPT dan JQUERY hendak diparse dulu.

Caranya gimana mas ?

Cukup visit situs ini IDTGADGET PARSE

Oke, start saja

Masuk ke akun blog sobat -> template -> Edit HTML salin kode CSS di bawah ini sebelum </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;
}

Next salin dan simpan kode di bawah ini sebelum tag penutup </body>

<script type='text/javascript'>

//<![CDATA[

//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>

SC (Script) di atas fungsinya ketika klik dua kali akan ter seleksi semua.

Nice Save template cek hasilnya. eits belum selesai bro.

Langkah penerapan kode di postingan, simpan kode di bawah ini di notepad save di komputer sobat, saat membutuhkan tinggal copy saja tanpa harus berkunjung ke sini lagi 😋.

<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>

DEMO

Style untuk sobat jika suka gelap - gelap salin kode di bawah 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;
}