diff --git a/content/patterns/coding/code-blocks.md b/content/patterns/coding/code-blocks.md
index 7cc4fee..98abc2a 100644
--- a/content/patterns/coding/code-blocks.md
+++ b/content/patterns/coding/code-blocks.md
@@ -21,32 +21,6 @@ So, this…
Note that the syntax highlighting uses a greyscale theme. **Infusion** is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed.
-## Line-numbered code blocks
-
-In addition to the basic markdown support, **Infusion** provides a mechanism to display code blocks with line numbers. This is via the `codeBlock` shortcode. Here is the code for a block of JavaScript with line numbers:
-
-{{}}
-{{<codeBlock lang="js" numbered="true">}}
-var toggle = demo.querySelector('[aria-pressed]');
-
-toggle.addEventListener('click', (e) => {
- let pressed = e.target.getAttribute('aria-pressed') === 'true';
- e.target.setAttribute('aria-pressed', !pressed);
-});
-{{</codeBlock>}}
-{{ }}
-
-The output will look like the following. Now you can refer to particular bits of the code by line number, like the arrow function on line `3`.
-
-{{}}
-var toggle = demo.querySelector('[aria-pressed]');
-
-toggle.addEventListener('click', (e) => {
- let pressed = e.target.getAttribute('aria-pressed') === 'true';
- e.target.setAttribute('aria-pressed', !pressed);
-});
-{{ }}
-
{{% note %}}
To preserve the wrapping inside code blocks, horizontal scrolling is implemented. To make sure scrolling is keyboard accessible, code blocks are focusable. An `aria-label` is provided to identify the code block to screen reader users.
{{% /note %}}
diff --git a/docs/patterns/coding/code-blocks/index.html b/docs/patterns/coding/code-blocks/index.html
index e74a38a..252bbd6 100644
--- a/docs/patterns/coding/code-blocks/index.html
+++ b/docs/patterns/coding/code-blocks/index.html
@@ -394,13 +394,11 @@
-
-
-
Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.
+ Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.
So, this…
-
+
```html
<button aria-pressed="false">toggle me</button>
```
@@ -414,34 +412,6 @@
Note that the syntax highlighting uses a greyscale theme. Infusion is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed.
-Line-numbered code blocks
-
-In addition to the basic markdown support, Infusion provides a mechanism to display code blocks with line numbers. This is via the codeBlock
shortcode. Here is the code for a block of JavaScript with line numbers:
-
-
-{{<codeBlock lang="js" numbered="true">}}
-var toggle = demo.querySelector('[aria-pressed]');
-
-toggle.addEventListener('click', (e) => {
- let pressed = e.target.getAttribute('aria-pressed') === 'true';
- e.target.setAttribute('aria-pressed', !pressed);
-});
-{{</codeBlock>}}
-
-
-
-The output will look like the following. Now you can refer to particular bits of the code by line number, like the arrow function on line 3
.
-
-
-var toggle = demo.querySelector('[aria-pressed]');
-
-toggle.addEventListener('click', (e) => {
- let pressed = e.target.getAttribute('aria-pressed') === 'true';
- e.target.setAttribute('aria-pressed', !pressed);
-});
-
-
-
diff --git a/docs/patterns/coding/color-palettes/index.html b/docs/patterns/coding/color-palettes/index.html
index 9458776..422fb1a 100644
--- a/docs/patterns/coding/color-palettes/index.html
+++ b/docs/patterns/coding/color-palettes/index.html
@@ -396,7 +396,7 @@
There’s no reason why your Infusion -powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors
shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values.
-
+
{{% colors "#111111, #cccccc, #ffffff" %}}
diff --git a/docs/patterns/coding/command-line/index.html b/docs/patterns/coding/command-line/index.html
index 12321bf..d5a9f30 100644
--- a/docs/patterns/coding/command-line/index.html
+++ b/docs/patterns/coding/command-line/index.html
@@ -398,7 +398,7 @@
Here’s how you write it:
-
+
{{<cmd>}}
npm run start
{{</cmd>}}
diff --git a/docs/patterns/coding/demo-embedding/index.html b/docs/patterns/coding/demo-embedding/index.html
index 2d9bd24..be337f6 100644
--- a/docs/patterns/coding/demo-embedding/index.html
+++ b/docs/patterns/coding/demo-embedding/index.html
@@ -427,7 +427,7 @@
Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen
shortcode takes just one argument: the codePen’s ID
.
-
+
{{% codePen VpVNKW %}}
@@ -458,14 +458,14 @@
You can embed JS Bins just like CodePens, supplying a single id
parameter.
-
+
{{% jsBin juwowaq %}}
However, you can also have finer control over which panes are displayed. Use two parameters: one for the id
and another, show
, listing the panes you want to include.
-
+
{{% jsBin id="juwowaq" show="css,output" %}}
diff --git a/docs/patterns/coding/file-trees/index.html b/docs/patterns/coding/file-trees/index.html
index ef604cb..af7203b 100644
--- a/docs/patterns/coding/file-trees/index.html
+++ b/docs/patterns/coding/file-trees/index.html
@@ -398,7 +398,7 @@
The file tree is described using a markdown nested list structure:
-
+
{{% fileTree %}}
* Level 1 folder
* Level 2 file
diff --git a/docs/patterns/coding/tested/index.html b/docs/patterns/coding/tested/index.html
index fdb1671..d881333 100644
--- a/docs/patterns/coding/tested/index.html
+++ b/docs/patterns/coding/tested/index.html
@@ -398,7 +398,7 @@
Infusion provided a tested
shortcode that lets you show which browsers and assistive technologies you’ve tried your design out in. Here’s an example. Note the commas and “+” signs.
-
+
{{% tested using="Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge" %}}
diff --git a/docs/patterns/coding/writing-inline-demos/index.html b/docs/patterns/coding/writing-inline-demos/index.html
index 61cfef3..a8306ae 100644
--- a/docs/patterns/coding/writing-inline-demos/index.html
+++ b/docs/patterns/coding/writing-inline-demos/index.html
@@ -427,7 +427,7 @@
Here’s the example code for an inline demo of a toggle button:
-
+
{{<demo>}}
<button aria-pressed="false">Toggle Me</button>
<style>
@@ -560,7 +560,7 @@ toggle.addEventListener('click', function () {
It’s possible to give your demo a caption using an accessible <figure>
and <figcaption>
structure. All you need to do is supply a caption
attribute. For example:
-
+
{{<demo caption="A basic button element">}}
<!-- demo code here -->
{{</demo>}}
@@ -573,7 +573,7 @@ toggle.addEventListener('click', function () {
Sometimes your component will be expected to appear in a context where the parent element has a background color. You can add a backgroundColor for your demo block using the backgroundColor
attribute. Any valid CSS color value is acceptable:
-
+
{{<demo backgroundColor="hsla(163, 100%, 50%, 0.43)">}}
<!-- demo code here -->
{{</demo>}}
diff --git a/docs/patterns/media/including-images/index.html b/docs/patterns/media/including-images/index.html
index c87d852..ab7e30f 100644
--- a/docs/patterns/media/including-images/index.html
+++ b/docs/patterns/media/including-images/index.html
@@ -436,7 +436,7 @@
Sometimes you will want to include a caption with your illustration. This is what the <figure>
and <figcaption>
elements are for. However, Infusion doesn’t ask you to code all that manually. A special shortcode is provided, which takes a caption
parameter. Note that the image markdown is provided between the opening and closing shortcode tags, and that you can use markdown syntax in the caption
value.
-
+
{{% figure caption="A design system that uses a bad code example as a **single source of truth** only serves to proliferate bad code." %}}
![Diagram of a design pattern represented by a turd emoji begetting three bad implementations](/images/bad_design_system.png)
{{% /figure %}}
diff --git a/docs/patterns/media/including-videos/index.html b/docs/patterns/media/including-videos/index.html
index 15b6cd8..9269744 100644
--- a/docs/patterns/media/including-videos/index.html
+++ b/docs/patterns/media/including-videos/index.html
@@ -396,7 +396,7 @@
Infusion has a lot of its own shortcodes, but you can still use Hugo’s built in shortcodes . These include a simple shortcode for including YouTube videos in your content. The shortcode takes just one parameter — the video’s id
.
-
+
{{<youtube w7Ft2ymGmfc>}}
diff --git a/docs/patterns/setup/index.html b/docs/patterns/setup/index.html
index 1f6c832..17b61c7 100644
--- a/docs/patterns/setup/index.html
+++ b/docs/patterns/setup/index.html
@@ -453,7 +453,7 @@
You’ll also want to name your project and configure one or two other things in the config.toml
file that’s found at the root of your project. Here’s how that file looks:
-
+
languageCode = "en-us"
title = "Infusion"
baseURL = "https://thepaciellogroup.github.io/infusion/"
diff --git a/docs/patterns/writing/expandable-sections/index.html b/docs/patterns/writing/expandable-sections/index.html
index ea7065b..2e47a60 100644
--- a/docs/patterns/writing/expandable-sections/index.html
+++ b/docs/patterns/writing/expandable-sections/index.html
@@ -406,7 +406,7 @@
Here’s what the code might look like for a simple expandable section containing markdown:
-
+
{{% expandable label="A section of dummy text" level="2" %}}
Here is some markdown including [a link](https://twitter.com/heydonworks). Donec erat est, feugiat a est sed, aliquet pharetra ipsum. Vivamus in arcu leo. Praesent feugiat, purus a molestie ultrices, libero massa iaculis ante, sit amet accumsan leo eros vel ligula.
{{% /expandable %}}
@@ -488,7 +488,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
Unfortunately, it is not currently possible to include shortcodes inside other shortcodes, using the “%
” notation (which is designated for markdown content). If you use the angle brackets notation (illustrated below) it is possible, but markdown will no longer be permitted. You will have to code HTML inside such a section manually.
-
+
{{<expandable label="A section of dummy text" level="2">}}
<p>Here is a pattern reference shortcode: {{% pattern "Writing inline demos" %}}.</p>
{{</expandable>}}
diff --git a/docs/patterns/writing/notes-and-warnings/index.html b/docs/patterns/writing/notes-and-warnings/index.html
index 98fd811..dd9c824 100644
--- a/docs/patterns/writing/notes-and-warnings/index.html
+++ b/docs/patterns/writing/notes-and-warnings/index.html
@@ -421,7 +421,7 @@
You may wish to pick out some content in your pattern’s documentation as a note — an aside to the main thrust of the pattern’s description. This is possible using the following syntax:
-
+
{{% note %}}
This is a note! It's something the reader may like to know about but is supplementary to the main content. Use notes when something may be interesting but not critical.
{{% /note %}}
@@ -445,7 +445,7 @@ This is a note! It's something the reader may like to know about but is suppleme
Warnings are like notes, but with more urgency.
-
+
{{% warning %}}
This is a warning! It's about something the reader should be careful to do or to avoid doing. Use warnings when something could go wrong.
{{% /warning %}}
diff --git a/docs/patterns/writing/references/index.html b/docs/patterns/writing/references/index.html
index 0e97a65..cd49896 100644
--- a/docs/patterns/writing/references/index.html
+++ b/docs/patterns/writing/references/index.html
@@ -425,7 +425,7 @@
Infusion identifies the main content files in your documentation as patterns , and they’re kept in the content/ patterns folder. It’s easy to cross-reference patterns using the pattern
shortcode. For example, I can reference the Notes & warnings pattern. Here’s what the markdown looks like, including the shortcode:
-
+
I can reference the {{% pattern "Notes & warnings" %}} pattern here.
@@ -449,7 +449,7 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here.
Instead of having to copy and paste content and links to WCAG, Infusion provides a shortcode mechanism that lets you simply list the success criteria by number:
-
+
{{% wcag include="1.2.1, 1.3.1, 4.1.2" %}}
@@ -622,7 +622,7 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here.
Sometimes, you’ll want to include the full descriptions of the success criteria inline. This is possible by setting descriptions
to true
:
-
+
{{% wcag include="1.3.1, 4.1.2" descriptions="true" %}}
@@ -790,7 +790,7 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here.
Some inclusive design concepts are not reducible to success or fail criteria. This is why The Paciello Group wrote the Inclusive Design Principles . These can be listed by name.
-
+
{{% principles include="Add value, Be consistent" descriptions="true" %}}
diff --git a/docs/patterns/writing/snippets/index.html b/docs/patterns/writing/snippets/index.html
index ca546c6..8a2b753 100644
--- a/docs/patterns/writing/snippets/index.html
+++ b/docs/patterns/writing/snippets/index.html
@@ -400,7 +400,7 @@
The example visually-hidden.md
snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it’s nice to be able to just drop a snippet into your markdown content. The snippet
shortcode lets you do exactly that:
-
+
{{% snippet file="visually-hidden.md" %}}
diff --git a/docs/print-version/index.html b/docs/print-version/index.html
index 061266b..5da67ee 100644
--- a/docs/print-version/index.html
+++ b/docs/print-version/index.html
@@ -492,7 +492,7 @@
You’ll also want to name your project and configure one or two other things in the config.toml
file that’s found at the root of your project. Here’s how that file looks:
-
+
languageCode = "en-us"
title = "Infusion"
baseURL = "https://thepaciellogroup.github.io/infusion/"
@@ -865,7 +865,7 @@ weight = 1
Here’s what the code might look like for a simple expandable section containing markdown:
-
+
{{% expandable label="A section of dummy text" level="2" %}}
Here is some markdown including [a link](https://twitter.com/heydonworks). Donec erat est, feugiat a est sed, aliquet pharetra ipsum. Vivamus in arcu leo. Praesent feugiat, purus a molestie ultrices, libero massa iaculis ante, sit amet accumsan leo eros vel ligula.
{{% /expandable %}}
@@ -947,7 +947,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
Unfortunately, it is not currently possible to include shortcodes inside other shortcodes, using the “%
” notation (which is designated for markdown content). If you use the angle brackets notation (illustrated below) it is possible, but markdown will no longer be permitted. You will have to code HTML inside such a section manually.
-
+
{{<expandable label="A section of dummy text" level="2">}}
<p>Here is a pattern reference shortcode: {{% pattern "Writing inline demos" %}}.</p>
{{</expandable>}}
@@ -982,7 +982,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
You may wish to pick out some content in your pattern’s documentation as a note — an aside to the main thrust of the pattern’s description. This is possible using the following syntax:
-
+
{{% note %}}
This is a note! It's something the reader may like to know about but is supplementary to the main content. Use notes when something may be interesting but not critical.
{{% /note %}}
@@ -1006,7 +1006,7 @@ This is a note! It's something the reader may like to know about but is suppleme
Warnings are like notes, but with more urgency.
-
+
{{% warning %}}
This is a warning! It's about something the reader should be careful to do or to avoid doing. Use warnings when something could go wrong.
{{% /warning %}}
@@ -1041,7 +1041,7 @@ This is a warning! It's about something the reader should be careful to do or to
Infusion identifies the main content files in your documentation as patterns , and they’re kept in the content/ patterns folder. It’s easy to cross-reference patterns using the pattern
shortcode. For example, I can reference the Notes & warnings pattern. Here’s what the markdown looks like, including the shortcode:
-
+
I can reference the {{% pattern "Notes & warnings" %}} pattern here.
@@ -1065,7 +1065,7 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here.
Instead of having to copy and paste content and links to WCAG, Infusion provides a shortcode mechanism that lets you simply list the success criteria by number:
-
+
{{% wcag include="1.2.1, 1.3.1, 4.1.2" %}}
@@ -1238,7 +1238,7 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here.
Sometimes, you’ll want to include the full descriptions of the success criteria inline. This is possible by setting descriptions
to true
:
-
+
{{% wcag include="1.3.1, 4.1.2" descriptions="true" %}}
@@ -1406,7 +1406,7 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here.
Some inclusive design concepts are not reducible to success or fail criteria. This is why The Paciello Group wrote the Inclusive Design Principles . These can be listed by name.
-
+
{{% principles include="Add value, Be consistent" descriptions="true" %}}
@@ -1481,7 +1481,7 @@ I can reference the {{% pattern "Notes & warnings" %}} pattern here.
The example visually-hidden.md
snippet describes the CSS needed to create content that is visually hidden but still available to screen readers. Since this is a technique/utility you are likely to use often, it’s nice to be able to just drop a snippet into your markdown content. The snippet
shortcode lets you do exactly that:
-
+
{{% snippet file="visually-hidden.md" %}}
@@ -1611,7 +1611,7 @@ toc = false
Sometimes you will want to include a caption with your illustration. This is what the <figure>
and <figcaption>
elements are for. However, Infusion doesn’t ask you to code all that manually. A special shortcode is provided, which takes a caption
parameter. Note that the image markdown is provided between the opening and closing shortcode tags, and that you can use markdown syntax in the caption
value.
-
+
{{% figure caption="A design system that uses a bad code example as a **single source of truth** only serves to proliferate bad code." %}}
![Diagram of a design pattern represented by a turd emoji begetting three bad implementations](/images/bad_design_system.png)
{{% /figure %}}
@@ -1651,7 +1651,7 @@ toc = false
Infusion has a lot of its own shortcodes, but you can still use Hugo’s built in shortcodes . These include a simple shortcode for including YouTube videos in your content. The shortcode takes just one parameter — the video’s id
.
-
+
{{<youtube w7Ft2ymGmfc>}}
@@ -1667,13 +1667,11 @@ toc = false
Code blocks
-
-
-
Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.
+
Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.
So, this…
-
+
```html
<button aria-pressed="false">toggle me</button>
```
@@ -1687,34 +1685,6 @@ toc = false
Note that the syntax highlighting uses a greyscale theme. Infusion is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed.
-Line-numbered code blocks
-
-In addition to the basic markdown support, Infusion provides a mechanism to display code blocks with line numbers. This is via the codeBlock
shortcode. Here is the code for a block of JavaScript with line numbers:
-
-
-{{<codeBlock lang="js" numbered="true">}}
-var toggle = demo.querySelector('[aria-pressed]');
-
-toggle.addEventListener('click', (e) => {
- let pressed = e.target.getAttribute('aria-pressed') === 'true';
- e.target.setAttribute('aria-pressed', !pressed);
-});
-{{</codeBlock>}}
-
-
-
-The output will look like the following. Now you can refer to particular bits of the code by line number, like the arrow function on line 3
.
-
-
-var toggle = demo.querySelector('[aria-pressed]');
-
-toggle.addEventListener('click', (e) => {
- let pressed = e.target.getAttribute('aria-pressed') === 'true';
- e.target.setAttribute('aria-pressed', !pressed);
-});
-
-
-
@@ -1743,7 +1713,7 @@ toggle.addEventListener('click', (e) => {
Infusion offers a couple of ways to do this. The first is by embedding CodePen demos into the content. The codePen
shortcode takes just one argument: the codePen’s ID
.
-
+
{{% codePen VpVNKW %}}
@@ -1774,14 +1744,14 @@ toggle.addEventListener('click', (e) => {
You can embed JS Bins just like CodePens, supplying a single id
parameter.
-
+
{{% jsBin juwowaq %}}
However, you can also have finer control over which panes are displayed. Use two parameters: one for the id
and another, show
, listing the panes you want to include.
-
+
{{% jsBin id="juwowaq" show="css,output" %}}
@@ -1824,7 +1794,7 @@ toggle.addEventListener('click', (e) => {
Here’s the example code for an inline demo of a toggle button:
-
+
{{<demo>}}
<button aria-pressed="false">Toggle Me</button>
<style>
@@ -1957,7 +1927,7 @@ toggle.addEventListener('click', function () {
It’s possible to give your demo a caption using an accessible <figure>
and <figcaption>
structure. All you need to do is supply a caption
attribute. For example:
-
+
{{<demo caption="A basic button element">}}
<!-- demo code here -->
{{</demo>}}
@@ -1970,7 +1940,7 @@ toggle.addEventListener('click', function () {
Sometimes your component will be expected to appear in a context where the parent element has a background color. You can add a backgroundColor for your demo block using the backgroundColor
attribute. Any valid CSS color value is acceptable:
-
+
{{<demo backgroundColor="hsla(163, 100%, 50%, 0.43)">}}
<!-- demo code here -->
{{</demo>}}
@@ -1988,7 +1958,7 @@ toggle.addEventListener('click', function () {
There’s no reason why your Infusion -powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The colors
shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values.
-
+
{{% colors "#111111, #cccccc, #ffffff" %}}
@@ -2040,7 +2010,7 @@ toggle.addEventListener('click', function () {
Here’s how you write it:
-
+
{{<cmd>}}
npm run start
{{</cmd>}}
@@ -2076,7 +2046,7 @@ npm run start
The file tree is described using a markdown nested list structure:
-
+
{{% fileTree %}}
* Level 1 folder
* Level 2 file
@@ -2162,7 +2132,7 @@ npm run start
Infusion provided a tested
shortcode that lets you show which browsers and assistive technologies you’ve tried your design out in. Here’s an example. Note the commas and “+” signs.
-
+
{{% tested using="Firefox + JAWS, Chrome, Safari iOS + Voiceover, Edge" %}}
diff --git a/docs/service-worker.js b/docs/service-worker.js
index 136b205..f7435f5 100644
--- a/docs/service-worker.js
+++ b/docs/service-worker.js
@@ -37,7 +37,7 @@
/* eslint-disable indent, no-unused-vars, no-multiple-empty-lines, max-nested-callbacks, space-before-function-paren, quotes, comma-spacing */
'use strict';
-var precacheConfig = [["404.html","af35759ee08980d84d90cc67ce29ce66"],["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","1c183b48cab635f689386c900b9dc4aa"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/images/arrow_effect.svg","1434d178461f70c16b77acb4bdbc51e3"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","d12a732ea706c7f7e040c50576d9ec4d"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-512x512.png","42d6b28cc7eb41810a5392c81368340a"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/bad_design_system.png","9c0e87a34e7d842b0e2831dc947249aa"],["images/browser-chrome-android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-firefox-android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-ie.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-safari-ios.svg","f729e629ec998ec40d313495d7257741"],["images/browser-safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.svg","50293a256b796b9a737f1969d511a98e"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/samsung_homescreen.png","5ef40e64a18f966ce5c9084a024256db"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["index.html","d7631e68d9ad7936e8d3f0084fb309bd"],["index.xml","57a3c0aa0932b3634b447ccd63d44254"],["js/dom-scripts.js","1d87ba44d730c37fae139d4ac47b118a"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["manifest.json","47399fd703e572a010a718a351c37b03"],["patterns/coding/code-blocks/index.html","c37b8c0faad4821a3e172161d13e9ff1"],["patterns/coding/color-palettes/index.html","d7420bc60d43abc8011f124329e880d2"],["patterns/coding/command-line/index.html","84131722dd7f07dc2161825a7ab4aab7"],["patterns/coding/demo-embedding/index.html","9b6cc912c9c93579f1901ab6a916e710"],["patterns/coding/file-trees/index.html","69add18685152cb7660ee9c8e635e708"],["patterns/coding/index.html","d8fe1e00628aa0629c0d0fc1ad2046a1"],["patterns/coding/index.xml","9103e9b80e3ea47df0759c7646b4b174"],["patterns/coding/tested/index.html","c71ebb0f70e0b5412fdecf9e0bb88cf6"],["patterns/coding/writing-inline-demos/index.html","ed53d51019c9b061908042e35b0af3bb"],["patterns/index.html","d3149b8d5f8b774ae6b8e388d2c9b815"],["patterns/index.xml","276f7358cc6c122ee8b38ec4f86f116f"],["patterns/installation/index.html","74e487bb3ae8c197fbe26bb254e92475"],["patterns/media/including-images/index.html","4b02520cceaaef716b16a3e65117ecc5"],["patterns/media/including-videos/index.html","6380325a0713455f09ecfcf9853fe514"],["patterns/media/index.html","69fe18861b962355bbcac82287edb7a6"],["patterns/media/index.xml","69e133cec08e19eeb33cb005e90590e3"],["patterns/printing/index.html","7ae7cac874393966d27e2d45812759bb"],["patterns/serving/index.html","04c09d07f42f52aa3f052f0e7b7c695b"],["patterns/setup/index.html","895a120da78fb27a781b48edd4ced2fa"],["patterns/updating/index.html","cf2b34b21c83ca3cf7cf4aa303fb1c6d"],["patterns/writing/expandable-sections/index.html","256adc086261693bdd210267e896696c"],["patterns/writing/index.html","ff5680104d01a993e34ba194fd7957ce"],["patterns/writing/index.xml","53aea727e5ea1133e83cd6a859115e7e"],["patterns/writing/markdown-and-metadata/index.html","3836e5a807e2458f4074bc7f67a4a6f7"],["patterns/writing/notes-and-warnings/index.html","c1c05b003cc0b4f75ccbcf3780ca3925"],["patterns/writing/project-structure/index.html","a0d3a12b87d07fc3fd7140a89c0b962d"],["patterns/writing/references/index.html","f2f7683c6e8cf96120ae9afdf46b07a1"],["patterns/writing/snippets/index.html","f66ad251985b9956fe9fccd5dba581ef"],["patterns/writing/tables-of-contents/index.html","2007aacb13d1f4ff294e6022933da0ce"],["print-version/index.html","7942ed9e1cc4f9c7db47a5befacf1b4b"],["sitemap.xml","e3f27a45b9955c8ee5f7f72517c65417"],["tags/index.xml","7445f2e8ccc722d44e7533263233d2df"],["tags/markdown/index.html","4f98af58c7865c4b0e12dd26459b82ed"],["tags/markdown/index.xml","5387a8d0317e6b6641e0803ac2f5af3c"],["tags/metadata/index.html","7a6e28be206eb4a3347f84e56c1be5e3"],["tags/metadata/index.xml","098f151053be1a17654318a88433154b"]];
+var precacheConfig = [["404.html","af35759ee08980d84d90cc67ce29ce66"],["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","1c183b48cab635f689386c900b9dc4aa"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/images/arrow_effect.svg","1434d178461f70c16b77acb4bdbc51e3"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","d12a732ea706c7f7e040c50576d9ec4d"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-512x512.png","42d6b28cc7eb41810a5392c81368340a"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/bad_design_system.png","9c0e87a34e7d842b0e2831dc947249aa"],["images/browser-chrome-android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-firefox-android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-ie.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-safari-ios.svg","f729e629ec998ec40d313495d7257741"],["images/browser-safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.svg","50293a256b796b9a737f1969d511a98e"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/samsung_homescreen.png","5ef40e64a18f966ce5c9084a024256db"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["index.html","d7631e68d9ad7936e8d3f0084fb309bd"],["index.xml","57a3c0aa0932b3634b447ccd63d44254"],["js/dom-scripts.js","1d87ba44d730c37fae139d4ac47b118a"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["manifest.json","47399fd703e572a010a718a351c37b03"],["patterns/coding/code-blocks/index.html","39da68f997c83e27545aa1c49a65c56c"],["patterns/coding/color-palettes/index.html","f42a9f6360e42df2287496182276a81c"],["patterns/coding/command-line/index.html","a0a53433d893862afdde3a8300cf77b7"],["patterns/coding/demo-embedding/index.html","9abb08ce31b0e5ea8c343f9045625137"],["patterns/coding/file-trees/index.html","ffba17527be07b07752d877df1fc4f15"],["patterns/coding/index.html","d8fe1e00628aa0629c0d0fc1ad2046a1"],["patterns/coding/index.xml","9103e9b80e3ea47df0759c7646b4b174"],["patterns/coding/tested/index.html","b53080b8a3ac868142e901a05a8e098c"],["patterns/coding/writing-inline-demos/index.html","e7845a3c353390d39fa42ab3b1c607a1"],["patterns/index.html","d3149b8d5f8b774ae6b8e388d2c9b815"],["patterns/index.xml","276f7358cc6c122ee8b38ec4f86f116f"],["patterns/installation/index.html","74e487bb3ae8c197fbe26bb254e92475"],["patterns/media/including-images/index.html","6c39996f9aa82f954a94e177647e9922"],["patterns/media/including-videos/index.html","eb3c48db36c1c4a60ace0669c95026c6"],["patterns/media/index.html","69fe18861b962355bbcac82287edb7a6"],["patterns/media/index.xml","69e133cec08e19eeb33cb005e90590e3"],["patterns/printing/index.html","7ae7cac874393966d27e2d45812759bb"],["patterns/serving/index.html","04c09d07f42f52aa3f052f0e7b7c695b"],["patterns/setup/index.html","eb17fc9a5052563286def17bafebeda4"],["patterns/updating/index.html","cf2b34b21c83ca3cf7cf4aa303fb1c6d"],["patterns/writing/expandable-sections/index.html","611f31e1afbf5b6fd3f9a212b4c59271"],["patterns/writing/index.html","ff5680104d01a993e34ba194fd7957ce"],["patterns/writing/index.xml","53aea727e5ea1133e83cd6a859115e7e"],["patterns/writing/markdown-and-metadata/index.html","3836e5a807e2458f4074bc7f67a4a6f7"],["patterns/writing/notes-and-warnings/index.html","63e944742f22e0445bec2ca19d59d562"],["patterns/writing/project-structure/index.html","a0d3a12b87d07fc3fd7140a89c0b962d"],["patterns/writing/references/index.html","acb94fefbf14926356eb77013cee1728"],["patterns/writing/snippets/index.html","5677bc0d45be0bf0af9eefb1466d20b8"],["patterns/writing/tables-of-contents/index.html","2007aacb13d1f4ff294e6022933da0ce"],["print-version/index.html","145e27f67b45c62070e29d02f1e47331"],["sitemap.xml","e3f27a45b9955c8ee5f7f72517c65417"],["tags/index.xml","7445f2e8ccc722d44e7533263233d2df"],["tags/markdown/index.html","4f98af58c7865c4b0e12dd26459b82ed"],["tags/markdown/index.xml","5387a8d0317e6b6641e0803ac2f5af3c"],["tags/metadata/index.html","7a6e28be206eb4a3347f84e56c1be5e3"],["tags/metadata/index.xml","098f151053be1a17654318a88433154b"]];
var cacheName = 'sw-precache-v3-sw-precache-' + (self.registration ? self.registration.scope : '');
diff --git a/themes/infusion/layouts/shortcodes/codeBlock.html b/themes/infusion/layouts/shortcodes/codeBlock.html
index d1ac10c..a2b030a 100644
--- a/themes/infusion/layouts/shortcodes/codeBlock.html
+++ b/themes/infusion/layouts/shortcodes/codeBlock.html
@@ -1 +1 @@
-{{ .Inner }}
+{{ .Inner }}