Подсветка синтаксиса исходного кода на сайте
Как сделать подсветку кода на сайте? На самом деле тут нет нечего сложного достаточно просто выбрать каким плагином для этого воспользоваться.
- 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 практически не отъедает ресурсов.
Источник: https://www.poseti.net/articles/podsvetka-koda-na-sajte