Как сменить цвет темы gist и добавить кнопку копировать?

Для изменения цвета темы gist и добавления кнопки "копировать" вам понадобится использовать CSS и JavaScript.

1. Изменение цвета темы gist:
Gist предоставляет различные темы оформления, но если вы хотите изменить цвета вручную, можно воспользоваться следующим CSS-кодом:

.theme-gist .pl-c1,
.theme-gist .pl-en {
  color: #FF0000; /* Цвет для комментариев и ключевых слов */
}

.theme-gist .pl-s .pl-v {
  color: #0000FF; /* Цвет для строковых литералов */
}

.theme-gist .pl-ent {
  color: #00FF00; /* Цвет для идентификаторов */
}

/* Другие стили */
.theme-gist {
  background-color: #F0F0F0; /* Цвет фона */
  font-size: 14px; /* Размер шрифта */
}

Вы можете изменить цвета в указанном коде с помощью шестнадцатеричных значений или ключевых слов CSS, чтобы привести их в соответствие с вашими предпочтениями. Поместите этот код внутрь тега <style> в вашем HTML-документе.

2. Добавление кнопки "копировать":
Добавление кнопки "копировать" позволяет пользователям легко копировать содержимое gist. Для этого можно использовать библиотеку Clipboard.js, которая облегчает работу с буфером обмена в JavaScript:

1. Подключите Clipboard.js к вашему проекту. Вы можете включить его с помощью CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

2. Добавьте кнопку "копировать" в ваш HTML-разметку там, где вам нужно:

<button class="btn-copy" data-clipboard-target="#gist-content">Копировать</button>

В этом примере мы добавляем класс "btn-copy" и атрибут данных "data-clipboard-target", который указывает на идентификатор элемента с содержимым gist, которое нужно копировать. Поместите этот элемент внутри контейнера gist.

3. Наконец, добавьте следующий JavaScript-код для активации функциональности копирования:

var btnsCopy = document.querySelectorAll('.btn-copy');
var clipboard = new ClipboardJS(btnsCopy);

clipboard.on('success', function(e) {
  alert('Содержимое скопировано в буфер обмена!');
});

clipboard.on('error', function(e) {
  alert('Не удалось скопировать содержимое!');
});

В этом примере мы используем querySelectorAll для выбора всех элементов с классом "btn-copy", а затем применяем Clipboard.js для каждой кнопки. Мы также добавляем обработчики событий "success" и "error" для отслеживания успешного или ошибочного копирования.

Надеюсь, что эти инструкции помогут вам изменить цвет темы gist и добавить кнопку "копировать" в вашем HTML-проекте.