How to use the lit-html/directives/unsafe-html.js.unsafeHTML function in lit-html

renderText() {
    if (this.hasLoadedCss) {
      return html`${unsafeHTML(this.setupHTMLText(this.getText()))}`
    } else {
      return html``;
    }
  }

const codeTemplate = (code, language) =>
                html`
                  <pre class="language-markup"><code class="language-${language}" id="pl-code-fill-${language}">${unsafeHTML(
                    code
                  )}</code></pre>
                `;

const hasChildData = this.hasChildData(childRowItems, row);
              return html`
                
                  ${hasChildData
                    ? html`
                        
                          ${this.visibleChildren.includes(row.id)
                            ? unsafeHTML(MinusSVG)
                            : unsafeHTML(PlusSVG)}
                        
                      `
                    : html`
                        
                      `}
                  ${Object.keys(this.columns)
                    .filter(column => !this.columns[column].child)
                    .map(
                      column =>
                        html`
                          
                            ${this.columns[column].resolver(row)}
                          
                        `
                    )}

export const parse = (markdown?: string): TemplateResult => {
  if (!markdown) {
    return html`
      ${nothing}
    `;
  }

  return html`
    ${unsafeHTML(DOMPurify.sanitize(marked(markdown)))}
  `;
};

}
              button{
                position: absolute;
                top: 0;
                right: 0;
                text-transform: uppercase;
                border: none;
                cursor: pointer;
                background: #e0e0e0;
                outline: none;
              }
            
            <hr>
            <div id="code-wrapper">
              <button title="copy to clipboard">${ this._copyText}</button>
              <pre><code class="hljs ${ this.language }">${ unsafeHTML(codeDom.innerHTML) }</code></pre>
            </div>
            <hr>
            
        `;
    }
}

render() {
    if (this.hasLoadedCss) {
      return html`${this.wide ?
        html`${unsafeHTML(this.setupHTMLText(this.configFromServer.client_config.selectVotingAreaDesktopHTML))}` :
        html`${unsafeHTML(this.setupHTMLText(this.configFromServer.client_config.selectVotingAreaMobileHTML))}`}`;
    } else {
      return html``;
    }
  }

render() {
    const { item } = this;
    const info = item && item.volumeInfo;
    const id = item ? item.id : '';
    const title = info ? info.title : '';
    const author = info ? info.authors && info.authors.join(', ') : '';
    const thumbnail = info ? info.imageLinks.thumbnail.replace('http', 'https').replace('&edge=curl', '') : null;
    const date = info ? new Date(info.publishedDate).getFullYear() : '';
    const rating = info && info.averageRating;
    const desc = info ? unsafeHTML(info.description || info.subtitle || '<i>No descriptions.</i>') : '';

    return html`
      <a href="/detail/${id}">
        <div class="info">
          
          <div class="info-section">
            <div class="title-container">
              <h2 class="title">${title}</h2>
            </div>
            <div class="author info-item">${author} - ${date}</div>
            <div class="info-item">
              
            </div>
          </div>
        </div>
        <div class="desc">${desc}</div></a>

var element = document.createElement('div');

        katex.render(
            this.aligned ? `\\begin{aligned}${ this.math }\\end{aligned}` : this.math,
            element,
            {
                displayMode: !this.inline,
                macros: {
                    "\\boldsymbol": "\\mathbf"
                }
            }
        );

        return html`
            ${ katexCSS }
            ${ unsafeHTML(element.innerHTML) }
        `;
    }
}

<button class="fav-button">
                ${isFavorite ? favoriteIcon : favoriteBorderIcon} ${isFavorite ? 'Added to Favorites' : 'Add to Favorites'}
              </button>
            
            <div class="preview-btn-container">
              <a class="book-button" href="/viewer/${_item.id}">PREVIEW</a>
            </div>
          
        
        <div class="rating-container">
          
          <span>(${ratingsCount || 0} ${ratingsCount == 1 ? 'review' : 'reviews'})</span>
        </div>
        <div class="desc">
          <h3>Description</h3>
          ${unsafeHTML(info.description || info.subtitle || 'None')}
        </div>
        <div class="desc">
          <h3>Categories</h3>
          <ul>
            ${repeat(categories, (item) =&gt; html`
              <li>${item}</li>
            `)}
          </ul>
        </div>
        <div class="desc">
          <h3>ISBN</h3>
          <ul>
            ${repeat(identifiers, (item) =&gt; html`
              <li>${item.type}: ${item.identifier}</li>
            `)}
          </ul></div>