DEV Community

Vesa Piittinen
Vesa Piittinen

Posted on


How to display/output as template string?

I'm trying to make prettier HTML for my tests so that they are easy to read. This means I want to write them as template strings.

The problem is that tools do not output template strings, instead giving me diffs like this:

"'\\n<ul class=\"list\">\\n    <li class=\"list-item\">\\n        <input\\n            type=\"radio\"\\n            checked=\"\"\\n            name=\"item\"\\n            value=\"1\"\\n        />\\n    </li>\\n</ul>\\n'"
Enter fullscreen mode Exit fullscreen mode

Which I would like to see as:

<ul class="list">
    <li class="list-item">
Enter fullscreen mode Exit fullscreen mode

I could write a custom solution but is there an existing tool for this?

Oldest comments (2)

merri profile image
Vesa Piittinen • Edited

The poor man's solution... open Codepen and throw these codes:

<textarea rows="40" cols="120" style="font-family:monospace"></textarea>


document.getElementsByTagName('textarea')[0].textContent = eval(
    // copy-and-paste the above type of string here

Could automate more. Also noticed that apparently my setup for tap-nirvana isn't probably working right as I'm getting deepEqual comparisons in a very unfriendly syntax and the whole purpose for tap-nirvana is to give me pretty colors and diffs.

merri profile image
Vesa Piittinen

Replaced tap-nirvana with tap-difflet and no more issues with double escaped strings and diffs are easier to read :)

11 Tips That Make You a Better Typescript Programmer


1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields


Read the whole post now!