16 | How to display code in blog post

สมมติว่ามี xhtml code ดังต่อไปนี้

version="1.0" encoding="utf-8"?> 

    "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. ใช้ 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. ใช้

</a> tag <pre><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></pre> 3. ใส่มันลงไปโดยตรงเลย <pre><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></pre> 4. ใช้ <a href="http://w3schools.com/tags/tag_pre.asp" title="Defines preformatted text"><pre></a> tag เพื่อสงวนรูปแบบของช่องไฟ หรือบรรทัด <pre><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></pre> หมายเหตุ:1. การที่จะแสดงโค้ด HTML นั้นจำเป็นต้องเปลี่ยน < ไปเป็น < และ > ไปเป็น > (ใช้ replace all บน text editor เอาง่ายดี)2. หากโค้ดที่ต้องการแสดงผลนั้นยาว ก็สามารถกำหนดให้แสดงโค้ดโดยมีความสูง ความกว้างเท่าไหร่ โดยใช้ style <a href="http://www.w3schools.com/css/pr_dim_height.asp" title="sets the height of an element">height,</a> <a href="http://www.w3schools.com/css/pr_dim_width.asp" title="sets the width of an element">width</a> ตลอดจน <a href="http://www.w3schools.com/css/pr_pos_overflow.asp" title="sets what happens if the content of an element overflow its area">overflow</a> property ได้ เช่น <pre style="height: 100px; width: 250px;"><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> </pre> ดังตัวอย่างข้างต้นนั้น ได้กำหนด height = 100 pixels width = 250 pixels และ overflow เป็น auto. </div> เขียนโดย iake เวลา <a class="timestamp-link" href="http://iake.blogspot.com/2007/04/16-how-to-display-code-in-your-blog.html" title="permanent link">20:34</a>

หน้าเว็บ

ผู้สนับสนุน

เพื่อนบ้าน

16 | How to display code in blog post

16 | How to display code in blog post

1 ความคิดเห็น: