monacode

Monacode

Eine dünne ES-Modul-Verpackung um den Monaco-Editor und hübscher

Untersuchung der Machbarkeit des Importierens des Monaco-Eduitors (der gegen Code) und schönere Module direkt in den Browser; Ziel, eine Zeile einfach zu gestalten, um einen nativen Codebediting -Erlebnis in Webanwendungen zu bringen, ohne einen Build -Schritt zu erstellen.

Schiffe mit allen Funktionen, die normalerweise im VS-Code in der Box herausgefunden werden: Dinge wie Code-Hinweise, Geben Sie Inferenz, Minimap, Befehlspalette, Multi-Cursor-Wählen Sie und ersetzen Sie, Code-Falten usw. ein.

Zusätzlich zu diesen Merkmalen wurde schöner integriert, so dass das Treffer von ⌘ + s den Code formatiert.

⚡️ Schauen Sie sich die gehostete Version unter https://monacode.live an

Verwendung

Installieren Sie das Modul als NPM -Modul und importieren Sie es mit dem nackten Modulspezifizierer oder importieren Sie es direkt aus 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 ) ;
} ) ;

Es ist auch möglich, den Editor mit einem Iframe in Ihre Anwendung einzubetten (siehe Demo):

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

Geben Sie die Konfigurationsoptionen als URL -Suchparameter in den IFrame ein und achten Sie ordnungsgemäß für URI -Codierung. Bitte beachten Sie jedoch, dass es derzeit nicht möglich ist, verschachtelte Konfigurationsoptionen weiterzugeben.

API

Das Modul exportiert eine einzelne Standardfunktion, die ein Konfigurationsobjekt als Argument akzeptiert. Die mitgelieferte Konfiguration wird mit einer Standardkonfiguration verschmolzen, die selbst eine Teilmenge der verfügbaren Optionen ist, um die Moanco -Editoren zu konfigurieren. Einige nützliche Werte umfassen:

• container : Ein HTML -Element, das im DOM vorhanden ist (oder ein ref , wenn React/Preact verwendet)
• value : Eine Zeichenfolge, die den anfänglichen Code darstellt, der innerhalb des Editors gerendert werden soll
• language : Eine Zeichenfolge, die darstellt, welche Sprache der Editor Syntax Highlight und Hinweis für
• fontSize : Eine Zahl, die angibt, in welchem Pixel -Schriftgrößencode Code rendern sollte
• theme : Eine String -Kennung des gewünschten Themas oder eine URL zu einer Thema JSON -Datei

Das Aufrufen des Standard -Exports gibt eine Instanz des zugrunde liegenden Monaco -Editors zurück. Erfahren Sie mehr darüber, wie Sie mit dem Editor interagieren, indem Sie die API -Dokumentation lesen.

Entwicklung

Wenn Sie den folgenden Befehl aus dem Stamm dieses Projekts ausführen, starten servor einen Dev -Server und öffnen Sie Ihren Editor und Browser auf der entsprechenden Localhost -URL.

npm start

Produktion

Durch das Ausführen des folgenden Befehls aus dem Root dieses Projekts wird esbuild die Quelle auf eine einzelne index.min.js -Datei erstellen. Derzeit dauert dieser Vorgang ~ 1 Sekunden lang und führt zu einer Ausgabedatei mit einem Gewicht von 4,6 MB (Commpress ist mit Brotli auf weniger als 1 MB).

npm run build

Lizenz

Lizenziert unter der MIT -Lizenz.