最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Monaco Editor (Browser): @media keyword CSS syntax not highlighting correctly - Stack Overflow

programmeradmin5浏览0评论

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.

发布评论

评论列表(0)

  1. 暂无评论