CODEWITHSUNDEEP
code-snippetsatom-editor
emil.c
emil.c

Reputation: 2018

Atom snippet for HTML comments

I was looking through the atom documentation at writing snippets:

Using atom snippets

However, the documentation is too simple for the problem I'm facing. I want to write a snippet that will automatically create a comment that will contain a class name of the HTML element. Let's see an example:

<div class="first-class another-class">

  ...

</div><!-- first-class another-class -->

I want to have a snippet that will automatically create the comment containing "first-class another-class" when I type, for instance, "comm" after the closing tag of the div and hit TAB. Is this even possible with snippets?

Upvotes: 0

Views: 509

Answers (1)

idleberg
idleberg

Reputation: 12882

Doesn't your workflow allow you to create the comment together with the preceding tag? In that case, you could use something like this:

'.text.html':
  'Snippet Name':
    'prefix': 'comm'
    'body': """
      <div class="${1:classes}">
        ${2:<!-- your markup here -->}
      </div><!-- ${1:classes} -->
    """

Or more advanced:

'.text.html':
  'div+comment':
    'prefix': 'comm'
    'body': """
      <${1:div} ${2:class="${3:classes}"}>
        ${4:<!-- your markup here -->}
      </${1:div}>${2:<!-- ${3:classes} -->}
    """

Save this file as (e.g. comm.cson) and put it in the packages directory.

Upvotes: 2

Related Questions