Трусов Михаил — SuperProgrammist.Ru

Михаил Юрьевич Трусов

Более 25 лет опыта в программировании

Несколько способов вставить пример программного кода, включая код html, на веб-страницу

Итак, вставить программный код, включая html, на веб-страницу можно:

С помощью тега xmp — невалиден, но очень удобен

Давно исключен из стандарта HTML и не рекомендуется для использования. Но поддерживается всеми браузерами и очень удобен в использовании:

Единственный тег, который нельзя использовать в примерах, отображаемых с помощью данного тега, это — </xmp>, т.к. он завершает блок и используется при построении дерева DOM.

Образец использования:

Вид на странице без дополнительной стилизации, кроме переносов, чтобы пример уместился по ширине:

<ul> <li class="article__list-item"><a href="#tag_xmp">С помощью тега xmp (невалиден, но очень удобен)</a></li> <li class="article__list-item"><a href="#tag_pre_code">С помощью сочетания тегов pre и code (кошерно, но не удобно для вставки html кода)</a></li> <li class="article__list-item"><a href="#tag_textarea">С помощью тега textarea</a></li> <li class="article__list-item"><a href="#tag_script">С помощью тега script (валиден и очень удобен, но не семантично)</a></li> </ul>

С помощью сочетания тегов pre и code — кошерно, но не удобно для вставки html кода

Единственный рекомендуемый стандартом набор тегов для демонстрации программного кода на странице. Есть одно неудобство: надо экранировать теги html

Образец использования:

Вид на странице без дополнительной стилизации, кроме переноса строк, чтобы пример уместился по ширине:

            
    <ul>
        <li class="article__list-item"><a href="#tag_xmp">С помощью тега xmp (невалиден, но очень удобен)</a></li>
        <li class="article__list-item"><a href="#tag_pre_code">С помощью сочетания тегов pre и code (кошерно, но не удобно для вставки html кода)</a></li>
        <li class="article__list-item"><a href="#tag_textarea">С помощью тега textarea</a></li>
        <li class="article__list-item"><a href="#tag_script">С помощью тега script (валиден и очень удобен, но не семантично)</a></li>
    </ul>    
                    
        

С помощью тега textarea

Упоминаю этот способ, потому что его иногда рекомендуют на stackoverflow.com. Действительно, вставка кода в тег textarea позволяет отобразить пример кода как есть, не экранируя html теги. Но это способ не очень удобен тем, что требует расчета ширины и высоты textarea для каждого содержимого.

Образец использования:

Вид на странице c дополнительной стилизацией (без нее неудобно):

С помощью тега script — валиден и очень удобен, но не семантично

Образец использования тега script для вставки примера программного кода.

<script type="plain/text" class="code-block"> <ul> <li class="article__list-item"><a href="#tag_xmp">С помощью тега xmp (невалиден, но очень удобен)</a></li> <li class="article__list-item"><a href="#tag_pre_code">С помощью сочетания тегов pre и code (кошерно, но не удобно для вставки html кода)</a></li> <li class="article__list-item"><a href="#tag_textarea">С помощью тега textarea</a></li> <li class="article__list-item"><a href="#tag_script">С помощью тега script (валиден и очень удобен, но не семантично)</a></li> </ul> </script>

Идея основана на том, что содержимое заключенное между открывающим и закрывающим тегами script исключается из анализа дерева DOM. По умолчанию это содержимое интерпретируется как javascript код. Но можно указать браузеру, что это простой текст с помощью атрибута type="plain/text" и тогда весь текст примера будет выведен на страницу как есть, с сохранением форматирования, пробелами и т.д. В примере демонстрируемого кода не должно быть закрывающего тега </script>. Для его отображения удобно использовать следующие правила css:

Вид на странице c дополнительной стилизацией (без нее неудобно смотреть):

Практические выводы

Если пример не содержит html код, то можно (и нужно) использовать сочетание тегов pre и code. Они рекомендованны стандартом и будут правильно трактоваться любым браузером.

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

Но бывает, что по каким-то причинам не хочется или невозможно использовать замену скобок для тегов. Тогда можно использовать тег script c атрибутом type="plain/text" или даже невалидный тег xmp, который до сих пор прекрасно отображается в любом браузере и вполне возможно скоро вернется в стандарт.

Я лично для вставки образцов html кода остановился на использовании тега script c атрибутом type="plain/text".