Cara Gampang Simple Pre Code Dengan Seleksi Di Blog

   Halo sahabat kali ini aku akan sharing bagaimana cara melaksanakan simple pre code di blog kalian masing-masing.Bagi sahabat yang sering menyebarkan tutorial blogger tentunya sudah tidak abnormal lagi tetang penerpan code HTML, CSS atau lain-lain . Dan sebagai wadah menerapkan code-code tersebut pada postingan sahabat perlu membungkus kode-kode terbungkus dengan tag pre

Berikut adalh pola cod HTML yang telah terbungkus tag pre

<pre><code><button>pressme</button></code></pre>

begitulah pola code yg telah di bungkus oleh tag pre kini mari kita buat

Memasang prism Syntax Highligher di Blogger

Nah disii aku akan mencoba sharing scrip sederhana yang dapat sahabat terapkan di blog

OK langkah-langkahnya menyerupai berikut :

1.Buka Blogger > Templates > KLik edit HTML > Simpan code css di bawah ini sebelum code ]]></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; }

2.Langkah berikutnya tambahkan scrip di bawah ini sebelum tag pentup </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> 

Scrip diatas berfungsi menyeleksi otomatis kalau sahabat melaksanakan doble click pada area yg di bungkus tag pre

3.Langkah berikutnya simpan template anda

Untuk penerapan di postingan silahkan terapkan aba-aba di bawah ini

<pre class='code code-html'><label>HTML</label><code>... code html  yg ingin dalam block ...</code></pre>  <pre class='code code-css'><label>CSS</label><code>... aba-aba CSS code yg ingin dalam block ...</code></pre>  <pre class='code code-javascript'><label>JS</label><code>... aba-aba JavaScript code yg ingin dalam block ...</code></pre>  <pre class='code code-jquery'><label>Jquery</label><code>... aba-aba jQuery code yg ingin dalam block ...</code></pre>

scrip diatas akan membungkus aba-aba dengan warna putih kalau anda ingin merubah warnanya menjadi hitam ganti ccs diatas dengan css 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; }

Demikianlah penerapan simple pr code di postingan blog biar bermanfaat

sumber : /search?q=simple-pre-code-dengan-seleksi