Change color of text by keyword?

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!

Certainly. Add this to your 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) ->

  editor.onDidStopChanging ->

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


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

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.

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?

Can you please say how can I change color of all imports? I have this file:

import React from 'react';
import styled from 'styled-components';
import propTypes, {
} from 'prop-types';

I want React, styled, propTypes, object, string to be highlighted. Can you please provide file for this?

It should be the same as the code I posted above, but with a different regular expression. Have you tried that?

I’m not sure how can I deal with import keyword in the regular expression.
For example, editor.scan /import .* from/ will match the whole import React from string, but I need only to highlight React word. How can I do this?

Hmm, maybe not. I would expect a lookbehind to work, like so, but when I plug that into Atom all I get is an “invalid group” error which suggests that the regex engine Atom uses doesn’t support that. You’d have to write a language package with injections to do it, like this one.

So this is actually a very interesting problem.

  1. Atom does support lookbehind when scanning the buffer. It uses PCRE regex in the underlying C++ superstring library. E.g., try the following in your init.js
atom.commands.add('atom-text-editor', {
  'foo': (event) => {
    const editor = atom.workspace.getActiveTextEditor()

Running it in the init script itself guarantees matches, and you will notice they are all 0 width, because the string was interpreted as a regex.

  1. Electron / NodeJS / V8 do not support lookbehind in regex (yet; I’ve seen this coming to V8 soon / recently). So a regex literal will fail like you found if it contains lookbehind.

  2. You still can’t pass the lookbehind string to editor.scan because it uses regex specific properties (specifically at least lastIndex). So if you want lookbehind, you’ll have to scan it and process the results manually

  3. I don’t think this problem requires lookbehind, but I’ve been using the superstring library recently and was surprised to find it works (I only found out strings will be intepreted as regex just now).

1 Like