1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<h2>HTML template literals</h2>
<pre data-dependencies="markup"><code class="language-javascript">html`
<p>
Foo.
</p>`;</code></pre>
<h2>JS DOM</h2>
<pre data-dependencies="markup"><code class="language-javascript">div.innerHTML = `<p></p>`;
div.outerHTML = `<p></p>`;</code></pre>
<h2><a href="https://github.com/zeit/styled-jsx">styled-jsx</a> CSS template literals</h2>
<pre data-dependencies="css"><code class="language-javascript">css`a:hover { color: blue; }`;</code></pre>
<h2><a href="https://github.com/styled-components/styled-components"><code class="language-none">styled-components</code></a> CSS template literals</h2>
<pre data-dependencies="css"><code class="language-javascript">const Button = styled.button`
color: blue;
background: red;
`;</code></pre>
<h2>Markdown template literals</h2>
<pre data-dependencies="markdown"><code class="language-javascript">markdown`# My title`;</code></pre>
<h2>GraphQL template literals</h2>
<pre data-dependencies="graphql"><code class="language-javascript">gql`{ foo }`;
graphql`{ foo }`;</code></pre>
|
