JSFiddle - React, Tailwind, and code Playground

by Serhii Matrunchyk

CSS

.hl {
  background: #f0b500;
  color: #ffffff;
  padding: 0 3px;
}

.hl:active, .hl:focus {
  outline: none;
}

.hl:empty {
  display: none;
}

JavaScript

function hl(strings, ...values) {
   let str = '';
   strings.forEach((string, i) => {
       str += `${string} <span contenteditable class='hl'>${values[i] || ''}</span>`;
   });
   return str;
}

const name = 'Snickers';
const age = '100';
document.body.innerHTML = hl`My dog's name is ${name} and he is ${age} years old`;