Softonic

โค้ดเป็นรูปภาพ

ขั้นตอน 1 / 2

วางส่วนโค้ด เลือกหนึ่งในสี่ธีมที่มีให้ ปรับสี ขนาดตัวอักษร ระยะขอบ หัวหน้าต่างแบบเลือกได้ และเลขบรรทัด จากนั้นดาวน์โหลด PNG ที่วาดจาก canvas ในเบราว์เซอร์ เครื่องมือนี้วาดข้อความธรรมดา เหมาะสำหรับทำภาพโค้ดที่ดูสะอาด แต่ไม่วิเคราะห์ภาษาและไม่เพิ่มการไฮไลต์ไวยากรณ์

วิธีสร้าง PNG ของโค้ด

  1. 1

    วางส่วนโค้ด

    ใช้ช่องโค้ดกับ JavaScript, HTML, CSS, JSON, คำสั่ง shell หรือข้อความธรรมดาใดก็ได้ ตัววาดจะใช้สูงสุด 400 บรรทัดแรก

  2. 2

    ตั้งค่าหน้าตา

    เลือกมืด สว่าง Dracula หรือ Solarized แล้วปรับชื่อ ขนาดตัวอักษร ระยะขอบ พื้นหลัง ข้อความ และสีเน้น

  3. 3

    ตรวจตัวอย่าง canvas

    เบราว์เซอร์วาดแต่ละบรรทัดเป็นข้อความบน canvas พร้อมหัวหน้าต่างและเลขบรรทัดแบบเลือกได้ บรรทัดยาวอาจขยาย canvas จนถึงขีดจำกัดที่กำหนดไว้

  4. 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 บรรทัดแรกเพื่อให้เบราว์เซอร์ตอบสนองได้ดี สำหรับภาพที่เผยแพร่จริง มักดีกว่าถ้าตัดเหลือไม่กี่บรรทัดที่อธิบายแนวคิดหลัก

เครื่องมือที่เกี่ยวข้อง

ตัวสร้างการตั้งค่า Webpack

สร้าง webpack.config.js สำหรับ webpack 5 ทั้งแบบ JavaScript ล้วน React หรือ Vue พร้อม TypeScript, Babel, CSS หรือ Sass, รูปภาพ, HtmlWebpackPlugin, เซิร์ฟเวอร์สำหรับพัฒนา และคำสั่ง npm install

เครื่องแปลงฐานตัวเลข

แปลงตัวเลขระหว่างฐานสอง ฐานแปด ฐานสิบ ฐานสิบหก และฐานกำหนดเองตั้งแต่ 2 ถึง 36 พร้อมการแยกค่าประจำหลัก

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตัวตรวจสอบ OpenAPI

วางเอกสาร OpenAPI หรือ Swagger แบบ JSON หรือ YAML แล้วตรวจโครงสร้างหลัก: ฟิลด์เวอร์ชัน ออบเจกต์ info และ paths พร้อมข้อผิดพลาดและคำเตือนที่ชัดเจน

เครื่องมือจัดรูปแบบ PHP

เพิ่มการขึ้นบรรทัดใหม่และการเยื้อง 2 หรือ 4 ช่องให้ส่วนโค้ด PHP พื้นฐาน โปรดตรวจผลลัพธ์ เพราะเครื่องมือนี้ไม่ใช่ตัวแยกวิเคราะห์ PHP และไม่ได้ใช้กฎ PSR-12

เครื่องสุ่มที่อยู่

สร้างระเบียนคล้ายที่อยู่ 1–20 รายการสำหรับแบบจำลองและการทดสอบ ด้วยรูปแบบประเทศแบบย่อ

เครื่องมือนี้มีให้บริการในภาษาอื่น