ปกติแล้วหากเราใส่โค้ดในบทความของ blogger จะได้หน้าตาประมาณแบบนี้

<div class="pantip">
    <div class="titlepp">
        <a href="http://pantip.com/topic/XX"></a> </div>
    <div class="postpp"></div>
    <div class="postpp"></div>
    <hr class="hrpp"/>
</div>

จะเห็นได้ว่าไม่มีการแบ่งสีเป็นสัดส่วน ทำให้อ่านโค้ดได้ยาก ผมจึงหาวิธีที่อ่านโค้ดที่ว่าง่ายยิ่งขึ้น ด้วยการใส่สีให้โค้ดในแต่ละส่วน โดยใช้ code-prettify

ซึ่งสามารถใช้ได้กับโค้ดเกือบทุกภาษา เช่น HTML5, CSS3, PHP, SQL, Java, XML, Javascript, jQuery, Python, SQL, Ruby และยังอีกมากมาย

วิธีใส่ code-prettify ลงใน blogger

อันดับแรกคัดลอกบรรทัดข้างล่างนี้ ใส่ลงใน blogger (ใส่ก่อน Tag </head>)

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type='text/javascript'/>

ขั้นตอน
1. คลิกคำว่า Template ตรงแถบซ้ายมือ
2. คลิก Edit HTML (แก้ไข HTML)
3. จากนั้นหาคำ </head> แล้วคัดลอก script ข้างบนมาใส่เหนือคำนี้

วิธีใส่โค้ด HTML ในบทความ

ยกตัวอย่าง หากเราต้องการใส่โค้ดข้างบนสุด ลงในบทความ  จะต้องเปลี่ยนโค้ด HTML เป็น XML ซะก่อน เพื่อให้เว็บเข้าใจว่าต้องการเป็นข้อความไม่ใช่แสดงผลเป็นโค้ด โดยเข้าไปที่เว็บไซต์ข้างล่างนี้เพื่อแปลงโค้ด 

html to xml

จากนั้นคัดลอกโค้ด HTML ที่ต้องการลงไปในช่องข้างบน แล้วจะได้ XML ในช่องข้างล่าง

ต่อมานำ XML ที่ได้มาใส่ในบทความในช่อง HTML โดยอยู่ระหว่างแทค<pre>...</pre>ตามข้างล่างนี้

<pre class='prettyprint'>
  .....
</pre>

สุดท้ายแล้วจะได้หน้าตาประมาณนี้ สวยไหมละครับ

<div class="pantip">
    <div class="titlepp">
        <a href="http://pantip.com/topic/XX"></a> 
   </div>
    <div class="postpp"></div>
    <div class="postpp"></div>
    <hr class="hrpp"/>
</div>

ที่มา : github.com/google/code-prettify