Мобильная версияЯ создаю небольшой редактор кода для HTML, CSS и JavaScript. Все работает нормально, но у меня проблема с раскрашиванием слов. Например, я бы хотел, чтобы различные , "class", и т. д. имели разные цвета. Как и во всех редакторах кода, здесь есть часть для написания кода и часть для просмотра предварительного просмотра, и может быть проблематично восстановить текст для запуска его в качестве предварительного просмотра из-за различных и , который требуется.
Я прочитал много вопросов в Интернете, и почти во всех ответах говорится, что вам нужно использовать div с contenteditable, потому что использовать это невозможно раскрасить слова. Но вопросы, которые я прочитал, показали, как раскрасить код для простоты использования, но мой случай другой, потому что в моем случае мне пришлось бы использовать этот код для отображения предварительного просмотра.
ЧЕГО Я ХОЧУ? Я хотел бы иметь возможность установить, например, в сценарии Javascript другой цвет для определенных слов. Затем специально задайте строки по цвету, например, , , , , "класс" и другие. Я бы хотел, чтобы текст мгновенно окрашивался и отображался по мере того, как пользователь пишет код, без нажатия каких-либо кнопок.
У меня есть две панели: одна для написания кода и одна для предварительного просмотра вывода. [
В панели для написания кода я бы хотел отобразить текст таким образом (как на фото выше), но с какими-то цветными строками:
Название страницы Это заголовок Это абзац.
Как напечатать цветные слова в текстовой области? Можно ли заставить div с contenteditable отображать выходные данные в предварительном просмотре? Или есть какой-то новый, лучший метод? Я хотел бы отметить, что я не хочу использовать jQuery, пожалуйста, не используйте jQuery.
Это мой код HTML, CSS и Javascript с использованием текстовой области (вы также можете найти его здесь):
//ЧИСЛА СТРОК const textarea = document.querySelector("textarea"); const Numbers = document.querySelector(".numbers"); textarea.addEventListener("keyup", (e) => { const num = e.target.value.split("\n").length; Numbers.innerHTML = Array(num).fill("").join(""); }); textarea.addEventListener("keydown", (event) => { if (event.key === "Tab") { const start = textarea.selectionStart; const end = textarea.selectionEnd; textarea.value = textarea.value.substring(0, начало) + "\т" + textarea.value.substring(конец); событие.preventDefault(); } }); //ПРОСМОТР ВЫВОДА функция showPreview() { var htmlCode = document.getElementById("htmlCode").value; // вар cssCode = // "" + document.getElementById("cssCode").value + ""; // вар jsCode = // "" + document.getElementById("jsCode").value + ""; varframe = document.getElementById("окно предварительного просмотра").contentWindow.document; рамка.открыть(); //frame.write(htmlCode + cssCode + jsCode); Frame.write(htmlКод); рамка.закрыть(); .code-area { дисплей: гибкий; гибкое направление: столбец; ширина: 50%; правая граница: 1 пиксель, сплошной #555; } .code-area textarea { изменение размера: нет; контур: нет; ширина: 100%; размер шрифта: 16 пикселей; } .preview-area { ширина: 100%; высота: 100%; } .preview-area iframe { ширина: 100%; высота: 100%; граница: нет; цвет фона: белый; } .редактор { отображение: линейная сетка; столбцы-шаблона сетки: 3em авто; разрыв: 10 пикселей; высота строки: 21 пиксель; радиус границы: 2 пикселя; переполнение-у: авто; ширина: 100%; высота: 240 пикселей; } .editor>* { отступ сверху: 10 пикселей; отступ снизу: 10 пикселей; } .numbers { выравнивание текста: по правому краю; фон: #333; отступ справа: 5 пикселей; } .numbers интервал { встречный инкремент: номер строки; } .numbers span::before { содержимое: счетчик (номер строки); дисплей: блок; цвет: #888; } текстовая область { высота строки: 21 пиксель; граница: 0; фон: прозрачный; черный цвет; минимальная ширина: 500 пикселей; контур: нет; изменение размера: нет; отступ справа: 10 пикселей; Название страницы Это заголовок Это абзац.
Предварительный просмотр
Спасибо
