Cara Membuat Pembungkus Kode HTML, CSS, JavaScript dan Jquery Seperti MasTamvan

Pagi ini saya mau membagikan Cara Membuat Pembungkus Kode HTML, CSS, JavaScript dan Jquery Seperti MasTamvan

Screenshot Contoh Syntax Highlighter

Membuat Syntax Highlighting with Defering Js

untuk membuat pembungkus kode ini sangat mudah, hanya perlu menambahkan kode script dbawah ini. yang dibuat oleh MasTamvan. Lakukan langkah-langkah dibawah ini

  1. Login ke dalam akun blog kalian terlebih dahulu
  2. Masuk ke Menu Template, HTML
  3. Setelah itu cari kode </body> lalu masukan kode dibawah ini tepat diatas </body>


<script>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://rawgit.com/mastamvan/backup/master/syntaxmas.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
Setelah itu cari kode </head>
Lalu Masukan Kode dibawah ini tepat di atas </head>


<style type='text/css'>
pre{position:relative}
pre:before{-moz-user-select:none;font-size:15px;font-family:'Roboto,sans-serif';content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
pre:after{-moz-user-select:none;display:inline-block;content:"f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre[data-codetype="tamvanCSS"]:before,pre[data-codetype="tamvanHTML"]:before,pre[data-codetype="tamvanJS"]:before,pre[data-codetype="tamvanJQ"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee}
i.klik-url,pre,code{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
.hljs{display:block;padding:0.5em;background:#333;color:white;max-height:350px;overflow:hidden;border-radius:5px}
.hljs:hover{overflow:auto}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
.hljs-string,.hljs-bullet{color:#a2fca2}
.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
.hljs-comment,.hljs-deletion,.hljs-code{color:#888}
.hljs-regexp,.hljs-link{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}
</style>
Untuk Membuat Syntax Highlighter ini dipostingan, Tambahkan Kode dibawah ini, untuk membuat pemnbugkus kode. Masing-masing ada beberapa jenis, Buat HTML,CSS,Jquery dan Javascript.
Jika kalian ingin membungkus kode HTML, gunakan CSS HTML, jika ingin membungkus Jquery gunakan CSS Jquery.



Kode Pembungkus HTML
<pre data-codetype="tamvanHTML" title="HTML">
<code>
<!--Taro Kode Kalian Disini-->
</code>
</pre>


Kode Pembungkus CSS
<pre data-codetype="tamvanCSS" title="CSS">
<code>
<!--Taro Kode Kalian Disini-->
</code>
</pre>


Kode Pembungkus Javascript
<pre data-codetype="tamvanJS" title="Javascript">
<code>
<!--Taro Kode Kalian Disini-->
</code>
</pre>


Kode Pembungkus jQuery
<pre data-codetype="tamvanJQ" title="JQuery">
<code>
<!--Taro Kode Kalian Disini-->
</code>
</pre>
Jika Kalian ingin Membungkus Kode, alangkah baiknya HTML,CSS,Jquery dan Javascript di parse terlebih dahulu agar muncul Kodenya di Pembungkus

Berlangganan update artikel terbaru via email:

0 Response to "Cara Membuat Pembungkus Kode HTML, CSS, JavaScript dan Jquery Seperti MasTamvan"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel