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": "https://unpkg.com/[email protected]/min/vs"
}
};
window.MonacoEnvironment = {
getWorkerUrl: () => proxy
};
let proxy = URL.createObjectURL(new Blob([`
self.MonacoEnvironment = {
baseUrl: 'https://unpkg.com/[email protected]/min/'
};
importScripts('https://unpkg.com/[email protected]/min/vs/base/worker/workerMain.js');
`], {
type: 'text/javascript'
}));
window.require.config(requireConfig);
window.require(["vs/editor/editor.main"], () => {
const editor = monaco.editor.create(element, {
value: "",
language: "php",
theme,
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?