How to use escape-html - 10 common examples

const header = css\`
                  color: $\{colors.white};

                  [data-theme=dark] & {
                    color: $\{colors.black}
                  }

                  @media (max-width: 320px) {
                    font-size: 2rem;
                  }
                \`;

                export default function Header({ className }) {
                  return (
                    ${escapeHtml(`<div>
                      <h1>
                    </h1></div>`)}
                  );
                }`)}
            /&gt;
          
          <div>
            </div>

function saveKml(segments, name, points) {
    const kml = [];

    name = name || 'Track';
    name = escapeHtml(name);
    name = utf8.encode(name);

    kml.push('');
    kml.push('');
    kml.push('\t');
    kml.push(`\t\t${name}`);

    const normalizedSegments = normalizeLines(segments);
    for (let [i, segment] of normalizedSegments.entries()) {
        kml.push('\t\t');
        kml.push(`\t\t\tLine ${(i + 1)}`);
        kml.push('\t\t\t');
        kml.push('\t\t\t\t1');
        kml.push('\t\t\t\t');

        for (let point of segment) {

dangerouslyUnescapedHtmlFormat(item) {
        return (
          `${escapeHtml(item.name)}<br>` +
          `<span class="note">${escapeHtml(item.description)}</span>`
        );
      },
      queryParam: 'q',

        (c, i) =&gt; (c === '\n' ? '<br>' : escape(c))
      ).join('');

tooltipMessage.push('<strong>History:</strong>', history.map(function(item) {
        return `${escape(item.title)} (${item.duration})`
      }).join('<br>'))
    }

highlight: (code, lang) => {
        const grammar = lang === 'js' ? languages.jsx : languages[lang];
        return grammar ? highlight(code, grammar) : escape(code);
      },
    });

escape(str) {
    return escapeHtml(str);
  },

all.forEach(({ message }) => {
      list += `<br>${escape(message)}`;
    });
    none.forEach(({ message }) =&gt; {

render () {
    const container = document.createElement('div')
    container.style.maxWidth = '350px'
    container.style.minHeight = '200px'
    container.style.outline = '1px solid black'
    container.style.display = 'flex'

    if (this.selectedgroup) {
      container.style.flexDirection = 'column'
      const selectedGroup = document.createElement('div')
      new Group(selectedGroup, this.selectedgroup).render()
      const changeGroupButton = document.createElement('button')
      changeGroupButton.textContent = escape('Change group')
      changeGroupButton.addEventListener('click', _event => {
        this.selectedgroup = null
        this.render()
      })
      container.appendChild(selectedGroup)
      container.appendChild(changeGroupButton)
    } else {
      this.findAddressBook(this.typeIndex)
        .then(({ book }) => {
          const chooseExistingGroupButton = document.createElement('button')
          chooseExistingGroupButton.textContent = escape(
            'Pick an existing group'
          )
          chooseExistingGroupButton.style.margin = 'auto'
          chooseExistingGroupButton.addEventListener('click', _event => {
            new GroupPicker(container, book, this.onSelectGroup).render()

addFile(filename, uploadIndex) {
    const div = document.createElement("div");
    div.className = `dff-file dff-file-id-${uploadIndex}`;

    const nameSpan = document.createElement("span");
    nameSpan.innerHTML = escape(filename);

    div.appendChild(nameSpan);
    this.container.appendChild(div);

    this.input.required = false;
    return div;
  }