Подсветка синтаксиса на сайте
В данной заметке я покажу, как можно сделать подсветку синтаксиса на сайте средствами плагина Google Code Prettify в связке с CSS фреймворком Bootstrap (любой версии).
Установка
В секцию head
поместить:
<!-- Подключаем стили бутстрапа: --> <!-- Подключаем стили для подсветки кода: --> <link href="prettify.css" rel="stylesheet">
Перед закрывающим тэгом body
поместить:
<script src="https://code.jquery.com/jquery-3.6.2.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"
Исходики на гитхабе или скачать здесь .