УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

Элементы сайта



Подсветка кода на сайте, скрипт SyntaxHighlighter MegaLang

Источник https://www.meweb.ru/articles.php?article_id=37

Подсветку кода на сайте можно сделать с помощью скрипта SyntaxHighlighter MegaLang. Данный скрипт используется для подсветки кода на этом сайте, где Вы сейчас находитесь.

Пример подсветки кода на web-страницеПодсветка кода на html-странице скрипт SyntaxHighlighter


Как подключить скрипт SyntaxHighlighter MegaLang для подсветки кода на веб-странице.

1. Сначала надо скачать дистрибутив SyntaxHighlighter MegaLang, можно здесь или на странице с разными версиями скрипта https://code.google.com/archive/p/syntaxhighlighter/

2. Затем в <head> прописываем

<link type="text/css" rel="stylesheet" href="styles/shCoreEclipse.css" />
<link type="text/css" rel="stylesheet" href="styles/shThemeEclipse.css" />
<script class="javascript" src="scripts/XRegExp.js" type="text/javascript"></script>
<script class="javascript" src="scripts/shLegacy.js" type="text/javascript"></script>
<script class="javascript" src="scripts/shCore.js" type="text/javascript"></script>
<script class="javascript" src="scripts/shMegaLang.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.all();
</script>


3. В HTML-файле код, который надо подсветить, обрамляем в теги <pre></pre> и присваиваем ему класс brush с необходимым языком программирования. 

Если подсвечиваем html, то код будет выглядеть так:

<pre class="brush: html">Здесь контент html, который необходимо подсветить
</pre>

Если подсвечиваем css, то код будет выглядеть так:

<pre class="brush: css">Здесь контент css, который необходимо подсветить
</pre>

Если подсвечиваем php, то код будет выглядеть так:

<pre class="brush: php">Здесь контент php, который необходимо подсветить
</pre>

... и так далее..

4. Внутри тега <pre> не должно быть никаких других тегов, все угловые скобки тегов должны быть заменены на &lt; - левая угловая скобка, и на &gt; - правая угловая скобка. Пример на рисунке ниже.

Подсветка кода на html-странице скрипт SyntaxHighlighter

Результат отображения на html-странице.

<html>
<body>
<h1>Пример использования PHP в HTML-тексте</h1>
<? php
текст php-программы
?>
</body>
</html>

Возможности скрипта:

  • подстветка кода для множества языков программирования
  • возможность настройки стиля отображения под дизайн своего сайта. Различные темы стилей расположены в папке styles в дистрибутиве
  • можно скрывать блоки с кодом, открывая их по клику, для этого надо добавить collapse: true к тегу <pre> или <script>, например, вот так: <pre class='brush: js; collapse: true'>Здесь контент, который необходимо подсветить и скрыть</pre>
  • файл shCore.js доступен для редактирования настроек.


Примеры тем скрипта SyntaxHighlighter MegaLang

Тема shThemeDefault.css

Скрипт SyntaxHighlighter MegaLang

Тема shThemeRDark.css

Скрипт SyntaxHighlighter MegaLang

Тема shThemeFadeToGrey

Скрипт SyntaxHighlighter MegaLang

Скачать готовый пример подсветки кода с помощью скрипта SyntaxHighlighter MegaLang


Элементы сайта