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:
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!
html and highlights the syntax accordingly. So all you need to do is add
html in front of your backticks:
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
And we’re done!
Our frameworkless JS app is blazing fast and the markup for our templates show up just as you would expect.