Membuat Pre Code di Blogger

Untuk para Blogger Pre Code memang bukan hal asing melainkan sudah biasa mendengar dan juga menggunakannya.
Awalnya Bnote mengetahui dari Blog Kang Ismet yang menjelaskan tentang Prism Syntax Highlighter dan juga blog Arlina Fitriyani.
Pre Code biasa digunakan untuk membungkus atau sebagai wadah kode seperti HTML, CSS, JavaScrypt maupun JQuery pada postingan blog.

Untuk Penggunaan silahkan masuk ke Blogger Pilih Template dan Klik Edit HTML
Liat kode dibawah ini simpan diatas ]]></b:skin> atau </style>

 /* Pre Code */
pre {
  padding:0;
  margin:.5em auto;
  white-space:pre;word-wrap:break-word;
  overflow:auto;
  background-color:#2e3138;
  position:relative;
  padding-top:33px;
  width:100%;
  -moz-tab-size:2;
  -o-tab-size:2;
  tab-size:2;
  word-break:normal;
  -webkit-user-select:text;
  -khtml-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
  -webkit-hyphens:none;
  -moz-hyphens:none;
  -ms-hyphens:none;
  hyphens:none;
  border-radius:4px;
}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {
  display:none;
}
pre::before {
  font-size:15px;
  font-family:'Roboto Condensed';
  font-weight:700;
  content:attr(title);
  position:absolute;
  top:0;
  padding:7px 0;
  left:0;
  right:0;
  color:#fff;
  display:block;
  margin:0;
  text-indent:15px;
}
pre::after {
  content:"double click to selection";
  padding:0;
  width:auto;
  height:auto;
  position:
  absolute;
  right:18px;
  top:0;
  font-size:13px;
  color:#fff;
  line-height:20px;
  overflow:hidden;
  -webkit-backface-visibility:hidden;
  opacity:0;
  transition:all 0.3s ease;
}
pre:hover::after {
  opacity:1;
  top:10px;
  visibility:visible;}
pre code {
  display:block;
  background:none;
  border:none;
  color:#fff;
  padding:15px;
  font-family:'Source Code Pro', Menlo, Consolas, Monaco, monospace;
  font-size:0.83rem;
  white-space:pre;overflow:auto;
}
code .token.important {
  font-weight:bold;
}
code .token.entity {
  cursor:help;
}
pre mark,code mark,pre code mark {
  background-color:#5580e4!important;
  color:#fff!important;
  padding:2px;
  margin:0 2px;
  border-radius:2px;
}
pre[data-codetype="CSS"]:before,pre[data-codetype="HTML"]:before, pre[data-codetype="JavaScript"]:before,pre[data-codetype="JQuery"]:before {
  background-color:#469EF1;
}

Dan simpan juga kode scrypt dibawah ini tepat diatas kode </body> . Scrypt dibawah berfungsi untuk memblock otomatis semua kode yang terbungkus tag pre saat diklik 2x

<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 &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

Jika sudah Klik Simpan Template. Masih Belum Selesai yang terakhir adalah penggunaannya pada saat akan memposting Liat kode dibawah

<pre title="HTML" data-codetype ="HTML"><code class="language-markup"> ... kode HTML di sini ... </code></pre>
<pre title="CSS" data-codetype ="CSS"><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScript"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre title="jQuery" data-codetype ="JQuery"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>

Selesai. Selamat berbagi kode kode.

Tweet