ดาวน์โหลด monacode - ดาวน์โหลดซอร์สโค้ด monacode

monacode

ทรัพยากรอื่นๆ

1.0.0

ดาวน์โหลด

มอนอะซิด

เสื้อคลุม ES-module บาง ๆ รอบตัวแก้ไขโมนาโกและสวยกว่า

การสำรวจความเป็นไปได้ของการนำเข้า Monaco-editor (ซึ่งพลังกับรหัส) และโมดูลที่สวยงามกว่าโดยตรงไปยังเบราว์เซอร์ มุ่งหวังที่จะทำให้เป็น หนึ่งบรรทัดที่ง่าย ต่อการนำประสบการณ์การแก้ไขรหัสดั้งเดิมมาสู่เว็บแอปพลิเคชันโดยไม่ต้องมีขั้นตอนการสร้าง

เรือที่มีคุณสมบัติทั้งหมดมักจะพบในรหัส VS นอกกรอบ: สิ่งต่าง ๆ เช่นคำแนะนำของรหัส, การอนุมานพิมพ์, minimap, pallet คำสั่ง, multi-cursor select, ค้นหาและแทนที่, การพับรหัส ฯลฯ

นอกเหนือจากคุณสมบัติเหล่านี้ Prettier ได้รับการรวมเข้าด้วยกันเพื่อให้การกด ⌘ + s จะจัดรูปแบบรหัส

monacode-demo

⚡ตรวจสอบเวอร์ชันที่โฮสต์ที่ https://monacode.live

การใช้งาน

ติดตั้งโมดูลเป็นโมดูล NPM และนำเข้าโดยใช้ตัวระบุโมดูลเปลือยหรือนำเข้าโดยตรงจาก UNPKG:

 import monacode from 'https://unpkg.com/monacode/index.min.js' ; // 976Kb brotli

// Create a new editor and attach to the document body
const editor = monacode ( {
  container : document . body ,
  value : 'const add = (x, y) => x + y;' ,
} ) ;

// Listen for changes within the editor
editor . getModel ( ) . onDidChangeContent ( ( change ) => {
  const newValue = editor . getValue ( ) ;
  console . log ( newValue ) ;
} ) ;

นอกจากนี้ยังเป็นไปได้ที่จะฝังตัวแก้ไขลงในแอปพลิเคชันของคุณโดยใช้ iframe (ดูตัวอย่าง):

 < iframe
  src =" https://monacode.live?theme=vs-light&value=console.log('hey') "
> </ iframe >

ผ่านตัวเลือกการกำหนดค่าลงในพารามิเตอร์ IFRAME เป็นพารามิเตอร์การค้นหา URL ตรวจสอบให้แน่ใจว่า URI เข้ารหัสค่าอย่างถูกต้อง โปรดทราบว่าปัจจุบันไม่สามารถส่งผ่านตัวเลือกการกำหนดค่าที่ซ้อนกันได้ในขณะนี้

API

โมดูลส่งออกฟังก์ชั่นเริ่มต้นเดียวที่ยอมรับวัตถุ config เป็นอาร์กิวเมนต์ การกำหนดค่าที่ให้มาจะถูกรวมเข้ากับการกำหนดค่าเริ่มต้นซึ่งเป็นชุดย่อยของตัวเลือกที่มีอยู่เพื่อกำหนดค่าตัวแก้ไข Moanco ค่าที่เป็นประโยชน์บางอย่างที่ควรทราบรวมถึง:

container : องค์ประกอบ HTML ที่มีอยู่ใน DOM (หรือ ref หากใช้ React/Preact)
value : สตริงที่แสดงถึงรหัสเริ่มต้นที่จะแสดงผลภายในตัวแก้ไข
language : สตริงที่แสดงถึงภาษาที่ตัวแก้ไขควรลองใช้ไฮไลต์ไวยากรณ์และคำใบ้สำหรับ
fontSize : ตัวเลขที่ระบุว่ารหัสขนาดตัวอักษรพิกเซลควรแสดงที่ใด
theme : ตัวระบุสตริงของธีมที่ต้องการหรือ URL ไปยังไฟล์ธีม JSON

การเรียกการส่งออกเริ่มต้นจะส่งคืนอินสแตนซ์ของตัวแก้ไขโมนาโกพื้นฐาน ค้นหาข้อมูลเพิ่มเติมเกี่ยวกับวิธีการโต้ตอบกับบรรณาธิการโดยการอ่านเอกสาร API

การพัฒนา

การรันคำสั่งต่อไปนี้จากรูทของโครงการนี้ใช้ servor เพื่อเริ่มเซิร์ฟเวอร์ dev จากนั้นเปิดตัวแก้ไขและเบราว์เซอร์ของคุณบน URL ในพื้นที่ที่เหมาะสม

npm start

การผลิต

การรันคำสั่งต่อไปนี้จากรูทของโครงการนี้ใช้ esbuild สร้างแหล่งที่มาของไฟล์ index.min.js เดียว ขณะนี้กระบวนการนี้ใช้เวลา ~ 1 วินาทีและส่งผลให้ไฟล์เอาต์พุตมีน้ำหนัก 4.6MB (กดลงเหลือน้อยกว่า 1MB ด้วย Brotli)