25/2/2025, 17:02:33
Version au
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
