Adjust color of brackets used in shortcodes


#1

Hello, gang!

1-day Atom user and LOVE it! (I think I’ve instantly replace TextMate - which I’ve used for years).

I’m interested in changing the color of my bracket pairs [ and ] … Heck… while we’re at it… maybe these pairs < and >.

I’ve sifted through many many topics, but haven’t found where to adjust this.

I would really appreciate your help.

LOVE the app!

Paul


#2

Hi Paul. For what language (file type) are you trying to change it?

You can override colors in your Stylesheet (Menu: Atom > Open Your Stylesheet). To know which selector to use, you can open DevTools (Menu: View > Developer > Toggle Developer Tools) and “Inspect Element” to see what class names are used.

For example if you wanna change < and > in a HTML file, you can paste this into your Stylesheet:

atom-text-editor .punctuation.definition.tag.html, // deprecated
atom-text-editor::shadow .punctuation.definition.tag.html {
    color: red;
}

And to change the [ and ] brackets in a JSON file, it would be this:

atom-text-editor .punctuation.definition.array.json, // deprecated
atom-text-editor::shadow .punctuation.definition.array.json {
    color: red;
}

You can’t really change it globally, because they have different meanings for each language.


#3

Thank you, @simurai

When I’m working on an HTML, CSS or PHP file I want my brackets to stand out in my coding window. Specifically my [ and ], but also the < and >.

How do you know < is called definition and in JSON [ is an array?

Are these brackets [ and ] and array in HTML or PHP?

That knowledge will help me :smile:

I’m not seeing a change in my HTML coding file when I added the code from above to make my “tags” red.

Hmmm…


#4

If you open DevTools and “Inspect Element” on your HTML file, then you see what class names are used to color the code. In the > example below, it’s class="punctuation definition tag html". So you can use that as a selector. You just have to add atom-text-editor and atom-text-editor::shadow in front to “reach into” the editor.

Hmm… Not sure why pasting

atom-text-editor .punctuation.definition.tag.html, // deprecated
atom-text-editor::shadow .punctuation.definition.tag.html {
    color: red;
}

into your styles.less doesn’t work for you.


#5

@simurai thank you for sticking with me. The styling worked. (Don’t know what I wasn’t doing - but works great). THANK YOU.

Thank you for the Inspect Element detailed information… I use that all the time in my web browsers to reverse-engineer websites when I see something cool.

In my example, however… the [ brackets ] aren’t showing up as an “element” rather just a bit of text.

Do I need to somehow first “register” for HTML to recognize [ and ] as code vs. text characters.?

What do you think?


#6

I see. Yeah, “[ ]” inside an HTML element is rendered just as normal text. What kind of script do you use to turn MM_Member_Data name="firstName"] into the real name? Is it some kind of template language? You could check if there is a package for it: https://atom.io/packages That might recognize it and will add elements around the “[ ]”.


#7

My use of [ ] in my HTML is where shortcodes from Wordpress appear. A few different plug-ins use their own sets of shortcode. I just want my shortcodes to pop-out more when I’m editing.

I wonder if there is a way to allow any random character have a color change? What if I wanted the letter B to be blue? Or the '~" tilde to be orange?

In TextMate I could do this by making declarations like below in the…

{	name = '#';
		scope = 'meta.bullet-point.pound';
		settings = {
			fontStyle = '';
			foreground = '#612E00';
			background = '#B5B500';
		};
	},

{	name = '~';
		scope = 'meta.bullet-point.tilde';
		settings = {
			fontStyle = 'bold';
			background = '#09080733';
		};

Was easy to name the element ‘#’ and then the scope ‘meta.bullet-point.pound’

Would possibly be “left square bracket” and “right square bracket”

This feels so do-able… If I just knew the language…

This is a line from the “how to create your own theme” in the Atom documentation

If you find yourself wishing some piece of code or UI element were different, just open up Atom in dev mode and use the element inspector to see if there is a class in place that you can target. As a general rule, you can customize pretty much everything.

I may need to know how to create a class for square brackets?

That is what I’m after :smile:


#8

I tried the WordPress API package: https://atom.io/packages/wordpress-api but it doesn’t color shortcodes in HTML files.

I may need to know how to create a class for square brackets?

Yes, right. I don’t know enough how the language grammars work, but here what I would try.

  1. Since the file type is still HTML, I would clone the HTML language package: https://github.com/atom/language-html
  2. Rename it to something custom… like language-shortcode or so.
  3. See how they’ve done the < tags >, I think it’s this part: https://github.com/atom/language-html/blob/master/grammars/html.cson#L14-L37 and try to add the same for [shortcodes].
  4. Then locally install the package: cd to the cloned/renamed directory and apm link.
  5. Then after reloading Atom it should appear under your installed packages.
  6. Now when you have an HTML file with shortcodes in it, it will still think it’s html, but you can change the file type to your custom one. In the status bar, click the “HTML” and pick your custom named language.
  7. And now when you inspect the [ ] of a shortcode, you should see that it added extra elements with the class names you defined.

Again, I haven’t tried it myself… just my guess. :wink: