, , , ,

Bagaimana cara menambah syntax highlighter dengan prettyprint tanpa mengurangi waktu response loading blog.

Cara menambah syntax highlighter dengan prettyprint di blog tanpa mengurangi kecepatan loading website 100 Work Tested
Nah kali ini saya akan membagikan script syntax highlighter untuk blog tanpa mengurangi kecepatan website sedikitpun. Bisa untuk blogger wordpress joomla drupal dan lainnya.

Ga pake lama ini dia script nya:

<script>function loadCSS(e,t,a){var n=window.document.createElement("link"),o=t||window.document.getElementsByTagName("script")[0];n.rel="stylesheet",n.href=e,n.media="only x",o.parentNode.insertBefore(n,o),setTimeout(function(){n.media=a||"all"})}function loadPrettyPrint(e){var t=document.createElement("script");t.src="https://cdn.statically.io/gh/google/code-prettify/master/loader/run_prettify.js";var a=document.getElementsByTagName("head")[0],n=!1;t.onload=t.onreadystatechange=function(){n||this.readyState&&"loaded"!=this.readyState&&"complete"!=this.readyState||(n=!0,"function"==typeof e&&e(),t.onload=t.onreadystatechange=null)},a.appendChild(t)}loadPrettyPrint(function(){loadCSS("https://cdn.statically.io/gh/google/code-prettify/f1c3473a/styles/sunburst.css");var e=document.querySelectorAll("pre");if(e.length)for(var t=0;t<e.length;t++)e[t].classList.toggle("prettyprint")});</script>

Deskripsi:

Tutorial blogger.

1. Buka dashboard blog anda -> edit template HTML (blogger) ->

1.2. Tambah kode <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'/> diatas </head> NAMUN: bila template anda sudah ada kode pemanggil jquery framework tidak usah dipanggil lagi cukup tambahkan script diatas </body> saja.

1.3. Hapus CSS yang merender <pre>, <pre><code>, <code> yang ada di b:skin template anda (agar mengurangi ukuran page blog anda tentunya untuk mempercepat loading website anda). Misal seperti ini pre{background:#…} pre code{font-family:…} code{font-color:…} . KENAPA Harus dihapus: yah karena syntax highlighter ini sudah mempunyai css tersebut.

1.4. Ganti template syntax highlighter yang saya tandai dengan warna 'orange' dengan template yang sudah saya sediakan di http://source.l3n4r0x.cf/css/prettyprint/ ambil salah satu saja. Lalu ganti https://source.l3n4r0x.cf/css/prettyprint/sunbrust.css dengan template yang anda inginkan.

1.5. Taruh kode diatas diatas </body>
Cara menambah syntax highlighter dengan prettyprint di blog tanpa mengurangi kecepatan loading website 100 Work Tested
Save template. Selesai .

Tutorial untuk wordpress:

2. Buka dashboard wordpress -> Theme editor -> edit footer.php -> tambahkan script diatas dibagian atas </body> -> ULANGI BAGIAN 1.2 , 1.3, 1.4 DIATAS.
Cara menambah syntax highlighter dengan prettyprint di blog tanpa mengurangi kecepatan loading website 100 Work Tested
Cara memanggil syntax highlighter :

Cukup anda ketik <pre>KODE HTML CSS JS PHP RUBY DAN LAIN LAIN</pre> atau <pre><code>KODE HTML CSS JS RUBY PHP DAN LAIN LAIN</code></pre> atau <code>KODE HTML CSS JS JAVASCRIPT DAN LAIN LAIN</code>

 Simple 100% work.

Semoga artikel ini membantu. Share yah jangan lupa loh....

Incoming Terms: Cara menambah syntax highlighter dengan prettyprint di blog tanpa mengurangi kecepatan loading blog | prettyprint blogger | defer prettyprint | mempercepat prettyprint di blog | mempercepat loading blog yang menggunakan syntax highlighter