Custom higlighting, colors for php, html, jQuery etc


I would like to customize the text highlighting for various languages, etc.

Single quoted strings and double quoted strings to be of a different color.
Customize colors protected words, functions and keywords in the various languages, ‘var’ in jQuery, ‘preg_replace’ in PHP,

in html.
be able to make some of them bold or italic, etc.

Essentially I want to be able to customize like Notepad++ Settings > Style Configurator


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 language-html.

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:

  1. Find a theme you like and locate the GitHub repos for the language packages you want to work with.
  2. For each language package, clone the repo into a folder and run apm install and apm link to set it up.
  3. 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.
  4. 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.


I have Windows unfortunately.

I figured it out partly:

  • Generate a new syntax package.
  • Fuck around with the colors until I get what I want, essentially.


Unfortunately it has already crashed ha.


So do I. That won’t stop you from doing anything with Atom, unless you want to build it from source and haven’t set up the right environment yet (I’ve done that and it’s a pain the first time).