Syntax Highlighter - Инструкция по использованию

ОПИСАНИЕ

Syntax Highlighter - это простая и легковесная библиотека для подсветки синтаксиса кода на чистом JavaScript. Не требует зависимостей и работает во всех современных браузерах.

БЫСТРЫЙ СТАРТ

1. Скачивание и установка файлов

Скачайте необходимые файлы библиотеки:
- CSS файл: https://embedlab.ru/demos/sh/syntax-highlighter.css
- JavaScript файл: https://embedlab.ru/demos/sh/syntax-highlighter.js

Разместите скачанные файлы на вашем сайте в нужной директории (например, в папке /js/ или /css/, или в корне сайта).

2. Подключение файлов

Добавьте в ваш HTML файл ссылки на скачанные файлы (укажите правильные пути к файлам на вашем сайте):

<link rel="stylesheet" href="syntax-highlighter.css">
<script src="syntax-highlighter.js"></script>

Если файлы размещены в подпапке, укажите соответствующий путь:
<link rel="stylesheet" href="css/syntax-highlighter.css">
<script src="js/syntax-highlighter.js"></script>

3. Обертка кода в теги

Вариант 1: Автоматическая подсветка (рекомендуется)

Оберните ваш код в тег <pre> или <code> с классами sh-code и атрибутом data-lang:

<pre class="sh-code" data-lang="javascript">
function hello() {
    console.log("Hello, World!");
}
</pre>

Или:

<code class="sh-code" data-lang="python">
def hello():
    print("Hello, World!")
</code>

Важно: 
- Класс sh-code обязателен
- Атрибут data-lang указывает язык программирования
- Подсветка происходит автоматически при загрузке страницы

Вариант 2: Программная подсветка

Используйте JavaScript API для подсветки кода программно:

// Подсветить элемент по селектору
syntaxHighlighter.highlightElement('#my-code', 'javascript');

// Или получить HTML с подсветкой
const code = 'function test() { return true; }';
const highlighted = syntaxHighlighter.highlight(code, 'javascript');
document.getElementById('output').innerHTML = highlighted;

ПОДДЕРЖИВАЕМЫЕ ЯЗЫКИ

Библиотека поддерживает следующие языки программирования:

- javascript - JavaScript
- python - Python
- html - HTML
- css - CSS
- java - Java

СВЕТЛАЯ ТЕМА

Для использования светлой темы добавьте класс light:

<pre class="sh-code light" data-lang="javascript">
function example() {
    return "test";
}
</pre>

API

Методы

highlight(code, language)
Подсвечивает строку кода и возвращает HTML.

Параметры:
- code (string) - исходный код
- language (string) - язык программирования (по умолчанию: 'javascript')

Возвращает: HTML строка с подсветкой

Пример:
const highlighted = syntaxHighlighter.highlight(
    'function test() { return true; }',
    'javascript'
);

highlightElement(element, language)
Подсвечивает код в DOM элементе.

Параметры:
- element (string|HTMLElement) - селектор или DOM элемент
- language (string) - язык программирования

Пример:
syntaxHighlighter.highlightElement('#my-code', 'python');
syntaxHighlighter.highlightElement(document.getElementById('code'), 'javascript');

init()
Инициализирует автоматическую подсветку для всех элементов с классом sh-code.

Пример:
// Обычно вызывается автоматически, но можно вызвать вручную
syntaxHighlighter.init();

СТИЛИЗАЦИЯ

Все элементы подсветки имеют CSS классы, которые можно переопределить:

- .sh-code - основной контейнер кода
- .sh-keyword - ключевые слова
- .sh-string - строки
- .sh-comment - комментарии
- .sh-number - числа
- .sh-function - функции
- .sh-operator - операторы

Пример кастомизации

.sh-code {
    background: #2d2d2d;
    border-radius: 12px;
    padding: 2em;
}

.sh-keyword {
    color: #ff6b6b;
    font-weight: bold;
}

ОСОБЕННОСТИ

- Чистый JavaScript, без зависимостей
- Автоматическая инициализация
- Поддержка нескольких языков
- Легковесная (менее 10KB)
- Кастомизируемые стили
- Темная и светлая темы

СОВМЕСТИМОСТЬ

Библиотека работает во всех современных браузерах:
- Chrome/Edge (последние версии)
- Firefox (последние версии)
- Safari (последние версии)
- Opera (последние версии)