Как сделать подсветку кода на сайте? На самом деле тут нет нечего сложного достаточно просто выбрать каким плагином для этого воспользоваться.
Highlight.js – Популярный скрипт, поддерживает много языков программирования, может выполняться как на сервере так и у клиента.
SyntaxHighlighter - Тоже можно сказать популярный скрипт для подсветки кода, поддерживает много языков, выполняется у клиента и имеет несколько готовых тем оформления.
Google Code Prettify – плагин от корпорации добра Google как и многие знает много языков и выполняется на стороне клиента, но главная его достоинство это малый вес самого скрипта. Если на сайте используете Фреймворк Bootstrap то мне лучше и легче использовать Google Code Prettify.
Что бы подключить Google Code Prettify на сайт скачиваем необходимые файлы с сайта Google ( или prettify.zip )
Подключаем файл стилей:
<link href="css/prettify.css" rel="stylesheet">
В конце страницы, перед закрытием тега Body добавляем клиентские скрипты:
<script src="js/prettify.js"></script>
<script type="text/javascript">
!function ($) {
$(function(){
window.prettyPrint && prettyPrint()
})
}(window.jQuery)
</script>
Что бы наши примеры кода теперь подсвечивались добавляем к тегу PRE класс prettyprint
<pre class="prettyprint"><!-- ваш код к статье, исходник. --></pre>
Если необходимо нумеровать строки то необходимо добавить еще класс linenums
<pre class="prettyprint linenums"><!-- ваш код к статье, исходник. --></pre>
Малый вес скрипта влияет на скорость загрузки страницы и в отличии от Syntax Highlighter практически не отъедает ресурсов.