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

CSS และการออกแบบ ที่คล้ายกัน

ดูทั้งหมด

สร้างไล่สี CSS

ออกแบบไล่สีแบบเส้นตรง วงกลม และกรวยด้วยภาพ แล้วคัดลอก CSS ได้ทันที

เปิด →

Glassmorphism CSS

สร้างโค้ดเบลอพื้นหลังและขอบโปร่งแสงแบบเรียลไทม์

เปิด →

สร้าง Box Shadow

💬 ความคิดเห็น

?

ยังไม่มีความคิดเห็น มาเป็นคนแรกกันเลย!

แปลงโค้ดเป็นรูปภาพ คืออะไร?

เปลี่ยนโค้ดสั้น ๆ เป็นรูปภาพสะอาดตาที่แชร์ได้ เลือกภาษา ธีม สไตล์หน้าต่าง และพื้นหลัง แล้วดาวน์โหลด PNG — พร้อมใช้ในสไลด์ เอกสาร หรือโพสต์โซเชียล

วิธีใช้

วางโค้ดในช่องป้อนข้อมูลและเลือกภาษา (JS/TS/Python/CSS/HTML/JSON/Bash/SQL/Rust/Go) คีย์เวิร์ด สตริง และคอมเมนต์ถูกระบายสีโดยอัตโนมัติ
เลือกจาก 6 ธีม: Dracula, One Dark, GitHub Light, Solarized, Nord และ Monokai — แต่ละธีมมีบุคลิกสีที่ต่างกัน
เปิดสไตล์หน้าต่าง “macOS” เพื่อเพิ่มปุ่มสีแดง/เหลือง/เขียวให้ดูเหมือนตัวแก้ไขจริง เปิดปิดหมายเลขบรรทัดแยกต่างหากได้
แถบเลื่อน “ระยะห่าง” (16–80px) ควบคุมพื้นที่ระหว่างบล็อกโค้ดกับพื้นหลัง เลือกจากพื้นหลังกราเดียนต์ 5 แบบหรือโปร่งใส
เมื่อพอใจกับตัวอย่าง คลิก “ดาวน์โหลด PNG” เพื่อรับภาพความละเอียดสูง 2× — เหมาะกับ Twitter, LinkedIn หรือบทความเทคโนโลยี “คัดลอกโค้ด” คัดลอกข้อความธรรมดา

คำถามที่พบบ่อย

รองรับภาษาโปรแกรมอะไรบ้าง?

JavaScript, TypeScript, Python, HTML, CSS, JSON, SQL, Bash, Java และ Go พร้อมการไฮไลต์ไวยากรณ์

ภาพหน้าจอที่ส่งออกเป็นรูปแบบอะไร?

PNG ความละเอียด 2× เหมาะกับบล็อก งานนำเสนอ และโซเชียลมีเดีย

ปรับแต่งพื้นหลังและรูปแบบหน้าต่างได้ไหม?

ได้ มีธีมสีหลายแบบ รูปแบบ macOS/ไม่มีขอบ สี/ไล่สีพื้นหลัง หมายเลขบรรทัด และระยะขอบใน

1	function greet(name) {
2	// Say hello
3	const msg = `Hello, ${name}!`
4	console.log(msg)
5	return msg
6	}

1	function greet(name) {
2	// Say hello
3	const msg = `Hello, ${name}!`
4	console.log(msg)
5	return msg
6	}