Syntax Color of Filename inside String is possible?


#1

Hello guys, can anyone help,

I’m trying to adjust my syntax theme for HTML and I’d like to have all Strings in Red (that’s easy) but those which contain Filename to be Blue, like on the picture.

12

I don’t know, is it possible with Atom? Can someone advice how should the entry in base.less be done? Thanks a lot and have good one,

Bye.


#2

Unless you’re writing a language package, the best you can do is include some JavaScript that places a custom marker on text you want. The problem with what you want is that it’s not easy to tell the computer how to tell the difference between a file name and any other string with a period. One solution would be to have Atom highlight all strings that contain a valid file path in your project, because then your match possibilities would only be the files in the project itself.


#3

Thanks, great idea!

“One solution would be to have Atom highlight all strings that contain a valid file path in your project, because then your match possibilities would only be the files in the project itself.”

Any suggestion how to do it? :wink:


#4

Put this in your init.coffee to see how it works:

path = require("path")
fs = require("fs")

markFileNames = (editor, filenameMarkerLayer) ->
  dir = editor.getPath().replace(editor.getTitle(), "")

  regex = /\".*?\"/

  editor.scan(regex, (match) ->
    file = dir + match.matchText.slice(1, -1)
    fs.access(file, (err) ->
      console.log("The file: " + file)

      if (!err)
        marker = filenameMarkerLayer.markBufferRange(match.range)
        decoration = editor.decorateMarker(marker, {type: "text", class: "syntax--filename"})
      else
        console.log "This doesn't seem to be a file."
    )
  )

  console.log filenameMarkerLayer

atom.workspace.observeTextEditors (editor) ->
  filenameMarkerLayer = editor.addMarkerLayer()
  markFileNames(editor, filenameMarkerLayer)

  editor.onDidStopChanging ->
    if markerList = filenameMarkerLayer.getMarkers()
      for marker in markerList
        marker.destroy()

    markFileNames(editor, filenameMarkerLayer)

#5

Thanx a lot man, you’re way more far with Atom than me. :slight_smile: I’ll try to go through your code and absorb it’s idea to be able to follow. :slight_smile: Once again many thanx and have good one, bye.


#6

If you want to write a language package with this feature, you could take a look at my package language-matlab-plus. It styles some particular words (persistent variables) in a dynamic way, since it depends on the way you declared them in your function/script.
Just be aware of this Atom issue, it seems related to text marker and decoration.

Feel free to ask anything!

P.S.: Needless to say, I wouldn’t be able to write my package without the help of the omnipresent @DamnedScholar, his suggestions are always precious :heart:


#7

Additionally, if you want to convert CoffeeScript to JS, you can do that here or a dozen other web sites. Just make sure to use v1 instead of v2 (I actually don’t know v2 well enough to recognize if anything is invalid, because I only use CS for Atom).