# ES6 template syntax-highlighting in Atom



![ES6 template syntax highlighting](images/es6_tagged_template_syntax_highlighting-6-21-2017.png)
Template strings don't normally get syntax highlighting, but Atom's language-babel plugin got us covered.



## Initial setup

1. install [Atom](https://atom.io/) editor
2. install [language-babel](https://atom.io/packages/language-babel) plugin

## Add grammar extensions

- Navigate to _Atom > Preferences > Packages > language-babel > settings_.
- Scroll down to where it says "JavaScript Tagged Template Literal Grammar Extensions"
- The format for this is `{tag_prefix}:{grammar_scope}`. To find the **grammar_scope** of the language, navigate to _Atom > Preferences > Packages_ and then search "language css" (this is an example search). If you scroll down a bit you'll see this:

![atom screenshot](images/Screen_Shot_2017-07-24_at_6-07-21_PM.png)

With that information, we can make a template definition `/* @css */:source.css` and use it like so:

![es6 tagged template css language](images/es6-tagged-template-css-2017-07-24.png)

Thats it! Let me know in the comments if you have any questions or suggestions.

ES6 template syntax-highlighting in Atom

Pretty Print JSON in command line

Some real talk about jQuery

<h1 id="es6-template-syntax-highlighting-in-atom">
        ES6 template syntax-highlighting in Atom
      </h1>
    

<p>
      <span class="articleImage">
        <img 
      srcset="images/_built-images/es6_tagged_template_syntax_highlighting-6-21-2017/med.png 800w,images/_built-images/es6_tagged_template_syntax_highlighting-6-21-2017/large.png 1200w"
      sizes="(min-width: 800px) 800,(min-width: 1200px) 1200"
      title="ES6 template syntax highlighting"
      alt="ES6 template syntax highlighting"
     />
      </span>
    
Template strings don&#39;t normally get syntax highlighting, but Atom&#39;s language-babel plugin got us covered.</p>



      <h2 id="initial-setup">
        
        <a 
      style="
        background: none;
        text-decoration: none;
      " href="#initial-setup">
          
      <span 
      style="
        opacity: 0.4;
        font-weight: normal;
        font-size: 1.3rem;
      "
    >
        #
      </span>
          Initial setup
        </a>
      </h2>
    <ol>
<li>install <a href="https://atom.io/">Atom</a> editor</li>
<li>install <a href="https://atom.io/packages/language-babel">language-babel</a> plugin</li>
</ol>

      <h2 id="add-grammar-extensions">
        
        <a 
      style="
        background: none;
        text-decoration: none;
      " href="#add-grammar-extensions">
          
      <span 
      style="
        opacity: 0.4;
        font-weight: normal;
        font-size: 1.3rem;
      "
    >
        #
      </span>
          Add grammar extensions
        </a>
      </h2>
    <ul>
<li>Navigate to <em>Atom &gt; Preferences &gt; Packages &gt; language-babel &gt; settings</em>.</li>
<li>Scroll down to where it says &quot;JavaScript Tagged Template Literal Grammar Extensions&quot;</li>
<li>The format for this is <code>{tag_prefix}:{grammar_scope}</code>. To find the <strong>grammar_scope</strong> of the language, navigate to <em>Atom &gt; Preferences &gt; Packages</em> and then search &quot;language css&quot; (this is an example search). If you scroll down a bit you&#39;ll see this:</li>
</ul>
<p>
      <span class="articleImage">
        <img 
      srcset="images/_built-images/Screen_Shot_2017-07-24_at_6-07-21_PM/med.png 800w,images/_built-images/Screen_Shot_2017-07-24_at_6-07-21_PM/large.png 1200w"
      sizes="(min-width: 800px) 800,(min-width: 1200px) 1200"
      title="atom screenshot"
      alt="atom screenshot"
     />
      </span>
    </p>
<p>With that information, we can make a template definition <code>/* @css */:source.css</code> and use it like so:</p>
<p>
      <span class="articleImage">
        <img 
      srcset="images/_built-images/es6-tagged-template-css-2017-07-24/med.png 800w,images/_built-images/es6-tagged-template-css-2017-07-24/large.png 1200w"
      sizes="(min-width: 800px) 800,(min-width: 1200px) 1200"
      title="es6 tagged template css language"
      alt="es6 tagged template css language"
     />
      </span>
    </p>
<p>Thats it! Let me know in the comments if you have any questions or suggestions.</p>

ES6 template syntax-highlighting in Atom

# Initial setup

# Add grammar extensions

More Articles

Subscribe to the newsletter