Atom Change Comment Punctuation Color (# or //)

This guide will show you how to change the comment punctuation color in Atom. This is something that is easy to do by modifying your stylesheet. Many people will do this as a personal preference for their theme in Atom.

If you have not already read the How to Change Comment Color I suggest you take a moment to do so. This article will build upon what we learned there. From the article you can see that we were able to change all of the comment code color to green.

But, what if we want to just change the # or the // of the comment color. Well there is any easy way to do that and I will show you how. First in the main menu, select File > Stylesheet....

Atom - File Stylessheet

Once the sylesheet is open, we will want to go to the end and add the code below. You can see I start with a comment line. This is super important and will prevent you from forgetting what this changes a year down the road. The important part of this code is that we are calling out the class syntax--comment and syntax--punctuation. This means that if the text being displayed is in a syntax--comment class and also has the class syntax--punctuation , then we will change the color of the syntax itself.

// Change the Syntax Punctuation Color
 atom-text-editor .syntax--punctuation.syntax--comment{

In the example, you can see we change the color to #FFFF00 also known as Yellow. In the image below you can see the final results, where the // and # (syntax punctuation) are now yellow, and the rest of the comment is green.

Atom Change Comment Punctuation Color

As you can see it was easy to change the comment punctuation color in Atom. What is your favorite customization for Atom? Leave a comment below and get the conversation started!

If you would like to suggest a new article or video to be released, please reach out via the Contact Page. I look forward to hearing your feedback and providing content that is helpful for you!

Leave a Comment