Подсветка синтаксиса на сайте при помощи Google Code Prettify + Bootstrap 3

Делаем подсветку синтаксиса (кода) на сайте средствами плагина Google Code Prettify в связке с 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">
<?= Breadcrumbs::widget([
  'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : []
]) ?>
</pre>

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

lang-html
lang-css
lang-js
lang-php
lang-apache
lang-sh
lang-sql	

Пример

Репозиторий на github .