Monaco Editor PHP syntax is monotonous

I am creating a WordPress plugin to debug PHP. I was using Ace editor but, after some comments I decided to migrate to Monaco editor.

But it seems so monotonous that with large amount of code would be difficult to work, I guess:

In Visual Studio Code, the syntax is highlighted and detects whenever its SQL:

This is where I load the editor in the script:

    document.addEventListener("DOMContentLoaded", () => {
        const element = document.querySelector("#editor")
        const theme = getCookie("wp-phpp-theme") || "vs-dark"

        const requireConfig = {
            paths: {
                "vs": "[email protected]/min/vs"

        window.MonacoEnvironment = {
            getWorkerUrl: () => proxy

        let proxy = URL.createObjectURL(new Blob([`
    self.MonacoEnvironment = {
        baseUrl: '[email protected]/min/'
    importScripts('[email protected]/min/vs/base/worker/workerMain.js');
`], {
            type: 'text/javascript'


        window.require(["vs/editor/editor.main"], () => {

            const editor = monaco.editor.create(element, {
                value: "",
                language: "php",
                automaticLayout: true

            editor.getModel().onDidChangeContent(() => {
                document.querySelector("#code").value = editor.getValue()

            // ... more irrelevant code

I haven’t found any other examples with PHP code so I wasn’t able to compare whether this is correct or something is missing for the syntax highlight. What are your thoughts?