วันเสาร์ที่ 4 ตุลาคม พ.ศ. 2557

วิธีการใส่ Syntax Highlight ให้กับ Blogger.com

ดังนี้

  1. เข้าไปในส่วนจัดการ Template
  2. เข้าสู่โหมด Edit HTML
  3. copy css code ทั้งหมดจาก http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css
  4. นำมาแปะไว้ก่อน tag </b:skin>
  5. แปะ code ด้านล่างนี้ไว้ก่อน tag </head>
    <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>
    
  6. แปะ code ด้านล่างนี้ไว้ก่อน tag </body>
    <script language="javascript">
    
    dp.SyntaxHighlighter.BloggerMode();
    
    dp.SyntaxHighlighter.HighlightAll('code');
    
    </script>
    
  7. จัดการ save Template
  8. ใช้เว็บนี้สำหรับทำ Escape code ก่อน
เวลาใช้งานเข้า Edit HTML mode กำหนด tag <pre> ดังนี้

<pre name="code" class="ภาษาที่ต้องการ">
    // CODE
</pre> 

ตัวอย่าง

# -*- coding: utf-8 -*-

def cheese_and_crackers(cheese_count, boxes_of_crackers):
    print "You have %d cheeses!" % cheese_count
    print "You have %d boxes of crackers!" % boxes_of_crackers
    print "Man that's enough for a party!"
    print "Get a blacket. \n"

print "We can just give the function numbers directly:"
cheese_and_crackers(20, 30)

print "OR, we can use variables from our script:"
amount_of_cheese = 10
amount_of_crackers = 50

cheese_and_crackers(amount_of_cheese, amount_of_crackers)

print "We can even dod math inside too: "
cheese_and_crackers(10 + 20 , 5 + 6)

print "And we can combine the two, variables and math: "
cheese_and_crackers(amount_of_cheese + 100, amount_of_crackers + 1000)


credit : http://stackoverflow.com/questions/10335463/how-to-setup-syntax-highlighter-on-blogger

ไม่มีความคิดเห็น:

แสดงความคิดเห็น