Highlighting is controlled by language packages, which tell Atom how to look through a document and identify individual parts of code. Once the code is processed, Atom renders it as an HTML page with CSS classes determined by the language package. At that point, syntax themes can style text however they like.
The scope of the project will depend on what you want to modify. If you want a distinction between different types of HTML tag, you may need to create your own fork of
I actually found Atom when I was doing a project where I wanted to write a new syntax highlighter for a little (but hard to read) language. I had been using Notepad++ for many years, but I found it too limited in its ability to style text, so I looked for something else and found Atom. Now that I’m over the learning curve for the language package system, there’s so much more flexibility in terms of how you can present code. So this project in Atom will take more effort than it would in N++, but most of the work is already done and the effort it will require from you is mostly in understanding the system.
Essentially, you would want to:
- Find a theme you like and locate the GitHub repos for the language packages you want to work with.
- For each language package, clone the repo into a folder and run
apm install and
apm link to set it up.
- In the language packages, make modifications to the CSON files under
grammars/ in order to single out the words you want. This requires a lot of understanding of how the grammar works, but you just need to make small changes.
- You can clone the theme if you want, but it would be simpler to just
@import "syntax-variables.less" in your
styles.less and add style rules there. The
atom-workspace element always has classes that identify the active themes, so it’s easy to namespace your style modifications to belong to a specific theme.