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

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

теперь файлы (синтаксис-переменные, цвет.меньше и т. д.) стиль, кажется, в:

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

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

16
atom-editor customization editor syntax-highlighting

3 ответов

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

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

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

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

25

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

например:

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

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

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

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

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

6

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

  • открыть ~/.atom/config.cson файл (CTRL+SHIFT+p: введите "открыть конфигурацию")

  • добавить/редактировать под core например так:

    core:
  customFileTypes:
    "source.lua": [
      "conf"
    ]
    "text.html.php": [
      "thtml"
    ]

(вы найдете имена областей языков ("source.Луа", "текст.формат html.РНР."..) в настройках языкового пакета посмотреть здесь)

0