Hugo Wiledal
Dec 5, 2016 · 2 min read

A few weeks ago I wrote a post on using Template Literals for common HTML rendering. An obvious problem when writing HTML in a string format rather than within an .html-file is that you lose the syntax highlighting.

Here’s a basic example:

Green is not a creative color.

This makes the usage of template literals for HTML less appealing. But if you, like me, use Atom for your code editing, the answer is right there in front of you!

Template literals have a nifty feature which enables them to be tagged. In short, a tagged template literal enables your to handle how it is parsed by defining a method that returns a string. We’re technically not going to use this feature, but we are going to exploit it!

As it turns out, Atom’s default JavaScript language package looks for template literals tagged with html and highlights the syntax accordingly. So all you need to do is add html in front of your backticks:

Mind blown.

The problem now is that html() isn’t defined, so this code actually won’t run. Of course, you could define it yourself, but I like to try to keep my code clean and my runtime as fast as possible, so my preferred method is removing the html-tagging during pre-compilation.

I add a simple replace to my gulpfile.js:

And we’re done!
Our frameworkless JS app is blazing fast and the markup for our templates show up just as you would expect.

JavaScript has never been more exciting; and it just keeps getting better.

Your Majesty Co.

A design and technology firm. Publisher of Founders and directors of #May1Reboot

Hugo Wiledal

Written by

Swedish developer of web and things at Your Majesty Amsterdam

Your Majesty Co.

A design and technology firm. Publisher of Founders and directors of #May1Reboot

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade