DEV Community

loading...

How to display/output as template string?

Vesa Piittinen
User centric frontend specialist between "normal" programming and design. Loves perf and minimalism. Prefers HTML, CSS, Web Standards over JS, UX over DX. Hates div disease.
・1 min read

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'"

Which I would like to see as:

`
<ul class="list">
    <li class="list-item">
        <input
            type="radio"
            checked=""
            name="item"
            value="1"
        />
    </li>
</ul>
`

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

Discussion (2)

Collapse
merri profile image
Vesa Piittinen Author • 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.

Collapse
merri profile image
Vesa Piittinen Author

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