Элемент textarea с нумерацией строк для листингов - а надо ли?

Для JQuery есть плагин, и не один.

Можно использовать также JS-редактор CodeMirror или подобное, скажем, Ace.

Можно подложить фоновую картинку под textarea, как индус, но вертикальное смещение будет отличаться при разных размерах текста в элементе у разных браузеров и при разных системных шрифтах по умолчанию!

Есть комбинированные решения на JS+CSS, но тоже кривовато, особенно если учесть, что современный браузер предоставляет возможность тянуть textarea за уголок, которую не во всех браузерах можно отключить.

По-моему, проблема решается проще, если отказаться от идеи непременно использовать для листинга textarea. Особенно если мы собрались листинг только отображать, а не редактировать на странице.

Наверное, предложенный способ только на CSS не очень удобен при ручной разметке, но для "зашития" в движок вполне подойдёт.

Итак, просто определяем в стиле два CSS-класса:

<style>
 .lst { /* контейнер листинга */
  font-family: monospace;
  background-color: #eee;
  width: 90%;
  margin: 4em auto;
  padding: 0.5em;
  border-radius: .25em;
  box-shadow: .1em .1em .5em rgba(0,0,0,.33);
  line-height: 0;
  counter-reset: line;
  color: #060;
 }
 .str { /* строка листинга */
  display: block;
  line-height: 1.25rem;
 }  
 .str::before { /* номер строки */
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  border-right: 1px solid #CCC;
  padding: 0 .5em;
  margin-right: .5em;
  color: #00F;
 }
</style>

И потом в теге pre с классом lst применяем к каждой строке листинга второе стилевое указание:

<pre class="lst">
<span class="str">#include &lt;iostream&gt;</span>
<span class="str">#include &lt;cstdlib&gt; // для system</span>
<span class="str">using namespace std;</span>
<span class="str"></span>
<span class="str">int main() </span>
<span class="str">{ </span>
<span class="str">    cout &lt;&lt; "Hello, world!" &lt;&lt; endl;</span>
<span class="str">    system("pause"); // Только для тех, у кого MS Visual Studio</span>
<span class="str">    return 0; </span>
<span class="str">}</span>
</pre>

Вышло вот что, в том числе, и в IE сработало, правда, в IE11 текст не выделяется отдельно от номеров строк :( В Firefox вообще всё хорошо, в "Хромом" после вставки скопированного листинга в текстовый редактор между строками оказываются "лишние" пустые строки.

классы CSS для нумерации строк листинга (скриншот)

05.09.2019, 12:51 [2731 просмотр]