.note {
    position: absolute;
    background-color: #fdfdfd; /* Легкий серый оттенок для мягкости */
    border: 1px solid #ddd; /* Более светлая граница */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); /* Более выраженная тень */
    padding: 15px; /* Увеличенный отступ внутри */
    border-radius: 8px; /* Закругленные углы */
    box-sizing: border-box;
    cursor: move;
    transition: box-shadow 0.3s ease; /* Плавный переход для тени */
}

.note:hover {
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.3); /* Более сильная тень на наведении */
}

textarea {
    width: 100%;
    height: 100%;
    border: none;
    resize: none;
    outline: none;
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif; /* Более современный шрифт */
    font-size: 14px; /* Оптимальный размер шрифта */
    line-height: 1.5; /* Улучшенная читабельность текста */
    color: #333; /* Темно-серый текст для контраста */
    background-color: transparent; /* Прозрачный фон внутри textarea */
}

textarea::placeholder {
    color: #aaa; /* Светлая подсказка для поля ввода */
}

// notes.js

// Assumes uploadFile, showContextMenu, addResizeListeners are available globally

socket.on('new_note', (data) => {
    const note = createNoteElement(data);
    document.getElementById('board').appendChild(note);
});

socket.on('updated_note', (data) => {
    const note = document.querySelector(`.note[data-id="${data.id}"]`);
    if (note) {
        note.style.left = `${data.x}px`;
        note.style.top = `${data.y}px`;
        note.style.width = `${data.width}px`;
        note.style.height = `${data.height}px`;
        note.querySelector('textarea').value = data.text;
    }
});

socket.on('element_deleted', (data) => {
    if (data.type === 'note') {
        const element = document.querySelector(`.note[data-id="${data.id}"]`);
        if (element) {
            element.remove();
        }
    }
});

function createNoteElement(data) {
    const note = document.createElement('div');
    note.className = 'note';
    note.dataset.id = data.id;
    note.style.left = `${data.x}px`;
    note.style.top = `${data.y}px`;
    note.style.width = `${data.width}px`;
    note.style.height = `${data.height}px`;

    const textarea = document.createElement('textarea');
    textarea.value = data.text;
    textarea.addEventListener('input', () => {
        const x = note.offsetLeft;
        const y = note.offsetTop;
        const width = note.offsetWidth;
        const height = note.offsetHeight;
        socket.emit('update_note', { id: data.id, text: textarea.value, x, y, width, height });
    });

    textarea.addEventListener('mousedown', (e) => {
        e.stopPropagation();
    });

    note.appendChild(textarea);

    addNoteEventListeners(note, data.id);

    return note;
}

function addNoteEventListeners(note, id) {
    let isTouchDragEnabled = false; // Флаг для контроля активности сенсорных обработчиков

    note.addEventListener('mousedown', (e) => {
        if (e.button !== 0) return; // Left mouse button
        e.preventDefault();
        e.stopPropagation();
        const startX = e.clientX;
        const startY = e.clientY;
        const startLeft = parseFloat(note.style.left) || 0;
        const startTop = parseFloat(note.style.top) || 0;

        function moveNote(e) {
            const deltaX = (e.clientX - startX) / scale;
            const deltaY = (e.clientY - startY) / scale;
            note.style.left = `${startLeft + deltaX}px`;
            note.style.top = `${startTop + deltaY}px`;
            const x = parseFloat(note.style.left) || 0;
            const y = parseFloat(note.style.top) || 0;
            const width = note.offsetWidth;
            const height = note.offsetHeight;
            socket.emit('update_note', { id, text: note.querySelector('textarea').value, x, y, width, height });
        }

        document.addEventListener('mousemove', moveNote);

        document.addEventListener('mouseup', () => {
            document.removeEventListener('mousemove', moveNote);
        }, { once: true });
    });

    function startTouchDrag(e) {
        e.preventDefault();
        e.stopPropagation();

        hideContextMenu(); // Скрыть контекстное меню при начале сенсорного перетаскивания

        const startX = e.touches[0].clientX;
        const startY = e.touches[0].clientY;
        const startLeft = parseFloat(note.style.left) || 0;
        const startTop = parseFloat(note.style.top) || 0;

        function moveNoteTouch(e) {
            const deltaX = (e.touches[0].clientX - startX) / scale;
            const deltaY = (e.touches[0].clientY - startY) / scale;
            note.style.left = `${startLeft + deltaX}px`;
            note.style.top = `${startTop + deltaY}px`;
            const x = parseFloat(note.style.left) || 0;
            const y = parseFloat(note.style.top) || 0;
            const width = note.offsetWidth;
            const height = note.offsetHeight;
            socket.emit('update_note', { id, text: note.querySelector('textarea').value, x, y, width, height });
        }

        function endTouchDrag() {
            document.removeEventListener('touchmove', moveNoteTouch);
            document.removeEventListener('touchend', endTouchDrag);
        }

        document.addEventListener('touchmove', moveNoteTouch);
        document.addEventListener('touchend', endTouchDrag);
    }

    note.addEventListener('dblclick', (e) => {
        e.preventDefault();
        e.stopPropagation();
        showContextMenu(note, id, e.clientX, e.clientY);

        // Переключаем состояние перемещения
        isTouchDragEnabled = !isTouchDragEnabled;

        if (isTouchDragEnabled) {
            note.addEventListener('touchstart', startTouchDrag);

            // Добавляем слушатель, чтобы отключить перемещение при клике вне записи
            document.addEventListener('mousedown', checkClickOutside);
        } else {
            note.removeEventListener('touchstart', startTouchDrag);
            document.removeEventListener('mousedown', checkClickOutside);
        }
    });

    function checkClickOutside(e) {
        if (!note.contains(e.target)) {
            note.removeEventListener('touchstart', startTouchDrag);
            isTouchDragEnabled = false;
            document.removeEventListener('mousedown', checkClickOutside);
        }
    }

    addResizeListeners(note, id, 'note');
}

function handleExistingNotes() {
    document.querySelectorAll('.note').forEach(note => {
        const id = note.dataset.id;
        const text = note.querySelector('textarea').value;
        const x = note.offsetLeft;
        const y = note.offsetTop;
        const width = note.offsetWidth;
        const height = note.offsetHeight;

        note.querySelector('textarea').addEventListener('input', () => {
            const x = note.offsetLeft;
            const y = note.offsetTop;
            const width = note.offsetWidth;
            const height = note.offsetHeight;
            socket.emit('update_note', { id, text: note.querySelector('textarea').value, x, y, width, height });
        });

        note.querySelector('textarea').addEventListener('mousedown', (e) => {
            e.stopPropagation();
        });

        addNoteEventListeners(note, id);
    });
}

Возможно ли добавить маркдауны чтобы когда я вставляю код он отображался с учетом синтаксиса