Речь пойдет о подсветке синтаксиса кода для любого сайта. Для этого мы будем использовать специальный скрипт SyntaxHighlighter, который позволяет реализовать красивую подсветку синтаксиса на любом сайте. Данный скрипт поддерживает множество языков программирования, таких как, например, PHP, C++, JavaScript, C# и многие другие. В рамках данной статьи мы подробно рассмотрим процесс установки SyntaxHighlighter на сайт, а затем перейдем к подробной инструкции по использованию скрипта.
Установка скрипта для подсветки синтаксиса очень простая и может быть разделена на 2 этапа:
1. Подключение необходимых файлов на страницах сайта. Для этого, скопируйте код ниже и вставьте в управление дизайном (CSS) или скопируйте в любой текстовый редактор и сохраните стили в формате .css, затем вставьте в верхнюю часть сайта к остальным стилям <link rel="stylesheet" type="text/css" href="/путь к стилю/файл.css" />
CSS
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }
.hljs-link { text-decoration: underline; }
.hljs { display: block; overflow-x: auto; color: #000066;padding:.5em; -webkit-text-size-adjust:none; }
.hljs-comment,
.hljs-quote { color: #c6c6c6; font-style: italic; font-weight: 400; } /* comment css, js, media */
.hljs-keyword { color: #cc3399; } /* function, var */
.hljs-selector-tag,
.hljs-name,
.hljs-literal,
.hljs-built_in { color: #56b6c2; } /* span, html <...> document, url */
.hljs-string,
.hljs-selector-pseudo { color: #339966; } /* html id-class content, before, after */
/* --- edit zone --- */
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-attr,
.hljs-number { color: #ff4d4d; } /* chisla */
.hljs-doctag,
.hljs-formula { color: #c678dd; }
.hljs-section,
.hljs-deletion,
.hljs-subst { color: #e06c75; }
.hljs-regexp,
.hljs-addition,
.hljs-meta-string { color: #69606b; } /* text */
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-attribute,
.hljs-title,
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta { color: #e67300; } /* id, class */
.hljs-title,
.hljs-class { color: #339966}
Подключение таблицы стилей закончено.
Наш сайт использует для тестирования и проверки материалов специальный сервис JSFiddle , поэтому мы постарались стилизовать код максимально приближенно к сервису.
Далее нам необходимо будет подключить файлы, отвечающие за подсветку синтаксиса определенного языка программирования. Для этого копируем представленный ниже скрипт и вставляем перед закрывающим тегом /body.
<script type="text/javascript" src="http://madeas.ru/2017redes/css/uCodes.js"></script>
Ниже вставляем:
<script> $(function () { $('ваш класс, в котором используется кодировка, например - .codeMessage').each(function(i, block) { hljs.highlightBlock(block); }); }); </script>
На этом установка завершена.
|
Понравился материал? Поделитесь с друзьями |
С этим материалом смотрят: Похожие материалы не найдены
| Feedback: 0 | |