Syntax Highlighter

Простая библиотека подсветки синтаксиса на чистом JavaScript

Как использовать: Оберните ваш код в тег <pre class="sh-code" data-lang="язык"> или <code class="sh-code" data-lang="язык">

JavaScript

Пример кода на JavaScript:

// Функция для вычисления факториала
function factorial(n) {
    if (n <= 1) {
        return 1;
    }
    return n * factorial(n - 1);
}

// Использование async/await
async function fetchData() {
    try {
        const response = await fetch('/api/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Ошибка:', error);
        return null;
    }
}

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(x => x * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

Python

Пример кода на Python:

# Класс для работы с пользователями
class User:
    def __init__(self, name, email):
        self.name = name
        self.email = email
        self.is_active = True
    
    def deactivate(self):
        self.is_active = False
        return f"User {self.name} deactivated"

# Генератор чисел Фибоначчи
def fibonacci(n):
    a, b = 0, 1
    for _ in range(n):
        yield a
        a, b = b, a + b

# Использование
numbers = list(fibonacci(10))
print(numbers)  # [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

HTML

Пример HTML кода:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя страница</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Заголовок</h1>
        <p>Это параграф с <a href="#">ссылкой</a></p>
        <ul>
            <li>Элемент списка 1</li>
            <li>Элемент списка 2</li>
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

Пример CSS кода:

/* Стили для контейнера */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2em;
    background: #ffffff;
    border-radius: 8px;
}

/* Заголовки */
h1 {
    color: #333;
    font-size: 2em;
    margin-bottom: 1em;
}

/* Кнопки */
.button {
    display: inline-block;
    padding: 0.75em 1.5em;
    background: #2196f3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.button:hover {
    background: #1976d2;
}

Java

Пример кода на Java:

// Класс для работы с пользователями
public class User {
    private String name;
    private String email;
    private boolean isActive;
    
    public User(String name, String email) {
        this.name = name;
        this.email = email;
        this.isActive = true;
    }
    
    public void deactivate() {
        this.isActive = false;
    }
    
    public boolean getIsActive() {
        return this.isActive;
    }
    
    public String getName() {
        return this.name;
    }
}

// Использование
public class Main {
    public static void main(String[] args) {
        User user = new User("Иван", "ivan@example.com");
        System.out.println("Пользователь создан: " + user.getName());
    }
}

Программная подсветка

Пример использования через JavaScript API:

// Получить элемент и подсветить его
const codeBlock = document.getElementById('my-code');
syntaxHighlighter.highlightElement(codeBlock, 'javascript');

// Или подсветить строку кода
const code = 'function hello() { return "world"; }';
const highlighted = syntaxHighlighter.highlight(code, 'javascript');
document.getElementById('output').innerHTML = highlighted;