<span class="hljs-keyword">let</span> foo = <span class="hljs-literal">true</span>;
<span class="hljs-string">`hello <span class="hljs-subst">${foo ? <span class="hljs-string">`Mr <span class="hljs-subst">${name}</span>`</span> : <span class="hljs-string">&#x27;there&#x27;</span>}</span>`</span>;
foo = <span class="hljs-literal">false</span>;

html`<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;foo&quot;</span>&gt;</span>Hello world<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>`</span>;

html`<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;foo&quot;</span>&gt;</span>Hello times </span><span class="hljs-subst">${<span class="hljs-number">10</span>}</span><span class="language-xml"> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;bar&quot;</span>&gt;</span>world<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>`</span>;

html`<span class="language-xml">
  <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;list&quot;</span>&gt;</span>
    </span><span class="hljs-subst">${repeat([<span class="hljs-string">&#x27;a&#x27;</span>, <span class="hljs-string">&#x27;b&#x27;</span>, <span class="hljs-string">&#x27;c&#x27;</span>], (v) =&gt; {
      <span class="hljs-keyword">return</span> html`<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;item&quot;</span>&gt;</span></span><span class="hljs-subst">${v}</span><span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>`</span>;
    }}</span><span class="language-xml">
  <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
`</span>;

css`<span class="language-css">
  <span class="hljs-selector-tag">body</span> {
    <span class="hljs-attribute">color</span>: red;
  }
`</span>;

gql`<span class="language-graphql"><span class="hljs-keyword">query</span> <span class="hljs-punctuation">{</span> viewer <span class="hljs-punctuation">{</span> id <span class="hljs-punctuation">}</span> <span class="hljs-punctuation">}</span>`</span>;

gql`<span class="language-graphql">
  <span class="hljs-keyword">type</span> Project <span class="hljs-punctuation">{</span>
    <span class="hljs-symbol">name</span><span class="hljs-punctuation">:</span> String
    <span class="hljs-symbol">tagline</span><span class="hljs-punctuation">:</span> String
    <span class="hljs-symbol">contributors</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span>User<span class="hljs-punctuation">]</span>
  <span class="hljs-punctuation">}</span>
`</span>;

<span class="hljs-comment">// Ensure that we&#x27;re back in TypeScript mode.</span>
<span class="hljs-keyword">var</span> foo = <span class="hljs-number">10</span>;