วันพฤหัสบดีที่ 7 พฤศจิกายน พ.ศ. 2556

แสดง Code ใน Blog ให้สวยงามด้วย Syntax Highlighter

จะทำบล็อกเกี่ยวกับ Code ทั้งที ก็ต้องทำให้ Code สามารถอ่านได้ง่าย แล้วมีวิธีการอย่างไร?
ใช้ Syntax Highlighter ในการช่วยทำให้ Code อ่านได้ง่าย ได้เลยครับ
ตัวอย่าง :
วิธี :
1. ไปที่ Template แล้ว Edit HTML ของ Theme ที่คุณใช้
2. ก่อนส่วนของ </head> ให้ใส่ Code HTML และ Javascript ดังต่อไปนี้
*หมายเหตุ1: สามารถลบ shBrushX.js ที่คุณไม่ต้องการใช้ได้ เพื่อให้โหลดได้เร็วขึ้น
*หมายเหตุ2: สามารถเลือก Theme ของ Syntax Highlighter ได้ที่ http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

3. บันทึกให้เรียบร้อย
4. สร้างโพสต์ใหม่ โดยใช้ HTML Editor วิธีใส่โค้ดจะมีอยู่ 2 วิธี
ใช้แท็ก <pre />
ผลลัพธ์ :
    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }

ใช้แท็ก <script />
ผลลัพธ์ : *หมายเหตุ: ระบบของบล็อกอาจจะมีการแปลงตัวอักษร < หรือ > ให้อัตโนมัติ ซึ่งทำให้การแสดง Code ที่เราใส่ไม่ถูกต้อง ให้เราเปลี่ยนข้อความภายในแท็ก <pre /> หรือ <script /> เป็น HTML Entities ก่อน คือ
< เป็น &lt;
> เป็น &gt;

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

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