แสดง Source Code ใน Blogspot

เวลาอ่าน Source Code นั้นบางครั้งแม้ตัวอักษรง่ายๆไม่กี่บรรทัดก็ดูซับซ้อนขึ้นมาทันทีเพราะต้องใช้ความคิดตรึกตรองไปด้วย หากมีเลขบรรทัดและสีสรร ตัวหนาตัวเอียงแสดงลำดับความสำคัญไว้ก็จะช่วยให้น่าอ่านขึ้นได้มาก อย่างเช่น Source Code ข้างล่างนี้

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
...
...

หากแสดงด้วยรูปแบบข้างล่างนี้ ก็จะใช้ช่วยลดเวลาการอ่านและการคิดได้มากทีเดียว

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
...
...
แต่หากทุกครั้งที่โพสต์ Source Code แล้วต้องมาใส่สีตีกรอบตกแต่งเองกันทุกครั้งคงเป็นงานหนักเอาการ โชคดีว่ามีตัวช่วยครับ ด้วยการใส่ HTML TAG เพื่อโหลด Javascript ที่เตรียมไว้แล้วเข้ามาร่วมในการสร้างหน้าเพจ และใช้คำสั่งบอกให้มันทำงานเล็กๆน้อยๆเท่านั้นเอง และวันนี้ผมจะแนะนำการใช้งานเจ้าตัวนี้ครับ Code-Prettify  (https://github.com/google/code-prettify)

...งุบงิบไว้เขียนต่อตอนหน้า

Reference
- https://www.freeformatter.com/html-escape.html#ad-output

ความคิดเห็น

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

โพสต์ยอดนิยมจากบล็อกนี้