Как изменить выделение TODO в редакторе атомов

На мой взгляд, выделение флага TODO в редакторе атома слишком слабое/ненавязчивое.

Как я могу это изменить? Я НЕ хочу перечислять задачи на боковой панели (https://atom.io/packages/todo-show ).

Вот для сравнения:

В редакторе Vim есть очень сильное выделение (желательно): введите здесь описание изображения

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

Основная проблема в том, что атом выделяет многие другие кодовые слова этим цветом...


person zypro    schedule 13.03.2016    source источник


Ответы (1)


Поскольку редактор GitHub Atom построен на HTML5 и CSS3, вы можете очень легко изменить свою таблицу стилей, ниже я сделал небольшую запись о том, как внести это конкретное изменение, хотя вы можете применить те же принципы к любому элементу стиля в редакторе:

Снимок экрана конфигурации стиля с учетом Shadow DOM

Шаг за шагом

Первое, что вам нужно сделать, это найти экземпляр элемента, который вы хотите стилизовать, в этом случае я создал новый пустой файл с текстом //TODO: is too subtle.

  1. Теперь вам нужно найти соответствующий селектор для слова TODO, просто поместите курсор между буквами слова TODO и нажмите CtrlAltShiftP или выберите Editor: Log Cursor Scope в палитре команд.
  2. Селекторы, которые применяются к этому местоположению, перечислены от наименее конкретных вверху до наиболее конкретных внизу, в этом случае вам нужен наиболее конкретный селектор внизу, скопируйте его в буфер обмена.
  3. Затем вам нужно открыть свою личную таблицу стилей, вы можете сделать это, выбрав «Редактировать», а затем «Таблица стилей...», вы также можете выбрать Application: Open Your Stylesheet из палитры команд.
  4. Прокрутите до конца таблицы стилей и вставьте свой селектор из шага 2, вам нужно будет добавить точку (точку) в начале, чтобы сделать этот селектор действительным.
  5. Идите вперед и добавьте свой предпочтительный стиль, такой как ваш стиль VIM:
    atom-text-editor::shadow .type.class.todo {
      background-color: yellow;
      color: black;
      font-style: normal;
    }
  1. Наконец, сохраните таблицу стилей и вернитесь к тестовому документу, чтобы увидеть полученные изменения.

Спасибо zypro за указание на то, что мой первоначальный ответ не учитывал использование Shadow. DOM в последних версии Atom.

Обновление: в какой-то момент Atom избавился от Shadow DOM. Я использую версию 1.34.0, которая содержит следующую запись в вышеупомянутой таблице стилей:

atom-text-editor.editor .syntax--type.syntax--class.syntax--todo {
    background-color: yellow;
    color: black;
    font-style: normal;
}

Кроме того, для Python (и некоторых других языков) вам нужно будет снять флажок «Использовать синтаксические анализаторы деревьев» в настройках ядра.

person Richard Slater    schedule 24.03.2016
comment
Спасибо за этот подробный ответ. Но нет никаких изменений, делая ваши шаги. Мой атом знает 3 селектора для TODO: i.imgur.com/DHorHsr.png Это проблема? Другие изменения работают. - person zypro; 24.03.2016
comment
любопытно, я не уверен, почему это не работает для вас. Вы можете попробовать несколько вещей: 1. Перезагрузите редактор с помощью Ctrl-Alt-R 2. Измените имя класса с .storage.type.class.todo на .todo, затем сохраните и перезагрузите 3. Поместите !important между yellow и ;, затем сохраните и перезагрузите. - person Richard Slater; 24.03.2016
comment
Я нашел проблему! Мне пришлось отключить базовую настройку «Использовать Shadow DOM»! мой Бог. Большое спасибо =) - person zypro; 24.03.2016
comment
О, молодец, хорошая находка. Я не уверен, что отключать Shadow DOM — хорошая идея, так как эта опция исчезнет в будущей версии Atom. Я собираюсь немного прочитать о теневом DOM и посмотреть, как обновить свой ответ более точной версией. - person Richard Slater; 24.03.2016
comment
Все сделано и протестировано, для справки я зафиксировал вышеописанное в Atom 1.7.0-beta0. Спасибо за вашу помощь @zypro не смог бы понять это без вас. - person Richard Slater; 24.03.2016