The issue:
I use the Monaco Editor as a CSS editor in a WordPress Plugin. It all works fine, but I've noticed that the @media
keyword is not highlighted.
What am I missing? A module? A simple config setting?
The imports:
import {
editor as monacoEditor
} from "monaco-editor/esm/vs/editor/editor.api";
import "monaco-editor/esm/vs/basic-languages/css/css.contribution";
The essential part of the editor script that defines the theme and creates the editor instance:
// Apply the Monokai theme
monacoEditor.defineTheme("monokai", {
base: "vs-dark",
inherit: true,
rules: [
{ token: "keyword", foreground: "F92672" }, // Keywords like @media
{ token: "selector", foreground: "A6E22E" }, // Selectors like .custom-icon
{ token: "property", foreground: "66D9EF" }, // Properties like color
{ token: "value", foreground: "FD971F" }, // Values like green
{ token: "string", foreground: "E6DB74" }, // Strings like "hello"
{ token: "number", foreground: "AE81FF" }, // Numbers like 600px
{ token: "comment", foreground: "75715E", fontStyle: "italic" },
],
colors: {
"editor.foreground": "#F8F8F2",
"editor.background": "#272822",
"editor.lineHighlightBackground": "#3E3D32",
"editorCursor.foreground": "#F8F8F0",
"editorWhitespace.foreground": "#3E3D32",
},
});
// // Set the theme
monacoEditor.setTheme("monokai");
const monacoInstance = monacoEditor.create(monacoContainer, {
value: textarea.value, // Load existing CSS
language: "css",
theme: "monokai",
automaticLayout: true,
fontSize: 14,
quickSuggestions: true,
codeLens: false,
minimap: { enabled: false },
hover: { enabled: false },
});
The webpack config:
// Restrict Monaco Editor to only load CSS support
new MonacoWebpackPlugin({
languages: ["css"], // Only load CSS support
features: [
"!accessibilityHelp",
"suggest", // Enables quick suggestions
"bracketMatching", // Ensures brackets match correctly
"wordOperations", // Enables word selection
"colorDetector", // Enables color highlighting
"documentSymbols", // Required for media queries to be recognized
],
}),
Maybe it's simply not possible, but with such an old school keyword like @media
I highly doubt that.