Pattern library

Code blocks

These are just hard-coded as references for now.
View full screen

Details

Source (Nunjucks)

<pre
class="language-css"
>
<code class="language-css"><span class="token selector">p</span> <span class="token punctuation">{</span><br> <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span><br> <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span><br> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span><br> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>

<pre
class="language-html"
>
<code class="language-html"><span class="highlight-line"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token name">doctype</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span></span><br><mark class="highlight-line highlight-line-active"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Mary's Maple Bar Fast-Baking Recipe<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span></mark><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line"></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></span></code></pre>

<pre
class="language-js"
>
<code class="language-js"><span class="token comment">// Feature detection</span><br><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">'serviceWorker'</span> <span class="token keyword">in</span> navigator<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Register a service worker</span><br> navigator<span class="token punctuation">.</span>serviceWorker<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><br> <span class="token comment">// A service worker JS file is separate</span><br> <span class="token string">'service-worker.js'</span><br> <span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token comment">// PaymentManager requires the service worker to be active.</span><br> <span class="token comment">// One simple method to activate a service worker is through</span><br> <span class="token comment">// a `ready` promise.</span><br> <span class="token keyword">const</span> registration <span class="token operator">=</span> <span class="token keyword">await</span> navigator<span class="token punctuation">.</span>serviceWorker<span class="token punctuation">.</span>ready<span class="token punctuation">;</span><br></code></pre>

Output

<pre
class="language-css"
>
<code class="language-css"><span class="token selector">p</span> <span class="token punctuation">{</span><br> <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span><br> <span class="token property">height</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span><br> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span><br> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span><br><span class="token punctuation">}</span></code></pre>

<pre
class="language-html"
>
<code class="language-html"><span class="highlight-line"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token name">doctype</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span></span><br><mark class="highlight-line highlight-line-active"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Mary's Maple Bar Fast-Baking Recipe<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span></mark><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line"></span><br><span class="highlight-line"> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span></span><br><span class="highlight-line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></span></code></pre>

<pre
class="language-js"
>
<code class="language-js"><span class="token comment">// Feature detection</span><br><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">'serviceWorker'</span> <span class="token keyword">in</span> navigator<span class="token punctuation">)</span> <span class="token punctuation">{</span><br> <span class="token comment">// Register a service worker</span><br> navigator<span class="token punctuation">.</span>serviceWorker<span class="token punctuation">.</span><span class="token function">register</span><span class="token punctuation">(</span><br> <span class="token comment">// A service worker JS file is separate</span><br> <span class="token string">'service-worker.js'</span><br> <span class="token punctuation">)</span><span class="token punctuation">;</span><br> <span class="token comment">// PaymentManager requires the service worker to be active.</span><br> <span class="token comment">// One simple method to activate a service worker is through</span><br> <span class="token comment">// a `ready` promise.</span><br> <span class="token keyword">const</span> registration <span class="token operator">=</span> <span class="token keyword">await</span> navigator<span class="token punctuation">.</span>serviceWorker<span class="token punctuation">.</span>ready<span class="token punctuation">;</span><br></code></pre>