В пакете Atom, как я стилю шаблонов в грамматике?

Я хочу создать очень простой пользовательский atom пакет, где я выделяю определенные слова на основе регулярных выражений. Я работаю с файлами конфигурации, занимающимися большим количеством IP-адресов. Я хочу, чтобы цвет ip адрес 1.1.1.1 красный, например, 0.0.0.0 синий и т.д.

Так просто создать пакет, это то, что я сделал:

Созданный файл: C:\Users\MyUsername\.atom\packages\MyPackage\package.json

{
  "name": "language-conf",
  "version": "0.0.1",
  "description": "Syntax highlighting for configuration files",
  "engines": {
    "atom": "*"    
  }
}

И файл: C:\Users\MyUsername\.atom\packages\MyPackage\grammars\rules.cson

'scopeName': 'source.conf'  
'name': 'CONF'  
'fileTypes': ['CONF']  
'patterns': [  
  {
    'match': '1\.1\.1\.1'
    'name': 'constant.numeric.integer.hexadecimal.python'
  },
  {
    'match': '0\.0\.0\.0'
    'name': 'constant.numeric.integer.hexadecimal.python'
  }
]

Когда я открываю файл конфигурации, это выглядит так:

Обратите внимание, как формируются ips, и это здорово! Как я могу выбрать цвета для разных ips? Все ips окрашены в желтый цвет. Будет хорошо, если вместо свойства name было свойство цвета.

Изменить

Вкратце, мне понравится этот пример:

http://blog.gaku.net/create-a-custom-syntax-highlighting-with-atom-editor/

В этой ссылке он не показывает вам, как поместить разные цвета/стили в разные правила.

Ответ 1

Чтобы стилизовать разные шаблоны с разными цветами в Atom, сначала назначьте разные имена каждому шаблону в вашем rules.cson:

'scopeName': 'source.conf'  
'name': 'CONF'  
'fileTypes': ['CONF']  
'patterns': [  
  {
    # note that you should be using '\\' instead of '\' to escape '.'
    'match': '1\\.1\\.1\\.1'
    'name': 'style1'
  },
  {
    'match': '0\\.0\\.0\\.0'
    'name': 'style0'
  }
]

Затем создайте файл C:\Users\MyUsername\.atom\packages\MyPackage\styles\styles.less который определяет стили CSS с желаемыми цветами для каждого имени шаблона:

atom-text-editor::shadow {
    .style0 {
      color: blue;
    }
    .style1 {
      color: red;
    }
}

Затем перезагрузите окно Atom (Ctrl+Alt+R), и вы должны увидеть ваши шаблоны с назначенными цветами:

Это работает, потому что:

Таблицы стилей автоматически извлекаются из каталога styles если они явно не определены в package.json
Стили, которые комбинируются с atom-text-editor::shadow, применяются к редактору

Ответ 2

Я задал этот вопрос очень давно. Мое решение перестало работать, поэтому я вернулся к нему. По какой-то причине, теперь я должен добавить ключевое слово "синтаксис" в мой стиль. Другими словами, мой файл \styles\styles.less теперь выглядит так:

atom-text-editor::shadow {
    .syntax--style0 {
      color: red;
    }
    .syntax--style1 {
      color: yellow;
    }
}