Frameworkless JavaScript: Template Literals with HTML Syntax Highlighting
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!
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.
