Syntax highlighting for special chars × ÷ ≠ or π


#1

I would like to modify my theme so that it recognize special chars such as × ÷ ≠ or π. I do not know what they are call, but it seems my language recognize them.

Specifically, I would like × ÷ ≠ to be recognized as .syntax–operator

and π as .syntax–numeric.

I would I go about doing this?


#2

The theme has nothing to do with that. Classes are determined by the active language package. It’s possible for you to hack that with an addition to your init.coffee file, though.

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

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

  editor.scan /(\×|\÷|\≠)/, (result) ->
    options = {
      type: "text"
      class: "syntax--operator"
    }

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

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

  editor.onDidStopChanging ->
    customHighlights(editor)

#3

Thank you for the help. This is exactly what I was looking for.

I added the code into my init.coffee, which is quite empty.

However, it appears to do nothing.


#4

After you restart Atom, you should be able to open the inspector View -> Developer -> Toggle developer tools and search in the DOM for something distinctive like π. If you applied the code correctly, you should see a span tag around the character like in this screenshot.

If that’s the case, then all you need to do is add CSS rules to style.less to tell Atom what color to make them.