Вставка примеров html-кода на сайт. -

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

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

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

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

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

Для вставки самого 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>.

Однако тут есть ещё одна проблема: читать стену текста без должного форматирования достаточно трудно, а заниматься форматированием каждого элемента текста вручную — долго и нудно. Особенно в ситуации с приведением пятисот строк кода.

Как красиво оформить 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;
}

Подключение скрипта оформления кода:

1) Скачиваем файлы с официального сайта или с нашего сайта.

2) Подключаем файлы js и css. Так же, понадобится подключенная библиотека Jquery.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.snippet.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.snippet.css" />

3) Настраиваем скрипт:

	$(document).ready(function(){

	$("pre.htmlCode").snippet("html",{style:"acid"});
		// Ищем тэги <pre> с классом "htmlCode"
		// и подключаем к этим элементам стиль acid и обработку  html

	$("pre.styles").snippet("css",{style:"acid"});
		// Ищем тэги <pre> с классом "styles"
		// и подключаем к этим элементам стиль acid и обработку для CSS кода
	
	$("pre.js").snippet("javascript",{style:"acid"});
		// Ищем тэги <pre> с классом "js"
		// и подключаем к этим элементам стиль acid и обработку для	
	});

4) Более навороченная документация для скрипта есть на сайте разработчиков. Скрипт может менять оформление на лету, выделять необходимые куски кода в рамочки, выносить мусор и готовить еду.

Теги: css jquery кодинг