В связи с ведением данного блога, периодически приходится вставлять на сайт фрагменты html и css кода. В процессе реализации нормального решения, выяснилось что адекватного описания готовых решений на русском языке почему-то не найти, так что восполнить пробел придётся самостоятельно.
Начнём с простого:
Как вставить в текст html-код?Для вставки в текст на сайте одного - двух тегов можно использовать html символы < для вставки < и символ > для вставки > таким образом, тег В html коде пишется как Вставка больших фрагментов кода на сайт.
Для вставки самого html-кода на сайт, существуют три тега:
И и
Тег Обозначает блок предварительно отформатированного текста. То есть текста, в котором уже расставлены все пробелы, и переносы. По дефолту в браузере содержимое тега Отображается моноширинным (monospace) шрифтом и со всеми пробелами между словами. В теге Отображаются все пробелы, и учитываются все переносы строки (html по умолчанию не учитывает несколько пробелов, преобразуя их в один). Внутри контейнера Можно применять любые теги кроме следующих: , , , , и .
Следующий тег — специально предназначен для экранированного отображения программного кода. По дефолту в браузере содержимое тега отображается мелким моноширинным текстом. Тег не учитывает дополнительные проблелы и переносы текста, в результате чего для переноса строки необходимо использовать теги
и
Тег Не является валидным с точки зрения стандарта html, однако, на данный момент поддерживается всеми браузерами. Тег отображает содержимое контейнера как обычный текст со всеми пробелами и переносами. До момента «канонизации» тега, использование его считается некошерным и еретическим.
Правильным на текущий момент решением является использование тега С вложенными в него тегами в местах, где это необходимо. Технически, тег нам необходим для экранирования фрагментов кода, которые по той или иной причине выпадают из тега Как красиво оформить html-код посредством Jquery?
На нашем сайте мы используем скрипт Snippet . Сниппет предназначен для упрощения визуального оформления примеров программного кода. Работа скрипта выглядит следующим образом:
Div.blog_right h2 { font-size: 24px; color: #ff9933; margin-bottom: 9px; line-height: 44px; font-family: "arial", "verdana", sans-serif, "Lucida Sans"; font-weight: 100; margin-top: 0.83em; }
Подключение скрипта оформления кода:2) Подключаем файлы js и css. Так же, понадобится подключенная библиотека Jquery.
3) Настраиваем скрипт:
$(document).ready(function(){ $("pre.htmlCode").snippet("html",{style:"acid"}); // Ищем тэги С классом "htmlCode" // и подключаем к этим элементам стиль acid и обработку html $("pre.styles").snippet("css",{style:"acid"}); // Ищем тэги С классом "styles" // и подключаем к этим элементам стиль acid и обработку для CSS кода $("pre.js").snippet("javascript",{style:"acid"}); // Ищем тэги С классом "js" // и подключаем к этим элементам стиль acid и обработку для });
4) Более навороченная документация для скрипта есть на сайте разработчиков . Скрипт может менять оформление на лету, выделять необходимые куски кода в рамочки, выносить мусор и готовить еду.
Специальные символы HTML — это короткие фрагменты кода, называемые символьными сущностями. Они используются для отображения символов, имеющих в HTML особое значение, а также символов, которые не доступны на клавиатуре.
Специальные символы HTML называются зарезервированными. Например, левые () угловые скобки зарезервированы в HTML для определения открывающих и закрывающих тегов.
Символы, которые не доступны на клавиатуре, включают в себя такие знаки, как символ копирайта (©) и математическое значение пи.
Если мы хотим использовать их в документе и выводить в браузере, нужно использовать ссылки на символы HTML .
Практический примерПредположим, что вы хотите отобразить на веб-странице блок HTML-кода , чтобы при этом выводились теги элементов. Можно сделать это, просто поместив блок HTML в теги . Но вы обнаружите, что даже в , блок все равно будет обрабатываться как HTML-код и отображаться браузером соответствующим образом. В этом случае можно заменить все специальные символы HTML соответствующими символьными ссылками, чтобы браузер не обрабатывал код:
This is a list of items.
- List Item A
- List Item B
- List Item C