engine เดียวกับ VS Code
Monaco Editor — autocomplete, ตรวจ error ของ JSON / CSS และไวยากรณ์ JavaScript / TypeScript, ค้นหาและแทนที่, multi-cursor และสีตาม syntax กว่า 60 ภาษา รวม DAX และ Power Query M
กลับไปหน้า ArtifactsTeaching Tool
Code Studio
โปรแกรมแก้ไขโค้ดบนเบราว์เซอร์ engine เดียวกับ VS Code เปิดไฟล์จากเครื่อง แก้ แล้วบันทึกกลับได้ทันที พร้อม Preview และโหมดนำเสนอสำหรับสอนหน้าห้อง — ไม่ต้องติดตั้งโปรแกรมในเครื่องผู้เรียน
เปิดเต็มจอ · ใช้ได้ดีที่สุดบน Chrome / Edge บนคอมพิวเตอร์
เปิดตัวอย่างพร้อมสอนในคลิกเดียว
ไฟล์ตัวอย่างเปิดเป็นแท็บใน Code Studio แก้ได้ทันที และบันทึกเป็นไฟล์ของตัวเองได้ — ข้อมูลในตัวอย่างเป็นข้อมูลสมมติ
- HTMLCSSJSHTML + CSS + JavaScript ในไฟล์เดียวหน้าเว็บนับเลขในไฟล์เดียว แก้ CSS/JS แล้วเห็นผลทันทีฝั่งขวา มีแบบฝึกหัดในคอมเมนต์web-basics.html
- HTMLCDNดึงไลบรารีจาก CDN (Chart.js)ดึง Chart.js จาก CDN แล้ววาดกราฟ — Preview รันในกรอบแยกจึงโหลดไลบรารีภายนอกได้จริงcdn-chart.html
- Markdownบันทึกบทเรียนด้วย Markdownบันทึกบทเรียนพร้อมตาราง checklist และโค้ด DAX / SQL ที่ระบายสีให้ใน Previewlesson-notes.md
- DAXMDAX และ Power Query MMeasure พื้นฐานและ Time Intelligence ด้วย DAX คู่กับขั้นตอนทำความสะอาดข้อมูลใน Power Query Mmeasures.dax · transform.pq
- CSVข้อมูลยอดขาย CSV (ข้อมูลสมมติ)ข้อมูลยอดขายสมมติ แสดงเป็นตารางและระบายสีแยกคอลัมน์ให้อ่านง่ายsales-sample.csv
- PythonPython เบื้องต้นสรุปยอดขายแยกตามภูมิภาคด้วย dict และฟังก์ชัน — เหมาะกับคาบแรกของ Pythonbasics.py
- SVGวาดภาพด้วย SVGภาพวงโคจรจากรูปทรงพื้นฐาน ปรับค่าแล้วดูภาพเปลี่ยนสด ๆorbit.svg
ทำอะไรได้บ้าง
เปิด–แก้–บันทึกไฟล์จริง
Chrome และ Edge บันทึกทับไฟล์เดิมบนเครื่องได้ทันที ส่วน Safari / Firefox บันทึกเป็นการดาวน์โหลด · ไฟล์ภาษาไทย TIS-620 เปิดได้อัตโนมัติ
Preview ข้างโค้ด
Markdown, HTML (รันสดในกรอบแยก), CSV / TSV เป็นตาราง และ SVG — เลื่อนดูพร้อมกันกับโค้ด หรือเปิด HTML ในแท็บใหม่
โหมดนำเสนอ
เต็มจอ ตัวใหญ่ ซ่อนเมนู สำหรับฉายขึ้นโปรเจกเตอร์ · มีธีม High Contrast สำหรับห้องที่แสงจ้า
เทียบกับเวอร์ชันที่บันทึก
ดูทีละบรรทัดว่าแก้อะไรไปบ้างก่อนบันทึก — ใช้อธิบายการเปลี่ยนแปลงโค้ดให้ผู้เรียนเห็นภาพ
ไฟล์ไม่ออกจากเครื่อง
ทุกอย่างทำงานในเบราว์เซอร์ ไม่มีการอัปโหลดไฟล์ขึ้นเซิร์ฟเวอร์ งานที่ยังไม่บันทึกกู้คืนได้เมื่อเปิดกลับมา
คีย์ลัดที่ใช้บ่อย
| เปิดไฟล์ | Ctrl + O |
|---|---|
| บันทึก | Ctrl + S |
| ค้นหา / แทนที่ | Ctrl + F |
| ขยาย / ย่อตัวอักษร | Ctrl + = / Ctrl + − |
| สลับมุมมองโค้ด / Preview | Alt + P |
| คำสั่งทั้งหมด | F1 |
| สลับให้ Tab ย้ายออกจาก editor | Ctrl + M |
บน Mac ใช้ ⌘ แทน Ctrl (ยกเว้นสลับปุ่ม Tab ใช้ Ctrl + Shift + M) · ใน editor ปุ่ม Tab ใช้ย่อหน้า ผู้ใช้คีย์บอร์ดกด Ctrl + M ก่อนเพื่อ Tab ไปปุ่มอื่น
ใช้สอนในห้องอย่างไร
- เปิดตัวอย่าง HTML แบบ split แล้วแก้สดหน้าห้อง ผู้เรียนเห็นผลลัพธ์ทันทีโดยไม่ต้องสลับหน้าต่าง
- กดปุ่มโหมดนำเสนอก่อนฉายขึ้นจอ แล้วใช้ Ctrl + = ปรับตัวอักษรให้คนหลังห้องอ่านได้
- ให้ผู้เรียนเปิดลิงก์ตัวอย่างเดียวกันบนเครื่องตัวเอง แก้ตามแบบฝึกหัดในคอมเมนต์ แล้วบันทึกเป็นไฟล์ส่งงาน
- ใช้ “เทียบกับเวอร์ชันที่บันทึก” สรุปท้ายคาบว่าวันนี้แก้โค้ดตรงไหนไปบ้าง
พัฒนาโดย 9Expert Training บน Monaco Editor (MIT License, Microsoft) · ไลบรารีและฟอนต์ทั้งหมดโหลดจาก chalaivate.com เอง ไม่พึ่ง CDN ภายนอก ใช้ในเครือข่ายองค์กรที่บล็อกเว็บภายนอกได้