SwiftyMonaco
SwiftyMonaco copied to clipboard
SwiftyMonaco is a wrapper for Monaco Editor from Microsoft
SwiftyMonaco
SwiftyMonaco is a wrapper for Monaco Editor from Microsoft.

How to use?
There is a simple example of how to use SwiftyMonaco
import SwiftUI
struct EditorView: View {
@State var text: String
var body: some View {
SwiftyMonaco(text: $text)
}
}
Remember! You should allow outgoing internet connections in your app before using this library, because Monaco Editor runs inside WKWebView
and macOS considers it as an outgoing internet connection (Network -> Outgoing connections (Client)
):

Syntax Highlighting
Also you can use SwiftyMonaco
with syntax highlighting by passing SyntaxHighlight
rule:
import SwiftUI
struct EditorView: View {
@State var text: String
var body: some View {
SwiftyMonaco(text: $text)
.syntaxHighlight(.systemVerilog)
}
}
Default SyntaxHighlight
s
SyntaxHighlight |
Language |
---|---|
.swift |
Swift |
.cpp |
C++ |
.systemVerilog |
Verilog/SystemVerilog |
How to create your own SyntaxHighlight
?
To create your own SyntaxHighlight
you can use available initializers:
// With JS file containing syntax definition for Monarch
let syntax = SyntaxHighlight(title: "My custom language", fileURL: Bundle.module.url(forResource: "lang", withExtension: "js", subdirectory: "Languages")!)
// With a String containing syntax definition for Monarch
let syntax = SyntaxHighlight(title: "My custom language", configuration: "...")
You can create your own syntax at Monaco Editor Monarch website
Interface theme detection
SwiftyMonaco
automatically detects interface theme changes and updates Monaco Editor theme according to it without dropping the current state of the editor.