Create Atom Package Stay on Atom

Stay on Atom

Package Generator: Genarate Package

Ctrl + Shift + P → Genarate Packageでパッケージテンプレを生成

package.json

  "grammars": [
     {
         "file": "grammars/css.cson"
       },
       {
         "file": "grammars/language-css.cson"
      },
      {
        "file": "grammars/language-html.cson"
      }
   ]

grammar/css.cson

'name': 'Injection updates for CSS'
'scopeName': 'source.css.custominjection'
'type': 'injection'
'injectionSelector': 'source.css -comment'
'patterns': [
   #（clamp, min, max）html,phpファイル対策 (直前のという条件
  {
    'match': '\\b(?:clamp|min|max)\\s*\\('
    'name': 'support.function.misc.css'
  }
   # !important ;直前のという条件 ()後対策
  {
    'match': '!important(?=\\s*;)'
    'name': 'keyword.control.css.important'
  }
   
  # 開き括弧 (
  {
    'match': '\\('
    'name': 'punctuation.section.function.begin.css'
  }

  # 閉じ括弧 )
  {
    'match': '\\)'
    'name': 'punctuation.section.function.end.css'
  }

  # 演算子 / と *
  {
    'match': '/|\\*'
    'name': 'keyword.operator.arithmetic.css'
  }

  # フォント名（引用符なしのキーワード）
  {
    'match': '\\b(sans-serif|serif|cursive|system-ui|ui-sans-serif|Meiryo)\\b'
    'name': 'support.constant.font-family.css'
  }
  
  # value support
  {
    'match': '\\b(background-position|break-spaces)\\b'
    'name': 'support.constant.property-value.css'
  }
]

  # auto-fit auto-fill syntax 判定 [pulsar only]
  # {
  #   'match': '\\brepeat\\s*\\(\\s*(auto-fit|auto-fill)\\s*,'
  #   'captures':
  #     '1': { 'name': 'keyword.other.grid.repeat.css' }
  # }

長い１行の後半がsyntax判定されずハイライトが途切れる対策

pulsar-master内のlanguage系のpackageのgrammar内のファイルをコピーし名前を変えて独自パッケージのgrammarへ保存

pulsar-master/packages/language-css/grammar/css.cson

コピーして以下を1行を追加。おそらくAtomデフォルト値は100

grammar/language-css.cson

'maxTokensPerLine': 300

grammar/language-html.cson

'maxTokensPerLine': 300

未対策事項

counter-increment,counter-resetなどの可変値でカンマで囲われない文字列。syntax--property-value になる

ラベル