Подсветка синтаксиса исходного кода на сайте


Как сделать подсветку кода на сайте? На самом деле тут нет нечего сложного достаточно просто выбрать каким плагином для этого воспользоваться.

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 практически не отъедает ресурсов.

#js #CSS

Copyright © 2013-2017