โค้ดเป็นรูปภาพ
วางส่วนโค้ด เลือกหนึ่งในสี่ธีมที่มีให้ ปรับสี ขนาดตัวอักษร ระยะขอบ หัวหน้าต่างแบบเลือกได้ และเลขบรรทัด จากนั้นดาวน์โหลด PNG ที่วาดจาก canvas ในเบราว์เซอร์ เครื่องมือนี้วาดข้อความธรรมดา เหมาะสำหรับทำภาพโค้ดที่ดูสะอาด แต่ไม่วิเคราะห์ภาษาและไม่เพิ่มการไฮไลต์ไวยากรณ์
วิธีสร้าง PNG ของโค้ด
-
1
วางส่วนโค้ด
ใช้ช่องโค้ดกับ JavaScript, HTML, CSS, JSON, คำสั่ง shell หรือข้อความธรรมดาใดก็ได้ ตัววาดจะใช้สูงสุด 400 บรรทัดแรก
-
2
ตั้งค่าหน้าตา
เลือกมืด สว่าง Dracula หรือ Solarized แล้วปรับชื่อ ขนาดตัวอักษร ระยะขอบ พื้นหลัง ข้อความ และสีเน้น
-
3
ตรวจตัวอย่าง canvas
เบราว์เซอร์วาดแต่ละบรรทัดเป็นข้อความบน canvas พร้อมหัวหน้าต่างและเลขบรรทัดแบบเลือกได้ บรรทัดยาวอาจขยาย canvas จนถึงขีดจำกัดที่กำหนดไว้
-
4
ดาวน์โหลด PNG
ส่งออก canvas ปัจจุบันเป็นภาพ PNG สำหรับเอกสาร โน้ต สไลด์ หรือโพสต์ ไม่มีการส่งออก SVG, JPEG หรือ HTML
ตัววาดทำอะไร
| ตัวควบคุม | สิ่งที่ปรับได้ | หมายเหตุ |
|---|---|---|
| ธีม | มืด, สว่าง, Dracula, Solarized | แต่ละธีมตั้งค่าสีพื้นหลัง ข้อความ และสีเน้นเริ่มต้น |
| สไตล์ข้อความ | ชื่อ ขนาดตัวอักษร ระยะขอบ | ขนาดตัวอักษรจำกัดที่ 10–40 px และระยะขอบ 20–200 px |
| สี | พื้นหลัง ข้อความ สีเน้น | สีเน้นใช้กับเลขบรรทัด |
| หัวหน้าต่าง | เปิดหรือปิดหัวหน้าต่างแบบหน้าต่างแอป | เมื่อเปิด ชื่อจะแสดงในหัวหน้าต่าง |
| เลขบรรทัด | แสดงหรือซ่อน | เลขบรรทัดถูกวาดเป็นข้อความ canvas ธรรมดา |
| ส่งออก | ดาวน์โหลด PNG | ปุ่มดาวน์โหลดบันทึก canvas ปัจจุบันเป็นภาพ PNG |
ข้อจำกัดที่ควรรู้
- เบราว์เซอร์วาดส่วนโค้ดเป็นข้อความธรรมดาด้วย Canvas API ไม่รู้จัก JavaScript, Python, HTML หรือภาษาอื่น
- ตัวอย่างใช้ 400 บรรทัดแรก เพื่อไม่ให้ไฟล์ใหญ่มากทำให้หน้าเว็บค้าง
- ความกว้าง canvas อยู่ระหว่าง 420 px ถึง 2200 px บรรทัดที่ยาวมากอาจถึงความกว้างสูงสุด
- เวอร์ชันสองขั้นตอนเก็บข้อมูลที่กรอกไว้ใน
sessionStorageสำหรับแท็บเบราว์เซอร์ปัจจุบันระหว่างเปลี่ยนจากแก้ไขไปดาวน์โหลด
หมายเหตุด้านการเข้าถึง
โค้ดในภาพไม่สามารถค้นหา คัดลอก หรืออ่านด้วยโปรแกรมอ่านหน้าจอได้ ใช้ PNG เป็นภาพประกอบ และวางส่วนโค้ดจริงไว้ใกล้กันในรูปแบบข้อความที่เลือกได้เมื่อเผยแพร่เอกสาร บทเรียน หรือรายงานบั๊ก
คำถามที่พบบ่อย
ไม่ เครื่องมือวาดข้อความที่คุณวางลงบน canvas ตามเดิม คุณเปลี่ยนสีและธีมได้ แต่ไม่มีตัวเลือกภาษาและไม่มีตัววิเคราะห์ไวยากรณ์
เมนูมี มืด สว่าง Dracula และ Solarized หลังเลือกธีมแล้ว คุณยังปรับพื้นหลัง ข้อความ และสีเน้นเองได้
ไม่ได้ ผลลัพธ์เป็นการดาวน์โหลด PNG ที่สร้างจาก canvas เท่านั้น ไม่มี SVG, JPEG หรือคัดลอกเป็น HTML
ตัวอย่างวาด 400 บรรทัดแรกเพื่อให้เบราว์เซอร์ตอบสนองได้ดี สำหรับภาพที่เผยแพร่จริง มักดีกว่าถ้าตัดเหลือไม่กี่บรรทัดที่อธิบายแนวคิดหลัก
เครื่องมือที่เกี่ยวข้อง
ตารางอ้างอิง ASCII
ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL
ตัวลดรูปพีชคณิตบูลีน
ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^
เครื่องสร้างตัวอักษรสุ่ม
สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน
เครื่องมือเลือกสี HEX
เลือกหรือป้อนสี HEX แล้วดูค่า RGB, HSL, CMYK โดยประมาณ ค่าความสว่างสัมพัทธ์ และคอนทราสต์กับสีขาวและสีดำ
เครื่องกำเนิดจานสี
สร้างพาเลตสีแบบเอกรงค์ ใกล้เคียง คู่ตรงข้าม ไตรแอดิก หรือเตตราดิกจากสี HEX หลัก พร้อมส่งออกตัวแปร CSS ที่คัดลอกได้ทันที
เลขฐานสองเป็นฐานสิบ
แปลงเลขฐานสองเป็นฐานสิบ หรือเลขฐานสิบเป็นฐานสองได้ทันที วางตัวเลขหนึ่งตัวแล้วอ่านผลลัพธ์