Изменение цвета комментариев в редакторе Atom

Я хотел бы изменить цвет комментариев в редакторе Atom. Из небольшого количества поисковых запросов я обнаружил, что могу добавить следующее в мой файл .atom/styles.less:

atom-text-editor::shadow .comment {
    color: #ffffaa;
}

Это здорово - теперь у меня есть яркие желтые комментарии, которые требуют быть замеченными, а не исчезать в фоновом режиме. Беда в том, что теперь он выглядит следующим образом

введите описание изображения здесь

Как вы можете видеть, цвет текста комментариев изменился, но разделители комментариев и ссылки в комментариях остаются в почти невидимом сером по умолчанию, что выглядит немного глупо.

Мои вопросы: (1) как я могу изменить цвет этих элементов, и что более важно (2), где я могу посмотреть, как изменить цвет этих элементов?

Обратите внимание, что я не программист на веб-сайте и ничего не знаю о CSS или каких-либо связанных технологиях. Поэтому я ищу довольно пошаговое решение, в отличие от найденных решений, например, в ответах на этот вопрос, которые предполагают значительное количество фон во внутренней работе этого материала.

ОТВЕТЫ

Ответ 1

Чтобы узнать классы CSS любого элемента, который вы хотите стилизовать, выполните следующие действия в редакторе:

  • С помощью курсора выделите элемент, который вы хотите проверить. Я следую вашему примеру двойной косой черты (т.е. Комментарий) здесь.
  • Нажмите Ctrl + Alt + Shift + P (или Cmd + Alt + P на OS X). Всплывающее окно расскажет вам все классы этого элемента. Обычно это последняя строка этого уведомления, представляющая для нас интерес. Для // это comment.line.double-slash.js.
  • Не учитывайте последнюю точку и все, что следует за ней, так как ее сохранение будет применяться только к определенному типу файлов (js в этом случае). Теперь добавьте точку. Остальная строка - это элемент, который мы хотим создать: .comment.line.double-slash.

Откройте .atom/styles.less, открыв командную палитру (Ctrl + Shift + P в Windows/Linux или Cmd + Shift + P в OSX) и выполнив поиск "Приложение: Откройте таблицу стилей".

Добавьте эти строки в .atom/styles.less, если они еще не присутствуют:

atom-text-editor::shadow {
    // custom comment styling goes here
}

В скобках вы можете поместить код CSS/LESS для любого элемента, который вы хотите настроить.

atom-text-editor::shadow {
    .comment.line.double-slash {
        color: #ffffaa;
    }
}

Дополнительные советы: вы можете перечислить идентификаторы элементов в виде списка, разделенного запятыми и пробелами, если к ним должны применяться те же изменения. Поэтому, если вы хотите, чтобы ссылки имели тот же цвет, что и комментарии, есть две возможности:

.comment.line.double-slash {
    color: #ffffaa;
}
.markup.underline.link.hyperlink { // I removed the '.https' to apply this to all protocols
    color: #ffffaa;
}

или

.comment.line.double-slash, .markup.underline.link.hyperlink {
    color: #ffffaa;
}

С длинными именами классов, поскольку они используются здесь, я бы предпочел первый вариант для удобочитаемости. Но это по вашему выбору.

Ответ 2

Использование 1.14.4:

// This styles comment text
atom-text-editor .syntax--comment {
    color: #53FFA1;
}

// This styles comment punctuation (i.e. //, and /*...*/)
.syntax--punctuation.syntax--definition.syntax--comment {
    color: #008C3F;
}

Ответ 3

Синтаксис изменен в 1.14. Теперь вам нужно использовать это для изменения цвета комментариев

atom-text-editor .syntax--comment {
         color: #228B22;
}