Html добавляет номера строк в textarea

У меня есть текстовая область, как показано в коде ниже, как отображать номера строк в левой части.

Есть ли плагин jquery?

<TEXTAREA name="program" id="program" rows="15" cols="65" ></TEXTAREA>

Ответ 1

Существует Lined TextArea ^mirror плагин для jQuery от Алана Уильямсона
Лицензия MIT
JQuery 1. 3+

Ответ 2

Вы можете очень хорошо попробовать Code Mirror, библиотеку JavaScript для встраивания редактора кода в веб-страницу.

Со строками кода у этого есть большие особенности как

Автозаполнение
Темы
Смешанные языковые режимы
Поиск
Интерфейс слияния/различий
Пользовательские полосы прокрутки и т.д.

Ответ 3

Это очень простой, но эффективный трюк. Вставляет изображение с уже добавленными номерами строк.

Единственная проблема в том, что вам может потребоваться создать собственное изображение, соответствующее дизайну вашего интерфейса.

https://jsfiddle.net/vaakash/5TF5h/

textarea {
    background: url(http://i.imgur.com/2cOaJ.png);
    background-attachment: local;
    background-repeat: no-repeat;
    padding-left: 35px;
    padding-top: 10px;
    border-color:#ccc;
}

Кредит идет: Аакаш Чакраварти

Ответ 4

CodePress - это тот, который используется в WordPress.

Ответ 5

Никто не пытался сделать это, используя объект HTML5 Canvas и рисуя на нем номера строк. Итак, вот что мне удалось объединить за несколько часов. Положите холст и текстовую область, одну рядом с другой, и нарисуйте цифры на холсте.

https://www.w3schools.com/code/tryit.asp?filename=G68VMFWS12UH

true, есть ограничение: мы не можем легко справиться с переносом слов в функции Paint() без итерации всего содержимого текстовой области и удаления объекта на зеркальный объект для измерения высоты каждой строки. Также приведет к очень сложному коду.

предварительный просмотр изображения