☰

C3 Monaco Custom Syntax Highlighting - construct.net

25/2/2025, 17:02:33

יוצר
Clovelt
התקנות יומיות
1
סה"כ התקנות
9
דירוגים
0 0 0
גרסה
1.0
נוצר
25-02-2025
עודכן
25-02-2025
Size
3.78 קילו-בייט
רישיון
MIT
חל על

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