Styling a specific tag - i.e. "table" tag in AtomEditor?


#1

Hi friends,
A new member here ; firstly thanks very much for your time and support.
I really appreciate it.

Trying to make it work for hours with no result.

CAN I style a specific tag in HTML?
(For example, can I style only the HTML “table” element tags with white color?)

I am sure that there are some fellow members who are able to do this ; I would really appreciate any help. Thanks a lot.

Kind Regards,
Bedros


#2

Here’s a good CSS selectors tutorial.

In styling a table white, you probably don’t want to style the table itself. Instead, you probably want to style the table data elements (<td>). To do so, you would add this to your CSS sheet:

td {
  background-color: white;
}

#3

Thanks for your reply, friend.
It seems I was not able to specify my problem well, please forgive me for that.
I also just edited the name of the thread.

It was about the Atom Editor.
I was just trying to give a different color to a specific tag, i.e. HTML “table” tag.

Any Ideas?


#4

(in other words, this is just to see HTML “table” tags better in a very long code)
For example, I tried the code below with no success…:

atom-text-editor::shadow
{
.syntax–entity.syntax–name.syntax–html.syntax–tag.attribute–name.table {
background-color: #fff;
}
}


#5

Sounds to me as if you wish to customize the grammar (language syntax colouring).
Have a look at:
Modifying the .cson file of a core package (hyperlink)

Note - the “shadow” DOM styles were removed:
http://flight-manual.atom.io/shadow-dom/sections/removing-shadow-dom-styles/


#6

Yes friend, exactly.

Thanks very much for your message.
Examining it right now.

(By the way, it’s really hard to believe that such a wonderful editor still do not have this kind of option, to be able to style different code elements with different colors (for example Hyperlinks, images, tables ; etc. etc.))


#7

It does. Check out the language-hyperlink package. However, I’ve been toying with a similar thing and I can’t get it to work right.

'scopeName': 'text.html.custom'
'injectionSelector': 'text.html'
'name': 'Custom HTML'
'patterns': [
  {
    'match': 'table'
    'name': 'special-white'
  }
]

When I change table to a word that appears on my open HTML page as unhighlighted or as a string or comment, I can make it appear white. However, when I try to enter a tag name, or class, the syntax--special-white class doesn’t get applied at all.

The relevant portion of my styles.less:

.syntax--special-white {
    color: white !important;
}

I’m using this init.coffee function to load the grammar into Atom:

atom.commands.add 'atom-text-editor', 'custom:load-active-editor-as-grammar', ->
    editor = atom.workspace.getActiveTextEditor()
    atom.grammars.loadGrammarSync(editor.getPath())

#8

Thanks very much friend once again for your patience and support :slight_smile:
Examining it right now.
Kind Regards,
Bedros