# Highlight variables in Atom, Babel template strings

DevFeed: [Highlight variables in Atom, Babel template strings](<https://devfeed.tech/articles/highlight-variables-in-atom-babel-template-strings-37281.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/highlight-vars-in-atom-babel-javascript/>)

Author: Stanko

Published: 2016-05-07T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Atom](<https://devfeed.tech/topics/atom.md>), [Babel](<https://devfeed.tech/topics/babel.md>), [es6](<https://devfeed.tech/topics/es6.md>), [Snippet](<https://devfeed.tech/topics/snippet.md>), [Less](<https://devfeed.tech/topics/less.md>)

Tags: [atom](<https://devfeed.tech/tags/atom.md>), [babel](<https://devfeed.tech/tags/babel.md>), [css](<https://devfeed.tech/tags/css.md>), [es2015](<https://devfeed.tech/tags/es2015.md>), [es6](<https://devfeed.tech/tags/es6.md>), [less](<https://devfeed.tech/tags/less.md>), [snippet](<https://devfeed.tech/tags/snippet.md>), [template-strings](<https://devfeed.tech/tags/template-strings.md>), [variable](<https://devfeed.tech/tags/variable.md>)

## AI overview

A guide to fixing an Atom Babel plugin issue where variables in ES6 template strings are not highlighted. It provides an Atom style.less snippet that styles JavaScript variables and explains how to inspect Atom's element classes for additional CSS or LESS customizations.

## Source excerpt

Atom Babel plugin doesn't highlight variables in ES6 (ES2015) template strings. You'll need to add this snippet to your Atom's style.less atom-text-editor::shadow .variable.js { color: #F8F8F2; } In general, you can just inspect stuff in Atom, find out what classes element are using, and then style it via CSS (LESS). Just don't forget to add atom-text-editor::shadow before your rules. If anyone is interested, I'm using Monokai Seti theme.