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: #2b2c2b;
            color: #ffffff;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .tab-container {
            background-color: #21252b;
            padding: 5px;
            display: flex;
            justify-content: center;
        }

        .tab-container button {
            padding: 10px 20px;
            background-color: #44475a;
            border: 1px solid #282a36;
            color: #ffffff;
            border-radius: 4px 4px 0 0;
            cursor: pointer;
            margin: 0 5px;
        }

        .tab-container button.active {
            background-color: #61afef;
            border-bottom: 2px solid #282c34;
            color: #ffffff;
        }

        .editor-container {
            flex: 1;
            position: relative;
            overflow: hidden;
        }

        .CodeMirror {
            height: 100%;
            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: #5a189a !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="tab-container">
        <button class="tab active" data-lang="html">HTML</button>
        <button class="tab" data-lang="css">CSS</button>
        <button class="tab" data-lang="js">JavaScript</button>
    </div>

    <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 All</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>
        let currentLanguage = "html";
        const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
            mode: "htmlmixed",
            lineNumbers: true,
            matchBrackets: true,
            autoCloseBrackets: true,
            styleActiveLine: true,
            theme: "default"
        });

        const files = {
            html: "<!DOCTYPE html>\n<html>\n<head>\n    <title>Example</title>\n</head>\n<body>\n\n</body>\n</html>",
            css: "body {\n    background-color: #f3f3f3;\n}",
            js: "console.log('Hello, World!');"
        };

        const tabs = document.querySelectorAll(".tab");
        tabs.forEach(tab => tab.addEventListener("click", () => {
            tabs.forEach(t => t.classList.remove("active"));
            tab.classList.add("active");

            currentLanguage = tab.dataset.lang;
            editor.setOption("mode", currentLanguage === "css" ? "css" : currentLanguage === "js" ? "javascript" : "htmlmixed");
            editor.setValue(files[currentLanguage]);
        }));

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

        document.getElementById("searchButton").addEventListener("click", () => {
            const query = searchField.value.trim();
            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);
            }
        });

        function focusLine(lineNumber) {
            clearGutterHighlight();
            editor.setCursor({ line: lineNumber, ch: 0 });
            editor.scrollIntoView({ line: lineNumber, ch: 0 });
            document.querySelectorAll(".CodeMirror-gutters .CodeMirror-linenumber")[lineNumber]?.classList.add("line-number-highlight");
            highlightedLine = lineNumber;
        }

        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();
        }

        function clearGutterHighlight() {
            if (highlightedLine !== null) {
                document.querySelectorAll(".CodeMirror-gutters .CodeMirror-linenumber")[highlightedLine]?.classList.remove("line-number-highlight");
            }
            highlightedLine = null;
        }

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

        editor.on("mousedown", () => clearGutterHighlight());

        document.getElementById("runButton").addEventListener("click", () => {
            const html = files.html || '';
            const css = `<style>${files.css || ''}</style>`;
            const js = `<script>${files.js || ''}<\/script>`;
            const fullCode = html + css + js;
            const newTab = window.open();
            newTab.document.write(fullCode);
            newTab.document.close();
        });

        document.getElementById("saveButton").addEventListener("click", () => {
            const zip = new JSZip();
            zip.file("index.html", files.html);
            zip.file("styles.css", files.css);
            zip.file("script.js", files.js);
            zip.generateAsync({ type: "blob" }).then(content => {
                const a = document.createElement("a");
                a.href = URL.createObjectURL(content);
                a.download = "project.zip";
                a.click();
            });
        });

        editor.setValue(files.html);
    </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.

obviously need a state preservation for every tab through some intricate arrays, and store all contexts in all possible storages on all levels

when you are testrunning through blob in a new tab, it need to compile the code if sprode across all tabs or if all codeblock resides just in HTML tab. 
fix all and be da hero!

output full corrected.