CSS: как сделать не-редактируемый и редактируемый листинг с полосами прокрутки?

Мне думается, проще всего может оказаться такой стилевой класс (визуальное оформление выбрано произвольно на основе этого блога):

<style>
 .listing {
  margin: 2px 40px;
  font-family: "Courier New", monospace; 
  font-size: 120%; 
  line-height: 120%;
  color: #006600;
  background-color: #F0F0F0; 
  border: 1px solid #D1D7DC;
  padding: 2px;
  overflow: auto;
  height: 10em;
  width: 50em;
  white-space: pre;
 }
</style>

Для отображения листингов без редактирования естественней всего использовать элемент pre, а для оформления листингов с редактированием - textarea.

После этого останется указать в разметке:

<pre class="listing">
 Широкий и/или длинный листинг
</pre>

<textarea class="listing">
 Широкий и/или длинный листинг
</textarea>

На другие элементы pre и textarea, не относящиеся к классу listing, стиль не будет влиять.

Вот что получается:

 const node parrot[] = {
                                                                    { 6, 0, 0},{ 7, 0, 0},{ 8, 0, 0},{ 9, 0, 0},
                                              { 4, 1, 0},{ 5, 1, 0},{ 6, 1,12},{ 7, 1,12},{ 8, 1,12},{ 9, 1,12},{10, 1, 0},{11, 1, 0},
                                   { 3, 2, 0},{ 4, 2,12},{ 5, 2,12},{ 6, 2,12},{ 7, 2,12},{ 8, 2,12},{ 9, 2,12},{10, 2,12},{11, 2,12},{12, 2, 0},
                        { 2, 3, 0},{ 3, 3,12},{ 4, 3,12},{ 5, 3,12},{ 6, 3,12},{ 7, 3,12},{ 8, 3,12},{ 9, 3,12},{10, 3,12},{11, 3,12},{12, 3,12},{13, 3,0},
                        { 2, 4, 0},{ 3, 4,12},{ 4, 4,12},{ 5, 4,12},{ 6, 4,12},{ 7, 4,12},{ 8, 4,12},{ 9, 4,12},{10, 4,12},{11, 4,12},{12, 4,12},{13, 4,0},
             { 1, 5, 0},{ 2, 5,12},{ 3, 5,15},{ 4, 5,15},{ 5, 5,12},{ 6, 5,12},{ 7, 5,12},{ 8, 5,12},{ 9, 5,12},{10, 5,12},{11, 5,15},{12, 5,15},{13, 5,12},{14, 5, 0},
             { 1, 6, 0},{ 2, 6,15},{ 3, 6,15},{ 4, 6,15},{ 5, 6,15},{ 6, 6,12},{ 7, 6,12},{ 8, 6,12},{ 9, 6,12},{10, 6,15},{11, 6,15},{12, 6,15},{13, 6,15},{14, 6, 0},
             { 1, 7, 0},{ 2, 7,15},{ 3, 7,15},{ 4, 7, 0},{ 5, 7,15},{ 6, 7,12},{ 7, 7,12},{ 8, 7,12},{ 9, 7,12},{10, 7,15},{11, 7, 0},{12, 7,15},{13, 7,15},{14, 7, 0},
             { 1, 8, 0},{ 2, 8,12},{ 3, 8,15},{ 4, 8,15},{ 5, 8,15},{ 6, 8,12},{ 7, 8,12},{ 8, 8,12},{ 9, 8,12},{10, 8,15},{11, 8,15},{12, 8,15},{13, 8,12},{14, 8, 0},
                        { 2, 9, 0},{ 3, 9,12},{ 4, 9,12},{ 5, 9,15},{ 6, 9, 0},{ 7, 9, 0},{ 8, 9, 0},{ 9, 9, 0},{10, 9,15},{11, 9,12},{12, 9,12},{13, 9, 0},
                        { 2,10, 0},{ 3,10,12},{ 4,10,12},{ 5,10,12},{ 6,10, 0},{ 7,10, 0},{ 8,10, 0},{ 9,10, 0},{10,10,12},{11,10,12},{12,10,12},{13,10, 0},
                                   { 3,11, 0},{ 4,11,12},{ 5,11,12},{ 6,11,12},{ 7,11, 0},{ 8,11, 0},{ 9,11,12},{10,11,12},{11,11,12},{12,11,0},
                        { 2,12, 0},{ 3,12,14},{ 4,12,12},{ 5,12,12},{ 6,12,12},{ 7,12,12},{ 8,12,12},{ 9,12,12},{10,12,12},{11,12,12},{12,12,14},{13,12, 0},
             { 1,13, 0},{ 2,13, 1},{ 3,13,14},{ 4,13,12},{ 5,13,12},{ 6,13,12},{ 7,13,12},{ 8,13,12},{ 9,13,12},{10,13,12},{11,13,12},{12,13,14},{13,13, 1},{14,13, 0},
             { 1,14, 0},{ 2,14, 1},{ 3,14, 1},{ 4,14,12},{ 5,14,12},{ 6,14,12},{ 7,14,12},{ 8,14,12},{ 9,14,12},{10,14,12},{11,14,12},{12,14, 1},{13,14, 1},{14,14, 0},
             { 1,15, 0},{ 2,15, 1},{ 3,15, 1},{ 4,15,12},{ 5,15,12},{ 6,15,12},{ 7,15,12},{ 8,15,12},{ 9,15,12},{10,15,12},{11,15,12},{12,15, 1},{13,15, 1},{14,15, 0},
             { 1,16, 0},{ 2,16, 1},{ 3,16, 0},{ 4,16,12},{ 5,16,12},{ 6,16,12},{ 7,16, 0},{ 8,16, 0},{ 9,16,12},{10,16,12},{11,16,12},{12,16, 0},{13,16, 1},{14,16, 0},
  { 0,17, 6},{ 1,17, 6},{ 2,17, 0},{ 3,17, 6},{ 4,17, 0},{ 5,17, 0},{ 6,17, 0},{ 7,17, 6},{ 8,17, 6},{ 9,17, 0},{10,17, 0},{11,17, 0},{12,17, 6},{13,17, 0},{14,17, 6},{15,17, 6},
  { 0,18, 6},{ 1,18, 6},{ 2,18, 6},{ 3,18, 6},{ 4,18, 6},{ 5,18, 6},{ 6,18, 6},{ 7,18, 6},{ 8,18, 6},{ 9,18, 6},{10,18, 6},{11,18, 6},{12,18, 6},{13,18, 6},{14,18, 6},{15,18, 6},
  { 0,19, 6},{ 1,19, 6},{ 2,19, 6},{ 3,19, 6},{ 4,19, 6},{ 5,19, 6},{ 6,19, 6},{ 7,19, 6},{ 8,19, 6},{ 9,19, 6},{10,19, 6},{11,19, 6},{12,19, 6},{13,19, 6},{14,19, 6},{15,19, 6},
                                                         { 5,20, 0},{ 6,20,12},{ 7,20,12},{ 8,20,12},{ 9,20,12},{10,20, 0},
                                                                    { 6,21, 0},{ 7,21,12},{ 8,21,12},{ 9,21, 0}

 };

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

20.10.2021, 14:36 [640 просмотров]