|SOLVED] Bug with theme-specific coloration?

#1

Hi,

Sorry if I post in the wrong forum, I didn’t find any “bug” of “fix” one though…

So, I am currently making a new programming language (mostly for my own usage) and wanted to developp a new Atom syntax highlighting for it. In front of the complexity and time needed to make a full syntax package, I decided to simply fork the language-javascript package from Atom’s Github repository and just edit it.

I replaced all “js” by “sn”, “JavaScript” by “SilverNight”, and so on in every single file until there is no “js” or “javascript” remaining anywhere. Then, I opened a terminal and typed apm link ./language-silvernight to link my edited package.

Now I can use the “SilverNight” syntax highlighting in the editor, but there is a problem : colors are exactly the same for any code I typed, excepted for operators and the ‘&’ symbol, which are usually colored in turquoise. I tried with both the current version of the JavaScript package used in my Atom’s version (the latest Atom version) as well as the latest version of the package from its own repository. The result is exactly the same.

Here is the difference between the JavaScript and SilverNight (the one I’m making) packages :

JavaScript package
My own package

If you want to check it, the source code is here (zip file).

Thanks by advance for your answers! :slight_smile:

#2

I would prefer that you provide us with a link to a git repository with the code. It requires a lot less work from people reviewing your code than a zip file that we have to download, extract, and open in a text editor, then delete when we’re done.

I can also tell you that it’s not so difficult to make a new language package. It’s much less difficult than figuring out what you did wrong when editing the 2005-line JavaScript grammar. Here’s a language package for a simple declarative language. That probably took me ten minutes once the poster gave me all the rules they wanted.

#3

I’ve thought about a Git repository but the problem is that this package is not ready at all to be published and it’s about a language currently under design, so it doesn’t really make sense to create a repository on my account for that… But I see what you mean, I’ll try to upload this on a code platform soon.

Yes but the syntax highlighting I want is very very near to the one provided by the JavaScript package : there’s just to add some keywords and that’s all. So rewriting a full package would be totally useless and a large loss of time, especially considering there’s many thing to highlight.
To give you an idea, this language is, if I simplify a lot, kind of a “fork of JavaScript and TypeScript combined” plus some features from C++, CoffeeScript etc. So the syntax is very similar to JavaScript, that’s why I want just to edit the original package too.

Also, I really want to know why some characters does not look the same between the original package and mine, though I didn’t changed anything - excepted, of course, the package’s name, file extensions, and the language’s name as well as <property>.js to <property>.sn (I’ve also tried by keeping original property names, problem stays the same).

#4

It makes sense to create a repository if you’re going to share your code with people. You have to convince us that it’s worthwhile spending time to help you, and one of the things you can do to make it very easy to help you is have a repo on GitHub.

Also, I really want to know why some characters does not look the same between the original package and mine

Take a look in the dev tools (View -> Developer -> Toggle developer tools) and search for the DOM representation of your code. Whether or not the classes have been applied will tell us what the solution is.

#5

As you can see on this screenshot classes seem to have been applied.
I’ve also uploaded the code to a GitHub repository.

EDIT : Also, I forgot to precise that any turquoise symbol was turned to white, that’s the only problem of the package but that applies to all these symbols, including & like I said before but also all operators like += || etc.

EDIT 2 : I just watched classes for the turquoise symbols, they have exactly the same HTML code (including classes) in JavaScript and in SilverNight.

#6

I make a new post here for the answer:

While inspecting the classes gave to the operators in JavaScript and in SilverNight, I just realized I could just check the style that is applied to the elements. Then I saw the styles applied to each of them were different, so I made a few researches and then found the problem.

In the index.less file of the One Dark theme I use, there is this block near to the beginning of the file :

.syntax--source.syntax--js .syntax--keyword.syntax--operator {
  color: #56b6c2;
}

So the operator is specifically highlighted when JavaScript source code is detected. It’s language-specific.
Now I wonder if it is possible to modify a class’ colors from my package? I’d like to have the same color, so is there a way to programmatically edit the colors or include a LESS or CSS stylesheet? I can’t find anything on the web…

Thank you in advance :slight_smile:

#7

.less or .css file included under the styles/ folder in your package will be loaded alongside your code and included in Atom’s overall stylesheet. Here’s the documentation.

#8

Ok thanks :slight_smile: