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

В данной заметке я покажу, как можно сделать подсветку синтаксиса на сайте средствами плагина Google Code Prettify в связке с CSS фреймворком Bootstrap 3. Пример такой подсветки можно видеть на данном сайте.

Установка

В секцию head поместить:

<!-- Подключаем стили бутстрапа: -->
<!-- Подключаем стили для подсветки кода: -->
<link href="prettify.css" rel="stylesheet">

Перед закрывающим тэгом body поместить:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Подключаем скрипт бутстрапа: -->
<!-- Подключаем скрипт для подсветки кода: -->
<script src="prettify.js"></script>
<!-- Инициализация функции подсветки кода: -->
<script type="text/javascript">
!function ($) {
	$(function(){
		window.prettyPrint && prettyPrint()   
	})
}(window.jQuery)
</script>

Использование

Если нужно просто подсветить:

<pre class="prettyprint"><!-- ваш программный код к статье --></pre>

Подсветка синтаксиса конкретной технологии с нумерацией строк:

<pre class="prettyprint linenums lang-php">
<?php
/**
 *  Class User
 */
class User
{
  public $name;
  
  public function getName($name){
    return $this->name = $name;
  }
}
</pre>

Встраиваемые классы (технологии):

class="prettyprint lang-html"
class="prettyprint lang-css"
class="prettyprint lang-js"
class="prettyprint lang-php"
class="prettyprint lang-apache"
class="prettyprint lang-sh"
class="prettyprint lang-sql"

Исходики на гитхабе или скачать здесь .