Как вставить пример кода в веб-страницу

17/03/2013  веб-разработка, верстка, jQuery, html, CSS, онлайн-инструменты, скрипты

Иногда нужно показать кусок кода — HTML, CSS или jQuery. Однако браузеры понимают его буквально, поэтому без специального оформления увидеть код на странице не получится.

Решение — перевод кода в мнемонический (символьный) вид. Конвертация открывающих и закрывающих знаков в символы позволяет браузеру отображать код.

<a title="Вернуться на предыдущую страницу" href="javascript:history.back()">Вернуться на предыдущую страницу</a>

Онлайн-инструменты для кодирования

Вставка кода на веб-страницу

При вставке код на страницу, желательно обернуть его в тег <pre></pre> и <code></code> — текст будет отображаться привычным моноширинным шрифтом, сохраняя все пробелы.


<pre>
<code>[КОД]</code>
</pre>

Вставка программного кода с подсветкой синтаксиса

Существуют сервисы, которые не только закодируют ваш код, но и подсветят его в зависимости от синтаксиса в разных стилях.

<a title="Вернуться на предыдущую страницу" href="javascript:history.back()">Вернуться на предыдущую страницу</a>

Онлайн-инструменты для кодирования с подсветкой

Нужно выбрать синтаксис (Type/Language) и стиль кода (Style), если сервис не определил его автоматически.

Решения на jQuery

Если у вас много кода и частое желание им делиться, лучше подключить готовые библиотеки подсветки на jQuery .

Михаил Апсолямов
Михаил Апсолямов Создаю сайты. Оказываю услуги seo-продвижения. Провожу аудиты сайтов. Пишу статьи на заказ. Услуги и цены.

 

наверх