Руководство по подсветке синтаксиса для Atom

Я очень доволен новым редактором Github. К сожалению, это не совсем легко настроить. Я хотел создать собственную тему выделения синтаксиса, потому что меня не устраивают те, которые доступны для загрузки (по крайней мере, они не очень хорошо подходят для Java)

Теперь файлы (синтаксис-переменные, color.less и т.д.) в стиле выглядят как:

~/.atom/ .../packages (if you want to change existing themes)

Проблема в том, что я не знаю, какие классы (CSS) стилируют элементы синтаксиса. Есть ли место, где я могу посмотреть, как изменить цвет, например, объявления типа переменной?

Ответ 1

Да, вы можете запустить Atom в режиме разработчика с помощью команды atom --dev или с помощью меню View > Developer > Open in Dev Mode .... Когда вы это сделаете, вы можете щелкнуть правой кнопкой мыши по любому элементу пользовательского интерфейса и выбрать Inspect Element из контекстного меню, как и в вашем веб-браузере.

Кроме того, для синтаксических элементов вы можете:

Поместите текстовый курсор на элемент, который вы хотите стиль
Нажмите Cmd+Alt+P на OS X, Ctrl+Alt+Shift+P на других платформах или найдите "Редактор: Область курсора журнала" в палитре команд, чтобы отобразить области действия элемента синтаксиса

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

Ответ 2

Вы можете использовать хромированную веб-консоль, нажав Ctrl+Shift+I (протестированный в Linux) и выделив любой элемент. После этого откройте таблицу стилей, нажав Edit->Open Your Stylesheet и добавьте стиль для элемента с синтаксисом LESS.

Например:

Вы хотите выделение жирным цветом класса и имени функции. Если вы выберите класс с хром-консолью, вы увидите, что у него есть класс .name

Что вы должны добавить в свой файл стилей что-то вроде этого:

atom-text-editor::shadow .name{
    font-weight: bold
}

И вы можете создать свою собственную тему. В Atom это не difficlt - нажмите Ctrl+Shift+P и введите "Generate Syntax Theme". В новой теме вы можете скопировать код из другой темы. Если вы не знаете CSS/LESS - не волнуйтесь! Ваша новая тема имеет файл в папке style с именем colors.less. Вы можете изменить его или написать новое правило цвета в файле base.less.

У Atom есть замечательный документ, вы можете прочитать о создании темы на этой странице https://atom.io/docs/v1.4.2/hacking-atom-creating-a-theme

Ответ 3

Для других, которые приходят сюда, потому что выделение для типа файла не распознается для вашего языка:

откройте файл ~/.atom/config.cson (с помощью ~/.atom/config.cson клавиш CTRL + SHIFT + p: введите '' open config '')
добавьте/отредактируйте раздел customFileTypes в core например, следующим образом:
```
core:
  customFileTypes:
    "source.lua": [
      "conf"
    ]
    "text.html.php": [
      "thtml"
    ]
```

(Вы можете найти имена областей действия языков ("source.lua", "text.html.php"...) в настройках языкового пакета, см. Здесь)