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

private static displayShaderTreeImpl = (ele: ShadersAppSk, parentNode: ShaderNode | null, node: ShaderNode, depth: number = 0, name: string = '/', childIndex: number = 0): TemplateResult[] => {
    let ret: TemplateResult[] = [];
    // Prepend some fixed width spaces based on the depth so we get a nested
    // directory type of layout. See https://en.wikipedia.org/wiki/Figure_space.
    const prefix = new Array(depth).fill('  ').join('');
    ret.push(html`
      <p class="childShader"> ele.childShaderClick(node)}&gt;
          <span>
            ${unsafeHTML(prefix)}
            <span class="linkish">${name}</span>
            ${(ele.rootShaderNode!.children.length &gt; 0 &amp;&amp; ele.currentNode === node) ? '*' : ''}
          </span>
          <span>
            ${ShadersAppSk.deleteButton(ele, parentNode, node, childIndex)}
            ${ShadersAppSk.editButton(ele, parentNode, node, childIndex)}
            <button title="Append a new child shader." class="addButton"> ele.appendChildShader(e, node)}&gt;
                
            </button>
          </span>
      </p>`);
    node.children.forEach((childNode, index) =&gt; {
      ret = ret.concat(ShadersAppSk.displayShaderTreeImpl(ele, node, childNode, depth + 1, node.getChildShaderUniformName(index), index));

render() {
    const secondaryVariant =
      this.variant === 'secondary' ? 'a-heading--secondary' : '';

    const template = `
      
        
      
    `;

    return html`
      ${unsafeHTML(template)}
    `;
  }
}

class="a-input-text__counter-info a-input-text__character-overflow-error"
                >
                  ${this.counterMax}
                
              `
            : ''
        }
      
      ${
        info
          ? html`
              
                ${unsafeHTML(info)}
              
            `
          : ''
      }
  `;
  }
}

}
                  <span class="item__descr"> 
                    ${itemParts[3]
                      ? html`<div style="color:#47afe8;"><span class="bold">Default:</span> ${itemParts[3]}</div>`
                      : ''
                    }
                    ${itemParts[4]
                      ? html`<div style="color:#47afe8;"><span class="bold">Allowed:</span>(${itemParts[4]})</div>`
                      : ''
                    }
                    ${itemParts[5]
                      ? html`<div style="color:#47afe8;"><span class="bold">Pattern:</span> ${itemParts[5]}</div>`
                      : ''
                    }
                    ${itemParts[6]
                      ? html`<span class="m-markdown m-markdown-small">${unsafeHTML(marked(itemParts[6]))}</span>`
                      : ''
                    }
                  </span>`
                : ''
              }
            
          `
        : html`<span class="item__value"> Must be 7 parts but found ${itemParts.length}</span>`
      }
    `;
  }

export function linkify(s: string): (part: Part)=> void {
  return unsafeHTML(s.replace(linkRe, '<a rel="noopener" href="$&amp;">$&amp;</a>'));
}

function endpointHeadTemplate(path) {
  return html`
  <div class="endpoint-head ${path.method} ${path.expanded ?">
    <div class="method ${path.method}"> ${path.method} </div> 
    <div class="path ${path.deprecated ? 'deprecated' : ''}"> 
      ${path.path} 
    </div>
    ${path.deprecated
      ? html`
        <span style="font-size:12px; text-transform:uppercase; font-weight:bold; color:var(--red); margin:2px 0 0 5px;"> 
          deprecated 
        </span>`
      : ''
    }
    <div style="min-width:60px; flex:1" class="only-large-screen"></div>
    <div class="m-markdown-small descr"> ${unsafeHTML(marked(path.summary || ''))} </div>
  </div>
  `;
}

const monthlyPrice = Math.round(plan.cost / 12);

        return html`
            <div class="plan" style="${plan.color"> this.done(plan)}
            &gt;
                <div class="plan-header">
                    <div class="plan-name">
                        ${plan.name}
                    </div>
                    <div class="plan-description">
                        ${unsafeHTML(plan.description.replace(/\*\*(.+)\*\*/g, "<strong>$1</strong>"))}
                    </div>
                    <div class="flex"></div>
                    <div class="plan-price">
                        <div class="plan-price-currency">
                            $
                        </div>
                        <div class="plan-price-dollars">
                            ${Math.floor(monthlyPrice / 100)}
                        </div>
                        <div class="plan-price-cents">
                            .${(monthlyPrice % 100).toString().padEnd(2, "0")}
                        </div>
                    </div>
                    <div class="plan-unit">
                        ${$l("per user / month")}
                    </div></div></div>

public render() {
      return html`
                ${unsafeHTML(content)}
            `;
    }
  }

<div class="observe-me ${this.renderStyle ===" id="overview">
                <div style="font-size:32px">
                  ${this.resolvedSpec.info.title}
                  ${!this.resolvedSpec.info.version ? '' : html`
                    <span style="font-size:var(--font-size-small);font-weight:bold">
                      ${this.resolvedSpec.info.version}
                    </span>`
                  }
                </div>

                ${this.resolvedSpec.info.description
                  ? html`${unsafeHTML(`<div class="m-markdown regular-font">${marked(this.resolvedSpec.info.description)}</div>`)}`
                  : ''
                }
                ${this.resolvedSpec.info.termsOfService
                  ? html`${unsafeHTML(`<div style="margin-top:8px" class="tiny-title"> Terms: </div> <span class="m-markdown regular-font">${marked(this.resolvedSpec.info.termsOfService)}</span>`)}`
                  : ''
                }
                ${this.resolvedSpec.info.contact ? this.contactInfoTemplate() : ''}
              </div>`
              }

              ${(this.allowTry === 'false' || this.allowServerSelection === 'false')
                ? ''
                : this.serverTemplate()
              } 
              ${(this.allowAuthentication === 'false' || !this.resolvedSpec.securitySchemes)
                ? ''
                : this.securitySchemeTemplate()
              }
              <div>
                ${this.resolvedSpec.tags</div>

render() {
    return html`
      
        <section class="section">
          <h1 class="title">Something bad happened!</h1>
          <div class="notification is-danger">
            ${unsafeHTML(this.message)}
          </div>
          <a href="/" class="button">
            ${translate('error.go_home')}
          </a>
        </section>
      
    `;
  }
}