Подсветка синтаксиса на сайте при помощи 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 .
30.06.2020 Скачать исходники Пример
Другие статьи

В этом уроке мы рассмотрим, как использовать функции транзакций PHP PDO для обеспечения целостности данных в б...

В этом уроке вы узнаете, как управлять BLOB-данными в базе данных SQLite с помощью PHP PDO. BLOB обозначает бо...

В этом уроке показано, как можно различными способами запрашивать данные из таблицы SQLite с помощью PHP PDO....