Rendering an escaped string with lit element?

Question

This demo first highlights html contained inside the fs-highlight element and assigns the result to the _code property.

The render method then renders the template with the _code highlighted html inserted into the code element like this:

  render() {
    if (this.language) {
      return html`
    <h1>Hello</h1>
    <pre><code class="language-${this.language}">${this._code}</code></pre>
    `;
    }
    return html`
    <h1>Hello</h1>
    <pre><code>${this._code}</code></pre>
    `;
  }

And I was expected to see <test></test>. However it renders as:

<span class="hljs-section">&lt;test&gt;</span><span class="hljs-section">&lt;/test&gt;</span>

And this is because the result has quotes around it like this (Looking at it in developer tooling):

"&lt;span class="hljs-section"&gt;&amp;lt;test&amp;gt;&lt;/span&gt;&lt;span class="hljs-section"&gt;&amp;lt;/test&amp;gt;&lt;/span&gt;"

How do we get it to render so that the browser converts the highlight string to html?

Ole · Accepted Answer · 2024-04-18 17:18:00Z

1

You can use the unsafeHTML directive which renders a string as HTML:

import {unsafeHTML} from 'lit/directives/unsafe-html.js';
...
<code>${unsafeHTML(this._code)}</code>

Or you can use the browser's native innerHTML property:

<code .innerHTML="${this._code}"></code>

edited Apr 18, 2024 at 17:18

Ole

48.2k72 gold badges247 silver badges463 bronze badges

answered Apr 18, 2024 at 17:11

Invulner

1,8351 gold badge6 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rendering an escaped string with lit element?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related