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

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

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

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

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

• http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx
• Инструмент

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

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

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

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

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

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

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

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

• https://pinetools.com/syntax-highlighter
• http://quickhighlighter.com/
• http://highlight.hohli.com/

Решения на jQuery

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

• https://highlightjs.org/
• https://prismjs.com/