Menu Link

Sabtu, 01 Februari 2014

Syntax Highlighter di Blogger

Sebelum membuat tulisan diblog saya ini, saya ingin menshare bagaimana menuliskan code-code ke dalam tag khusus. Atau dinamakan Syntax Hlighter,baik langsung saja kita praktikan bagaimana membuat atau konfigurasi di blogger. Silahkan login di blogger anda dan pilih template, kemudian pilih edit html. Silahkan ikuti langkah-langkah dibawah ini : 

  1. Copy code css di link berikut "http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css", dan tambahkan sebelum tag "]]></b:skin>".
  2. Copykan code javascript dibawah ini, dan letakkan sebelum "</head>".
  3. <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript"></script>
    <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript"></script>
    <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript"></script>
    <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript"></script>
    <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript"></script>
    <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript"></script>
    <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript"></script>
    <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript"></script>
    <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript"></script>
    <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript"></script>
    <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript"></script>
    <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript"></script>
    <script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript"></script>
    
  4. Copykan code javascript dibawah ini, dan letakkan sebelum "</body>". Kemudian klik simpan template.
  5. <script language="javascript">
    dp.SyntaxHighlighter.BloggerMode();
    dp.SyntaxHighlighter.HighlightAll('code');
    </script>
    
  6.  Pengunaan nya pada saat penulisan pilih tag "html" dan setiap akan menuliskan code pemrograman anda silahkan tambahkan code seperti contoh dibawah ini: 
  7. <pre name="code" class="css">
    /*coding di sini*/
    </pre>
    
    
    Demikan tutorial perdana saya, semoga bermanfaat bagi teman-teman.

Tidak ada komentar:

Posting Komentar