do:

    Precise Gutter Line Highlighting:
        Highlight the gutter line index when the caret or cursor moves to a specific line.

    Gutter Highlight Styling:
        Use clear, contrasting styles for highlighted lines (e.g., red background, white text).



no any highlighting in lines visible. problem probably lies in actual theme used. better just implement our absolutely custom theme to/in everything!

try change the theme or implement your absolutely new theme with everything detaily properly functioning.

output absolutely new and fixed code.


"""

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Code Editor</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- CodeMirror Core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/codemirror.min.css" rel="stylesheet">

    <!-- Custom Styling -->
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #2b2b2b;
            color: #ffffff;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .editor-container {
            flex: 1;
            padding: 10px;
            overflow: hidden;
        }

        .CodeMirror {
            height: calc(100% - 10px);
            background-color: #282c34;
            color: #ffffff;
            font-family: "Fira Code", monospace;
            font-size: 14px;
            border: 2px solid #44475a;
            border-radius: 8px;
        }

        .CodeMirror-gutters {
            background-color: #21252b !important;
            color: #636d83;
            border-right: 2px solid #44475a;
        }

        /* Custom Highlight for Gutter Line Number */
        .CodeMirror-gutters .line-number-highlight {
            background-color: #ff5555 !important;
            color: #ffffff !important;
            font-weight: bold;
            border-radius: 3px;
            padding: 1px 2px;
        }

        .buttons-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background-color: #21252b;
        }

        button {
            background-color: #61afef;
            color: #ffffff;
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        button:hover {
            background-color: #528bff;
        }

        .search-container input {
            padding: 8px;
            border: 2px solid #528bff;
            border-radius: 4px;
            background-color: #1e1e1e;
            color: #ffffff;
            width: 250px;
        }

        .search-container input:focus {
            outline: none;
            border-color: #61afef;
        }

        /* Error Animation */
        .search-blink-error {
            animation: blink-error 0.5s linear 2;
        }

        @keyframes blink-error {
            0%, 100% {
                border-color: #ff5555;
            }
            50% {
                border-color: #ffffff;
            }
        }
    </style>
</head>

<body>
    <div class="editor-container">
        <textarea id="editor"></textarea>
    </div>

    <div class="buttons-container">
        <div class="search-container">
            <input id="searchField" type="text" placeholder="L#: To Line or Search Keyword">
            <button id="searchButton">Search/Go</button>
        </div>
        <div>
            <button id="runButton">Run Code</button>
            <button id="saveButton">Save HTML</button>
        </div>
    </div>

    <!-- CodeMirror Core Script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/codemirror.min.js"></script>

    <!-- Syntax Highlighting Modes -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/mode/css/css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/mode/javascript/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/mode/xml/xml.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/mode/htmlmixed/htmlmixed.min.js"></script>

    <!-- Addons -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.7/addon/selection/active-line.js"></script>

    <script>
        // Initialize CodeMirror
        const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
            mode: "htmlmixed",
            lineNumbers: true,
            matchBrackets: true,
            autoCloseBrackets: true,
            styleActiveLine: true,
            theme: "default" // Using custom theme styles
        });

        const searchField = document.getElementById("searchField");
        let highlightedLine = null;

        // Search or GoTo Handler
        document.getElementById("searchButton").addEventListener("click", () => {
            const query = searchField.value.trim();

            // Check if query is L#{lineNumber}
            if (query.toLowerCase().startsWith("l")) {
                const lineNumber = parseInt(query.slice(1), 10) - 1;
                if (!isNaN(lineNumber) && lineNumber >= 0 && lineNumber < editor.lineCount()) {
                    focusLine(lineNumber);
                } else {
                    triggerBlinkError();
                }
            } else {
                performSearch(query);
            }
        });

        // Highlight the Line in Gutter
        function focusLine(lineNumber) {
            clearGutterHighlight();

            editor.setCursor({ line: lineNumber, ch: 0 });
            editor.scrollIntoView({ line: lineNumber, ch: 0 });

            const gutters = document.querySelectorAll(".CodeMirror-gutters .CodeMirror-linenumber");
            if (gutters[lineNumber]) {
                gutters[lineNumber].classList.add("line-number-highlight");
                highlightedLine = lineNumber;
            }
        }

        // Perform Text Search
        function performSearch(query) {
            clearGutterHighlight();

            const cursor = editor.getSearchCursor(query, editor.getCursor());
            if (cursor.findNext()) {
                editor.setSelection(cursor.from(), cursor.to());
                editor.scrollIntoView(cursor.from());
            } else {
                triggerBlinkError();
            }
        }

        // Clear Previous Gutter Highlight
        function clearGutterHighlight() {
            if (highlightedLine !== null) {
                const gutters = document.querySelectorAll(".CodeMirror-gutters .CodeMirror-linenumber");
                if (gutters[highlightedLine]) {
                    gutters[highlightedLine].classList.remove("line-number-highlight");
                }
            }
            highlightedLine = null;
        }

        // Blink Error Animation
        function triggerBlinkError() {
            searchField.classList.add("search-blink-error");
            setTimeout(() => {
                searchField.classList.remove("search-blink-error");
            }, 1000);
        }

        // Clear Gutter Highlight on Editor Click
        editor.on("mousedown", () => {
            clearGutterHighlight();
        });

        // Run Button Functionality
        document.getElementById("runButton").addEventListener("click", () => {
            const code = editor.getValue();
            const newTab = window.open();
            newTab.document.write(code);
            newTab.document.close();
        });

        // Save HTML Button Functionality
        document.getElementById("saveButton").addEventListener("click", () => {
            const code = editor.getValue();
            const blob = new Blob([code], { type: "text/html" });
            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url;
            a.download = "index.html";
            a.click();
        });
    </script>
</body>

</html>

""".

now it blyad highlights lines normally, but too white as white on white!

also, seems no any actual syntax evaluations happening or visible.

need to do a kinda mixed syntax evaluation for mixed and independent content as HTML/CSS/javascript in one HTML code block or independently through tabs.


fix all and be da hero!

output full corrected.