Вставить в текст html-код

Периодически приходится вставлять на сайт фрагменты html и css кода. В процессе реализации нормального решения, выяснилось что адекватного описания готовых решений на русском языке почему-то не найти, так что восполнить пробел придётся самостоятельно.

Начнём с простого:

Как вставить в текст html-код?

Для вставки в текст на сайте одного - двух тегов можно использовать html символы &lt; для вставки < и символ &gt; для вставки > таким образом, тег <pre> в html коде пишется как &lt;pre&gt;.

Вставка больших фрагментов кода на сайт.

Для вставки самого html-кода на сайт, существуют три тега:

<pre> и <code> и <plaintext>

Тег <pre> обозначает блок предварительно отформатированного текста. То есть текста, в котором уже расставлены все пробелы, и переносы. По дефолту в браузере содержимое тега <pre> отображается моноширинным (monospace) шрифтом и со всеми пробелами между словами. В теге <pre> отображаются все пробелы, и учитываются все переносы строки (html по умолчанию не учитывает несколько пробелов, преобразуя их в один). Внутри контейнера <pre> можно применять любые теги кроме следующих: <big>,<img>, <object>, <small>, <sub> и <sup>.

Следующий тег — <code> специально предназначен для экранированного отображения программного кода. По дефолту в браузере содержимое тега <code> отображается мелким моноширинным текстом. Тег не учитывает дополнительные проблелы и переносы текста, в результате чего для переноса строки необходимо использовать теги <br> и <p>.

Тег <plaintext> не является валидным с точки зрения стандарта html, однако, на данный момент поддерживается всеми браузерами. Тег отображает содержимое контейнера как обычный текст со всеми пробелами и переносами. До момента «канонизации» тега, использование его считается некошерным и еретическим.

Правильным на текущий момент решением является использование тега <pre> с вложенными в него тегами <code> в местах, где это необходимо. Технически, тег <code> нам необходим для экранирования фрагментов кода, которые по той или иной причине выпадают из тега <pre>.

Однако тут есть ещё одна проблема: читать стену текста без должного форматирования достаточно трудно, а заниматься форматированием каждого элемента текста вручную — долго и нудно. Особенно в ситуации с приведением пятисот строк кода.
 <pre> 
<code>
  <style>
a.button19 {
  display: inline-block;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0,0,0,.5);
  user-select: none;
  padding: .7em 1.5em;
  border: 1px solid rgb(80,32,0);
  border-radius: 5px;
  outline: none;
  background: rgb(147,80,36) linear-gradient(rgb(106,58,26), rgb(147,80,36) 80%);
  box-shadow:
   0 6px rgb(86,38,6),
   0 3px 15px rgba(0,0,0,.4),
   inset 0 1px rgba(255,255,255,.3),
   inset 0 0 3px rgba(255,255,255,.5);
  transition: .2s;
}
.button19:hover {
  background: rgb(167,91,41) linear-gradient(rgb(126,69,31), rgb(167,91,41) 80%);
}
.button19:active {
  background: rgb(120,63,25) linear-gradient(rgb(120,63,25) 20%, rgb(167,91,41));
  box-shadow:
   0 2px rgb(86,38,6),
   0 1px 6px rgba(0,0,0,.4),
   inset 0 1px rgba(255,255,255,.3),
   inset 0 0 3px rgba(255,255,255,.5);
  -webkit-transform: translate(0, 4px);
  transform: translate(0, 4px);
}
   </style>
  <a href="#" class="button19">кнопка19</a>
 </code>
</pre>
 
 
 
RSS
Нет комментариев. Ваш будет первым!
OyO