Sunday, 24 July 2016

Menampilkan Program Pada Blog

Terkadang atau bahkan sering kali untuk rekan-rekan Mahasiswa,Programmer,Dosen dan berbagai profesi lain bermaksud untuk menampilkan source code pada postingan blog. Berbeda dengan Wordpress (salah satu media blogging), pada Blogspot fasilitas untuk menampilkan kode program belum tersedia. Namun, banyak pihak ketiga yang telah menyediakan. kita cukup menambahkan dalam template blog kita.
Dalam Postingan kali ini, saya akan menggunakan syntax highlighting untuk menampilkan kode program pada blog ini. Dan tidak menutup kemungkinan, semua kode program akan menggunakan tool yang sama untuk menampilkan kode program. Berikut langkah-langkah yang dapat ditempuh :
Tulisan dan Gambar bersumber dari Halaman Ini
  1. Login blogspot kemudian pilih menu "Template"
  2. Edit Html
  3. Pada halaman Edit Html cari </head> tag
  4. Copy dan Paste kan Code berikut (lokasi paste diatas code </head>) :
  5. <!-- Syntax Highlighter Additions START -->
    <link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
    <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.css" rel="stylesheet" type="text/css" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript" />
    
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript" />
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript" />
     
    <script language="javascript" type="text/javascript">
     SyntaxHighlighter.config.bloggerMode = true;
     SyntaxHighlighter.all();
    </script>
    <!-- Syntax Highlighter Additions END -->
    
    



  • Click "Save template"




  • Buat Post Baru pada Mode HTML
  • Masukkan Kode Berikut :
    <pre class="brush:php;">
    <?php
    $example = range(0, 9);
    foreach ($example as $value)
    {
    echo $value;
    }
    </pre>
    Hasil yang di Dapat adalah sebagai berikut :
    <?php
    $example = range(0, 9);
    foreach ($example as $value)
    {
     echo $value;
    }
    

    Peringatan :
    Untuk menampilkan code < atau kode lain akan dibahas pada posting berikutnya

    No comments:

    Post a Comment