Подсветка синтаксиса на сайте
В данной заметке я покажу, как можно сделать подсветку синтаксиса на сайте средствами плагина 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"
Исходики на гитхабе или скачать здесь .
Предыдущая запись
NppExec - плагин для запуска PHP кода в редакторе Notepad++Следующая запись
Как русифицировать IDE Eclipse