C3 Monaco Custom Syntax Highlighting - construct.net

25/2/2025, 17:02:33

Versione datata 25/02/2025. Vedi la nuova versione l'ultima versione.

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

Autore
Clovelt
Valutazione
0 0 0
Versione
1.0
Creato il
25/02/2025
Aggiornato il
25/02/2025
Dimensione
3,78 KB
Licenza
MIT
Applica a

Adds a custom syntax highlight to Construct 3's Monaco integration, substituting the .js syntax.

This is experimental and uses non-documented stuff! Beware! But it works 🙂

https://monaco-editor-extend-lang-conf.vercel.app/readme.html
Using this workaround, I inject a custom style into Monaco which is made with Monarch, a syntax editor:

https://microsoft.github.io/monaco-editor/monarch.html
It replaces the JS syntax with whatever custom one we want, in my case I want my dialog system to have each element highlighted how I want (for example comments are all lines that start with ":")


const monaco = MonacoEnvironment.monaco;
In construct, I saw this is the way to access Monaco.


const waitForMonaco = setInterval(() => {
if (typeof MonacoEnvironment !== 'undefined' && MonacoEnvironment.monaco) {
clearInterval(waitForMonaco); // Stop checking once Monaco is ready
I also constantly check if Monaco enviroment is present, as Construct only loads it once you open the code editor.


Other than that, rest of the logic is similar to the article linked 🙂

Biggest reason to do this for me was that accents were being tinted red for some reason, but I added a lot of custom stuff too in the process