☰

C3 Monaco Custom Syntax Highlighting - construct.net

25/2/2025, 17:02:33

Fra og med 25.02.2025. Se den nyeste version.

Skaber
Clovelt
Bedømmelser
0 0 0
Version
1.0
Oprettet
25.02.2025
Opdateret
25.02.2025
Size
3,78 kB
Licens
MIT
Gælder for

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