Selectors for markdown syntax


#1

I’d like to adjust only the markdown syntax color trough the styles.less custom file.

Where can I find a cheatsheet of selectors or similar reference for markdown?


#2

There’s no cheat sheet, but you can always look at the code for the package (you haven’t specified whether you’re using language-gfm or language-markdown). To specify the language, use atom-text-editor.source.gfm or atom-text-editor.text.md, respectively for each of those packages.


#3

I see language-gfm in the Package list.

Then I should look here: https://github.com/atom/language-gfm/blob/master/grammars/gfm.cson?

How does all that translate to CSS selectors?


#4

Each name entry translates to CSS selectors in Atom’s DOM that get applied to whatever text is caught by match. So if you want to style all punctuation tokens in a Markdown editor, you would use something like this:

atom-text-editor.source.gfm {
  .punctuation {
    color: yellow;
  }
}

You can also just use .gfm.punctuation if you want to be terse about it, but I prefer my way for readability and organization.


#5

What lines from that file led to realize its .punctuation that you need to use?

But I seem to have even more issues: I’m not getting any change with

atom-text-editor.source.gfm {
  background-color: hsl(180, 24%, 12%);
}

but it is working if I uncomment the example:

atom-text-editor {
 background-color: hsl(180, 24%, 12%);
}
.gfm.punctuation {
 color: yellow;
}

also isn’t working.

This is working;

atom-text-editor .cursor {
  border-color: red;
}

but this isn’t:

atom-text-editor {
  .punctuation {
    color: yellow;
  }
}

#6

My bad. It’s been a while since I’ve done anything with CSS and grammars, and I blanked on an important couple of points. I have gone back and refreshed my memory and here’s the correct answer. I should have checked my memory before posting.

atom-text-editor[data-grammar="source gfm"] {
  .syntax--punctuation {
    color: yellow;
  }
}

#7

Thank you for your help!

Your example is working, I was able to apply it to another source as well.

I’m still trying to figure out the selectors though.

.syntax--bold {
    color: blue;
  }

is working, but:

  .syntax--heading {
    color: blue;
  }

isn’t.

I tried some additions and various combinations but can’t figure out how headers should be selected, collectively, or individual levels.

Also, how do I select “bold and italic”?

There doesn’t seem to be anything inside that package that links the grammar with CSS. I was hoping to find the file where it comes together so I can figure out the selectors on my own, or maybe a tutorial you can point me to? Just trying to be efficient :wink:


#8

All the name and content name fields give the scopes. You can also use Editor: log cursor scope in command palette to see a scope directly.

For CSS, just prepend everything with syntax--like in DamnedScholar’s example.


#9

I was already trying all those combinations and neither worked. I was trying .syntax--heading and .syntax--heading-2 and others too.

The Inspector from Dev tools helped. It showed my selectors got overriden by

.syntax--gfm .syntax--markup.syntax--heading

so it’s not enough just to prepend syntax--.

Because I use atom-text-editor[data-grammar="source gfm"] I got enough specificity to override with two classes inside it:

.syntax--markup.syntax--heading.

This takes care of the headings (.syntax--markup.syntax--heading-2 etc to override specific levels).

There doesn’t seem to be a special case for bold italic, it gets bold or italic class depending on which code is the outermost. But I do see the “bold italic” case in grammar, maybe some wires got crossed somewhere?


#10

That’s just a name, like anything else. It’s up to the theme to actually apply bold / italic.

Here’s an example of what I use, (I don’t think you’ll run into these scopes though)

@first: #FF9420;	/* Main Primary color */
@second: #FF7F20;	/* Main Secondary color (1) */
@third: #FF6320;	/* Main Secondary color (2) */
@fourth: #FF3F20;	/* Main Complement color */

atom-text-editor .syntax--variable.syntax--parameter {
  &.syntax--optional {
    color: hsl(355, 65%, 65%);
  }

  &.syntax--hashtag {
    color: hsl(29, 54%, 61%);
    &.syntax--1 {
      color: @first;
    }
    &.syntax--2 {
      color: @second;
    }
    &.syntax--3 {
      color: @third;
    }
  }
}

There are also more examples of the syntax in existing themes


#11

Thank you! It makes it shorter using Less.

And thank you for the link, that is what I was trying to find in gfm package code, an example of selectors. Now I have to keep myself occupied for a while :smile: