เครื่องมือสร้างแท็ก code ใน HTML
แท็ก code คืออะไร?
แท็ก HTML <code> ใช้เมื่อคุณต้องการแสดงโค้ดเป็น "ข้อความ" บนหน้าจอ
โดยการครอบด้วยแท็ก <code> จะบอกเบราว์เซอร์ว่า "นี่คือโค้ด! <div class="example">" ทำให้แสดงโค้ดเป็นข้อความได้
ด้วยวิธีนี้ เบราว์เซอร์จะไม่ทำงานกับแท็ก แต่แสดงเป็นข้อความแทน
ถ้าไม่ครอบด้วย <code>...</code> เบราว์เซอร์จะตีความโค้ดที่เขียนเป็นโค้ดจริง ดังนั้นแม้จะเขียน <div class="example"> ที่นี่ (ระหว่างลูกศร) →
ตัวอย่างสิ่งที่ควรครอบด้วยแท็ก code
- ส่วนหนึ่งของโปรแกรม (เช่น:
console.log('Hello');) - คำสั่งเชลล์ (เช่น:
npm install) - ส่วนของโค้ด HTML หรือ CSS (เช่น:
<div class="example">) - ชื่อปุ่มหรือทางลัดบนคีย์บอร์ด (เช่น:
Ctrl + C) - ส่วนอื่นๆ ของโค้ดที่ใช้ในเอกสารทางเทคนิค
คุณสมบัติและฟังก์ชันของแท็ก code
- ส่วนที่ถูกครอบจะแสดงแบบอินไลน์ จึงไม่รบกวนการไหลของเนื้อหาในประโยค
- จะแสดงด้วยฟอนต์แบบโมโนสเปซ ช่วยให้ส่วนของโค้ดโดดเด่น
- เมื่อแสดงแท็ก HTML แบบดั้งเดิม ตัวอักษรพิเศษ (<, >, ", ฯลฯ) จะถูกแปลงให้อยู่ในรูปแบบที่แสดงผลได้อย่างปลอดภัย
- สำหรับการแสดงโค้ดยาวหลายบรรทัด มักจะใช้ร่วมกับแท็ก
<pre></pre>
วิธีใช้งาน
- กรอกข้อความที่ต้องการครอบด้วยแท็ก code ในช่องด้านล่าง
- กดปุ่ม "สร้างแท็ก code" เพื่อสร้างโค้ด HTML ที่ถูกครอบด้วยแท็ก code
- โค้ดที่สร้างจะแสดงในกล่องด้านล่าง และคุณสามารถกดปุ่ม "คัดลอก" เพื่อคัดลอกได้ง่ายๆ
- นำโค้ดที่คัดลอกไปวางในบล็อกหรือหน้า HTML ของคุณเพื่อใช้งาน
✅ แท็ก <code> ที่สร้างขึ้น
<code>console.log('Hello, world!');</code>📘 คำอธิบายและเคล็ดลับเพิ่มเติม
แท็ก นั้นเรียบง่ายมาก แต่หากใช้งานไม่ถูกต้องอาจทำให้แสดงผลผิดเพี้ยนหรือเกิดบั๊กได้ โดยเฉพาะเมื่อเขียนโค้ดที่มีแท็ก HTML หรือสัญลักษณ์พิเศษ เช่น <, >, " ลงไปโดยตรง เบราว์เซอร์อาจ ตีความสิ่งเหล่านั้นเป็น HTML จริง ซึ่งอาจก่อให้เกิดปัญหาได้
ในกรณีเช่นนี้ การแปลงโค้ด (escape) เพื่อความปลอดภัย จึงมีความสำคัญ เช่น เขียน <div> โดยใช้ < และ > แทน จะทำให้สามารถแสดงผลได้ตามต้องการ โดยที่เบราว์เซอร์ไม่ตีความผิด เครื่องมือนี้จะช่วยสร้างโค้ดที่ถูกแปลงอัตโนมัติ ทำให้คุณมั่นใจได้ในการใช้งาน
นอกจากนี้ แท็ก เหมาะสำหรับโค้ดสั้น ๆ ที่มีเพียงหนึ่งบรรทัดหรือโค้ดที่ต้องการแทรกในประโยคอย่างเป็นธรรมชาติ หากต้องการแสดงโค้ดที่มีหลายบรรทัดหรือมีการเว้นบรรทัด ควรใช้ร่วมกับ <pre> เพื่อให้การจัดรูปแบบยังคงอยู่ครบถ้วน
ในการเขียนบล็อกด้านเทคโนโลยีหรือบทเรียนต่าง ๆ การเลือกใช้แท็กอย่างเหมาะสมจะช่วยเพิ่มความน่าอ่านของบทความอย่างมาก อย่าลืมใช้เครื่องมือนี้ให้เกิดประโยชน์สูงสุด เพื่อ แสดงโค้ดอย่างปลอดภัยและอ่านง่าย