How to override Atom's native snippets?

[atom]

How to override Atom's native snippets?

[kevinsawicki]

Would you please tell me the difference between '.html' and '.text.html'?

.html matches elements with just the html CSS class, .text.html matches elements that have both the html and text CSS classes.

The snippets system uses the "best match" to determine which snippet to run and ties favor the snippets in ~/.atom/snippets.cson so you needed to have a selector as specific as the built-in one for it to be properly overridden.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

[kevinsawicki]

Does this work?

'.text.html': 
  'script':
        'prefix': 'script'
        'body': """
            <script>
                $1
            </script>
        """

[dragonwong]

That works! Thank you very much! 😁
Would you please tell me the difference between '.html' and '.text.html'?

[dragonwong]

.html matches elements with just the html CSS class, .text.html matches elements that have both the html and text CSS classes.

I know CSS selector, but I do not understand that a file has CSS classes. And I do not know how to get classes of a file?

I guess .html means the suffix of the file name, but .text means what?

[kevinsawicki]

Atom has a tokenizer that uses TextMate grammars and converts the TextMate scopes to CSS selectors when it creates the DOM elements.

So if you look at the HTML grammar, the root scope name is text.html.basic meaning that all HTML lines will have the text, html, and basic CSS classes on it.

https://github.com/atom/language-html/blob/5243fe487978fb1883245bcdc1d638ad0ee8c3b1/grammars/html.cson#L1

[dragonwong]

Thank you for your answer! 👻