Penerapan Pre Code Dengan seleksi

Selamat Datang Di Newbie Weblog Kali ini Saya akan Berbagi Tutorial Blog Yaitu Memasang Pre Code Dengan seleksi bagi Sobat Blogger Yang Biasanya Berbagi Tutorial Blogger Pasti Tidak Asing Dengan penerapan Kode HTML,CSS,Javascript Dan JQuery Sobar perlu Membyungkus Kode setiap Kode Tersebut Dengan Tag Pre.

Langsung Saja SIlahkan Ikuti Tutorial Berikut ini:

Buka Blogger > Pergi ke Dashboard Blog > Template > Edit HTML > Masukkan KOde CSS DI Bawah ini Sebelum ]]></b:skin> 

/* CSS Syntax */

pre {
  -webkit-user-select:text;
  -khtml-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
  padding:0;
  margin:.5em auto;
  white-space:pre;
  word-wrap:break-word;
  overflow:auto;
  background-color:#2c323c;
  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:3px;
}

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:'Open Sans';
  content:attr(title);
  position:absolute;
  top:0;
  padding:9px 0;
  left:0;
  right:0;
  color:#fff;
  display:block;
  margin:0;
  text-indent:15px;
}

pre:after {
  display:inline-block;
  content:"\f121";
  font-family:fontAwesome;
  font-style:normal;
  font-weight:normal;
  font-size:18px;
  color:#fff;
  top:0;
  right:0;
  padding:9px 14px;
  position:absolute;
}

pre code {
  display:block;
  background:none;
  border:none;
  color:#bec3ce;
  padding:25px 20px 20px 20px;
  font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;
  font-size:.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:#3498db !important;
  color:#fff !important;
  padding:2px;
  margin:0 2px;
  border-radius:2px;
}

pre[data-codetype='CSS']:before {
  background-color:#00a1d6;
}

pre[data-codetype='HTML']:before {
  background-color:#3cc888;
}

pre[data-codetype='JavaScript']:before {
  background-color:#75d6d0;
}

pre[data-codetype='JQuery']:before {
  background-color:#ee9537;
}

Kemudian Pasang KOde DIbawah ini sebelum </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>

Simpan Template

Untuk Menerapkan Pada Postingan Silahkan Tambahkan Kode Dibawah ini Pada Tab HTML 

<pre class="line-numbers language-markup" data-codetype="HTML" title="HTML"><code class=" language-markup">kode HTML (yang telah diparse) di sini </code></pre>

<pre class="line-numbers language-css" data-codetype="CSS" title="CSS"><code class=" language-css">KOde CSS Disini</code></pre>

<pre class="line-numbers language-javascript" data-codetype="JavaScript" title="JavaScript"><code class=" language-javascript">kode JavaScript di sini</code></pre>

<pre class="line-numbers language-javascript" data-codetype="JQuery" title="jQuery"  ><code class=" language-javascript">KOde JQuery DIsini</code></pre>

Sekian mengenai Penerapan pre Code dengan Seleksi  Terimakasih atas kunjungannya dan terimakasih telah membaca artikel Di Newbie Weblog semoga bermanfaat. Semoga Bermanfaat Bagi Yang Membaca Nya

Artikel Terkait

Penerapan Pre Code Dengan seleksi

4/ 5

Oleh Teknokrat

Teknokrat 5:43 PM 20 Komentar