<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">'there'</span>}</span>`</span>; foo = <span class="hljs-literal">false</span>; html`<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"foo"</span>></span>Hello world<span class="hljs-tag"></<span class="hljs-name">div</span>></span>`</span>; html`<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"foo"</span>></span>Hello times </span><span class="hljs-subst">${<span class="hljs-number">10</span>}</span><span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"bar"</span>></span>world<span class="hljs-tag"></<span class="hljs-name">span</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>`</span>; html`<span class="language-xml"> <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"list"</span>></span> </span><span class="hljs-subst">${repeat([<span class="hljs-string">'a'</span>, <span class="hljs-string">'b'</span>, <span class="hljs-string">'c'</span>], (v) => { <span class="hljs-keyword">return</span> html`<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span>></span></span><span class="hljs-subst">${v}</span><span class="language-xml"><span class="hljs-tag"></<span class="hljs-name">li</span>></span>`</span>; }}</span><span class="language-xml"> <span class="hljs-tag"></<span class="hljs-name">ul</span>></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're back in TypeScript mode.</span> <span class="hljs-keyword">var</span> foo = <span class="hljs-number">10</span>;