Change color of text by keyword?


#1

When i’m programming, I have variables that do the same thing in every program, for example: in python I use a class named Debug that I use to toggle what data is printed to the screen. I want to change the text color of the word “DEBUG”, Is that possible? Thanks!


#2

Certainly. Add this to your init.coffee file:

customHighlights = (editor) ->
  editor.scan /DEBUG/, (result) ->
    options = {
      type: "text"
      class: "syntax--debug"
    }

    marker = editor.markBufferRange result.range
    decoration = editor.decorateMarker marker, options

atom.workspace.observeTextEditors (editor) ->
  customHighlights(editor)

  editor.onDidStopChanging ->
    customHighlights(editor)

Then add a rule to your styles.less targeting .syntax--debug.


#3

That worked, kinda… It only changed a ‘debug’ in a comment.


#4

Without looking at the DOM, this is most likely an issue of priority, and should be able to be resolved using the !important keyword as mentioned on that page. You can find out for yourself by looking at the dev tools (View -> Developer -> Toggle developer tools), selecting the Elements tab, and searching (ctrl-f) for “debug” until you find a class declaration. Then you can see which CSS rules apply to it.


#5

Did you make a change as @DamnedScholar suggested:

He did not spell it out as he did with the init code.
What did you code for the styles file?