16 | How to display code in blog post
สมมติว่ามี xhtml code ดังต่อไปนี้
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title> Show Code </title>
<meta content="Show Code" name="iake" />
</head>
<body>
<div id="content"></div>
</body>
</html>
วิธีที่จะแสดงโค้ดบนบล็อกหรือเว็บนั้น ใช้ได้หลายวิธี ดังต่อไปนี้
1. ใช้ <code> tag
<code> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title> Show Code </title> <meta content="Show Code" name="iake" /> </head> <body> <div id="content"></div> </body> </html> </code>
2. ใช้ <textarea> tag
<textarea cols="5" rows="5"> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title> Show Code </title> <meta content="Show Code" name="iake" /> </head> <body> <div id="content"></div> </body> </html> </textarea>
3. ใส่มันลงไปโดยตรงเลย
<html xmlns="http://www.w3.org/1999/xhtml">
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title> Show Code </title>
<meta content="Show Code" name="iake" />
</head>
<body>
<div id="content"></div>
</body>
</html>
4. ใช้ <pre> tag เพื่อสงวนรูปแบบของช่องไฟ หรือบรรทัด
<pre> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title> Show Code </title> <meta content="Show Code" name="iake" /> </head> <body> <div id="content"></div> </body> </html> </pre>
หมายเหตุ:
1. การที่จะแสดงโค้ด HTML นั้นจำเป็นต้องเปลี่ยน < ไปเป็น < และ > ไปเป็น > (ใช้ replace all บน text editor เอาง่ายดี)
2. หากโค้ดที่ต้องการแสดงผลนั้นยาว ก็สามารถกำหนดให้แสดงโค้ดโดยมีความสูง ความกว้างเท่าไหร่ โดยใช้ style height, width ตลอดจน overflow property ได้ เช่น
<pre style="height:100px;width:200px;overflow:auto;"> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title> Show Code </title> <meta content="Show Code" name="iake" /> </head> <body> <div id="content"></div> </body> </html> </pre>
ดังตัวอย่างข้างต้นนั้น ได้กำหนด height = 100 pixels width = 250 pixels และ overflow เป็น auto.
22 ความคิดเห็น:
โดนใจผมเลยครับ
กำลังต้องการพอดี
ขอบคุณมากครับ
ขอบคุณครับคุณ iake
ผมใช้ ie แล้ว syntax hughlight มันแสดงผลไม่ถูกต้องครับ
ครับตอนทดสอบมันก็แสดงสีถูกต้อง แต่พอเอาขึ้นบล็อกมันไม่ยอม highlight
เท่าที่ผมสังเ้กตมันจะเกิดกับโค้ดหลายๆ บรรทัดครับ
นี่ก็มึนๆ เหมือนกันครับ
ใช้ Firefox หรือ Opara ดีกว่าครับ IE เอาใจยาก
Nice post, its a really cool blog that you have here, keep up the good work, will be back.
Warm Regards
Biby Cletus - Blog
คุณ iake เจี๊ยบลองทำดูแล้วค่ะ ถ้าเจี๊ยบเอาโค๊ตที่เป็น html มาโพสมันไม่ให้ค่ะ แต่เจี๊ยบเอาโค๊ตเดียวกันไปใส่ที่ template ตรง แก้ html มันให้ค่ะ
เจี๊ยบไม่แน่ใจว่าทำผิดหรือเปล่า รบกวนคุณ iake ไปดูในบล๊อกเจี๊ยบอีกทีค่ะ
ขอบคุณค่ะค่ะ
เจี๊ยบ
เจี๊ยบต้องการโค๊ตนี้ ดูที่นี่นะค่ะ มาใส่กรอบข้อความเลื่อนและโพสในหน้าบล๊อกนะค่ะ เจี๊ยบพยายามทำแล้วค่ะ ไม่สำเร็จ ไม่รู้ว่าผิดตรงไหน รบกวนคุณ iake ดูให้ด้วยค่ะ
@Biby Cletus
Thank you so much. :D
@คุณเจี๊ยบ
โพสในหน้าบล็อกไม่สำเร็จ ก็เพราะคุณเจี๊ยบ ไม่ได้เปลี่ยน < เป็น < และ > เป็น > ตามที่บอก (ตรงหมายเหตุ ตัวหนังสือสีแดง) ไงครับ
ผมแก้โค้ดให้แล้ว ดาวน์โหลดที่นี่ นำไปใช้ได้เลย ไม่จำเป็นต้องแก้อะไรอีก
comment ของ biby cletus นั้น ผมว่ามันแปลกๆ นะ เพราะ blog ของผมก็เคยได้เหมือนกัน แถมข้อความเหมือนกันเปี๊ยบเลย
อืมมม น่าแปลกจริงๆ ด้วยครับ ผมไปดูที่บล็อกคุณ NooM แล้ว คอมเมนท์แบบโคลนนิ่งกันมาเลยทีเดียว
เลยลองไปดู stat รายการในช่วงเวลานั้นไม่มีคนไหนเลยครับที่เข้ามาแล้วไปที่ Post Comment
ถ้าดูที่เข้ามาจากต่างประเทศ มีก่อนหน้า 1 ชั่วโมงมาจาก เนเธอร์แลนด์ และถัดไปอีก 1 ชั่วโมงจากสเปน เข้ามาแล้วก็ไม่มีการคลิกที่ post comment แต่อย่างใด
น่าสงสัยเหมือนที่คุณ NooM ว่าจริงๆ ครับ จะเป็น spam ก็ดูไม่เข้าเค้าเลย
พอพูดถึงเรื่อง spam ก็รู้สึกกลัวๆ เลยต้องไปล็อคคอมเม้นท์สำหรับผู้ที่ log in เท่านั้น ไม่ชอบเลยค่ะ พวก spam นี่
คุณ iake ค่ะ ถามอีกแล้ว ^^
1) เจี๊ยบใช้ template ระบบเก่าค่ะ อยากถามว่า ถ้าเจี๊ยบต้องการให้มันโชว์ Labels เจี๊ยบต้องใช้โค๊ตอะไรค่ะ และต้องไปแก้ตรงไหน
2) เจี๊ยบอยากทำ code html ไว้ใน notepad และก็ทำลิงค์จากบล๊อกไป notepad อย่างที่คุณ iake ทำนะค่ะ ทำอย่างไงค่ะ
ถามมากไปหรือเปล่าค่ะ ขอ 2 ข้อก่อนค่ะ ^^
ขออนุญาติ add บล๊อกคุณ iake ไว้ในบล๊อกหน่อยนะค่ะ
@คุณเจี๊ยบ แค่ใช้ CAPCHA ก็พอแล้วมั้ง
จริงๆ ตอนนี้ Blogger มันก็มีระบบป้องกันสแปมอย่างดีอยู่แล้ว ไม่เหมือนสมัยก่อนที่เราสามารถสร้าง comment form ได้เอง ซึ่งมีปัญหาสแปมพอควร
1. old version Blogger นั้น Add Label Widget ไม่ได้อ่ะ
ต้องเปลี่ยนมาใช้ new version Blogger ครับ
วิธีเปลี่ยนก็ ที่ Dashboard>Template>Customize Design พอเปลี่ยนแล้วค่อย Add Label Widget
2.พวกเอกสารจะเขียนแล้ว links บน Google Docs&Spreadsheets ก็ได้ http://docs.google.com/
หรือฝากไว้ที่ Google Pages ก็ได้ http://pages.google.com
คุณ iake ครับ ช่วยแนะนำการดู stat ของ blog หน่อยได้ไหมครับ ว่าทำอย่างไร ?
ขอบคุณล่วงหน้าครับ
ใช้บริการของ web analytics ทั่วไปแหละครับ
ผมใช้อยู่ 2 เจ้า คือ Google Analytics
กับ Getclicky
สมัครใช้บริการแล้วเอา JS มาแปะไว้ที่บล็อกเรา
ใช้ไม่ยากครับ ลองดูครับ
ขอบคุณคร๊าบ
:-D
โอ้ มีวิธีนี้ด้วย ขอบคุณค่า ^^
โอ๋ว Technique ใหม่ดีๆๆ
ทำเป็น Generator เลยน่าจะชิลกว่า
แค่ copy paste แล้ว get code เลย
@Dominixz ผมชอบใช้ replace ใน text editor น่ะครับ กำหนดได้ง่ายกว่าว่าจะแทนที่ตรงไหน ขี้เกียจเขียน JS DOM :D
ดีเลยครับ
blog ของผม ต้องใส่ code เป็นประจำ
จะได้เอาไปใช้
กำลังต้องการอยู่พอดีเลย เดี๋ยวลองเอาไปทำดูมั่ง
ทำได้ป่าวก้อไม่รู้....
ขอบคุณมากครับ
Post a Comment