Home Explore Help
Register Sign In
wang2365
/
cupper-hugo-theme
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

html shortcode to code shortcode

Heydon Pickering 7 years ago
parent
362e846524
commit
56152cb712
10 changed files with 204 additions and 87 deletions
Unified View Show Diff Stats
  1. 52 22
      content/patterns/coding/code-blocks.md
  2. 14 12
      docs/css/styles.css
  3. 1 1
      docs/js/dom-scripts.js
  4. 58 19
      docs/patterns/coding/code-blocks/index.html
  5. 58 19
      docs/print-version/index.html
  6. 0 0
      docs/service-worker.js
  7. 5 0
      themes/infusion/layouts/shortcodes/code.html
  8. 1 1
      themes/infusion/layouts/shortcodes/html.html
  9. 14 12
      themes/infusion/static/css/styles.css
  10. 1 1
      themes/infusion/static/js/dom-scripts.js

+ 52 - 22
content/patterns/coding/code-blocks.md
View File 

@@ -25,11 +25,9 @@ Note that the syntax highlighting uses a greyscale theme. **Infusion** is carefu
 
 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.
 
 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 %}}
 
 {{% /note %}}
 
 
 
-## Annotated HTML
 
+## Annotated code
 
 
 
-Since the structure of HTML is critical to interoperable web interfaces, **Infusion** offers the ability to highlight and annotate specific HTML elements and attributes using the `html` shortcode.
 
-
 
-Take an accessible dialog. You may wish to point out key attributes that make that dialog support assistive technologies:
 
+**Infusion** offers the ability to highlight and annotate specific parts of your code examples using the `code` shortcode. Take an accessible dialog. You may wish to point out key attributes that make that dialog support assistive technologies:
 
 
 
 {{<html>}}
 
 {{<html>}}
 
 <div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
 <div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
@@ -41,46 +39,78 @@ Take an accessible dialog. You may wish to point out key attributes that make th
 
 </div>
 
 </div>
 
 {{</html>}}
 
 {{</html>}}
 
 
 
-You mark out the highlighted areas with double parentheses like so:
 
+You mark out the highlighted areas using triple square brackets like so:
 
 
 
 {{<codeBlock>}}
 
 {{<codeBlock>}}
 
-&#x7b;{&lt;html>}}
 
-&lt;div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
-  &lt;button ((aria-label="close"))>x&lt;/button>
 
-  &lt;h2 ((id="dialog-heading"))>Confirmation&lt;/h2>
 
+&#x7b;{&lt;code>}}
 
+&lt;div [[[role="dialog"]]] [[[aria-labelledby="dialog-heading"]]]>
 
+  &lt;button [[[aria-label="close"]]]>x&lt;/button>
 
+  &lt;h2 [[[id="dialog-heading"]]]>Confirmation&lt;/h2>
 
   &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
   &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
   &lt;button>Okay&lt;/button>
 
   &lt;button>Okay&lt;/button>
 
   &lt;button>Cancel&lt;/button>
 
   &lt;button>Cancel&lt;/button>
 
 &lt;/div>
 
 &lt;/div>
 
-&#x7b;{&lt;/html>}}
 
+&#x7b;{&lt;/code>}}
 
 {{</codeBlock>}}
 
 {{</codeBlock>}}
 
 
 
-Better still, if you include `numbered="true"`, each highlight is enumerated so you can reference it directly in the ensuing text.
 
+Better still, if you include `numbered="true"`, each highlight is enumerated so you can reference it directly in the ensuing text. If you follow the shortcode directly with an ordered list, the styles match:
 
 
 
-{{<html numbered="true">}}
 
-<div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
-  <button ((aria-label="close"))>x</button>
 
-  <h2 ((id="dialog-heading"))>Confirmation</h2>
 
+{{<code numbered="true">}}
 
+<div [[[role="dialog"]]] [[[aria-labelledby="dialog-heading"]]]>
 
+  <button [[[aria-label="close"]]]>x</button>
 
+  <h2 [[[id="dialog-heading"]]]>Confirmation</h2>
 
   <p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong></p>
 
   <p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong></p>
 
   <button>Okay</button>
 
   <button>Okay</button>
 
   <button>Cancel</button>
 
   <button>Cancel</button>
 
 </div>
 
 </div>
 
-{{</html>}}
 
+{{</code>}}
 
+
 
+1. The dialog is only announced as a dialog if it takes the `dialog` ARIA role
 
+2. The `aria-labelledby` relationship attribute makes the element carrying the `id` it points to its label
 
+3. The close button uses `aria-label` to provide the text label "close", overriding the text content
 
+4. The heading is used as the dialog's label. The `aria-labelledby` attribute points to its `id`
 
 
 
 You just include `numbered="true"` on the opening shortcode tag:
 
 You just include `numbered="true"` on the opening shortcode tag:
 
 
 
 {{<codeBlock>}}
 
 {{<codeBlock>}}
 
-&#x7b;{&lt;html numbered="true">}}
 
-&lt;div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
-  &lt;button ((aria-label="close"))>x&lt;/button>
 
-  &lt;h2 ((id="dialog-heading"))>Confirmation&lt;/h2>
 
+&#x7b;{&lt;code numbered="true">}}
 
+&lt;div [[[role="dialog"]]] [[[aria-labelledby="dialog-heading"]]]>
 
+  &lt;button [[[aria-label="close"]]]>x&lt;/button>
 
+  &lt;h2 [[[id="dialog-heading"]]]>Confirmation&lt;/h2>
 
   &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
   &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
   &lt;button>Okay&lt;/button>
 
   &lt;button>Okay&lt;/button>
 
   &lt;button>Cancel&lt;/button>
 
   &lt;button>Cancel&lt;/button>
 
 &lt;/div>
 
 &lt;/div>
 
-&#x7b;{&lt;/html>}}
 
+&#x7b;{&lt;/code>}}
 
+
 
+1. The dialog is only announced as a dialog if it takes the `dialog` ARIA role
 
+2. The `aria-labelledby` relationship attribute makes the element carrying the `id` it points to its label
 
+3. The close button uses `aria-label` to provide the text label "close", overriding the text content
 
+4. The heading is used as the dialog's label. The `aria-labelledby` attribute points to its `id`
 
 {{</codeBlock>}}
 
 {{</codeBlock>}}
 
 
 
+### JavaScript example
 
+
 
+{{<code numbered="true">}}
 
+/* Enable scrolling by keyboard of code samples */
 
+(function () {
 
+  var codeBlocks = document.querySelectorAll('pre, .code-annotated');
 
+
 
+  Array.prototype.forEach.call(codeBlocks, function (block) {
 
+    if (block.querySelector('code')) {
 
+      block.setAttribute([[['role', 'region']]]);
 
+      block.setAttribute([[['aria-label', 'code sample']]]);
 
+      if (block.scrollWidth > block.clientWidth) {
 
+        block.setAttribute('tabindex', '0');
 
+      }
 
+    }
 
+  });
 
+}());
 
+{{</code>}}
 
+
 
+1. The `region` role announces the block as a region
 
+2. The `aria-label` describes the kind of content to be expected in the region
 
+
 
 {{% note %}}
 
 {{% note %}}
 
-As you may have noticed, using specified highlights with the `html` shortcode sacrifices syntax highlighting.
 
+As you may have noticed, using specified highlights with the `code` shortcode sacrifices syntax highlighting. If you want syntax highlighting you must use the markdown triple back-tick syntax and annotation is not available.
 
 {{% /note %}}
 
 {{% /note %}}

+ 14 - 12
docs/css/styles.css
View File 

@@ -519,11 +519,11 @@ pre[class*=language-][data-line] {
 
 pre[class*=language-] code * {
 
 pre[class*=language-] code * {
 
     margin-top: 0 !important;
 
     margin-top: 0 !important;
 
 }
 
 }
 
-[data-codeblock-shortcode], .html-annotated code {
 
+[data-codeblock-shortcode], .code-annotated code {
 
     display: inline-block;
 
     display: inline-block;
 
     margin-top: -1rem;
 
     margin-top: -1rem;
 
 }
 
 }
 
-.html-annotated {
 
+.code-annotated {
 
     overflow-y: hidden;
 
     overflow-y: hidden;
 
     overflow-x: auto;
 
     overflow-x: auto;
 
     padding: 1.5rem;
 
     padding: 1.5rem;
 
@@ -536,7 +536,8 @@ pre[class*=language-] code * {
 
     padding: 0.0625rem 0.33rem;
 
     padding: 0.0625rem 0.33rem;
 
     border-radius: 0.5rem;
 
     border-radius: 0.5rem;
 
 }
 
 }
 
-.numbered .highlight::after {
 
+.numbered .highlight::after,
 
+.code-annotated.numbered + ol li::before  {
 
     counter-increment: annotation;
 
     counter-increment: annotation;
 
     content: counter(annotation);
 
     content: counter(annotation);
 
     font-weight: bold;
 
     font-weight: bold;
 
@@ -548,16 +549,17 @@ pre[class*=language-] code * {
 
     padding: 0.125em 0.5em;
 
     padding: 0.125em 0.5em;
 
     vertical-align: 0.33em;
 
     vertical-align: 0.33em;
 
 }
 
 }
 
-/*main {
 
-    display: block;
 
-    counter-reset: fig;
 
-    min-height: 100vh;
 
+
 
+.code-annotated.numbered + ol {
 
+    list-style: none;
 
+    counter-reset: annotation;
 
+}
 
+
 
+.code-annotated.numbered + ol li::before {
 
+    font-size: 0.66em;
 
+    margin-right: 0.33em;
 
+    vertical-align: 0.25em;
 
 }
 
 }
 
-figcaption::before {
 
-    counter-increment: fig;
 
-    content: 'Figure ' counter(fig) ':\0020';
 
-    font-weight: bold;
 
-}*/
 
 /* file tree lists */
 
 /* file tree lists */
 
 .file-tree {
 
 .file-tree {
 
     overflow-x: auto;
 
     overflow-x: auto;

+ 1 - 1
docs/js/dom-scripts.js
View File 

@@ -82,7 +82,7 @@
 
 
 
 /* Enable scrolling by keyboard of code samples */
 
 /* Enable scrolling by keyboard of code samples */
 
 (function () {
 
 (function () {
 
-  var codeBlocks = document.querySelectorAll('pre, .html-annotated');
 
+  var codeBlocks = document.querySelectorAll('pre, .code-annotated');
 
 
 
   Array.prototype.forEach.call(codeBlocks, function (block) {
 
   Array.prototype.forEach.call(codeBlocks, function (block) {
 
     if (block.querySelector('code')) {
 
     if (block.querySelector('code')) {

+ 58 - 19
docs/patterns/coding/code-blocks/index.html
View File 

@@ -425,17 +425,15 @@
 
 </aside>
 
 </aside>
 
 
 
 
 
-<h2 id="annotated-html">Annotated HTML</h2>
 
+<h2 id="annotated-code">Annotated code</h2>
 
 
 
-<p>Since the structure of HTML is critical to interoperable web interfaces, <strong>Infusion</strong> offers the ability to highlight and annotate specific HTML elements and attributes using the <code>html</code> shortcode.</p>
 
+<p><strong>Infusion</strong> offers the ability to highlight and annotate specific parts of your code examples using the <code>code</code> shortcode. Take an accessible dialog. You may wish to point out key attributes that make that dialog support assistive technologies:</p>
 
 
 
-<p>Take an accessible dialog. You may wish to point out key attributes that make that dialog support assistive technologies:</p>
 
 
 
 
 
 
 
 
 
-
 
-<div class="html-annotated "><code>
 
+<div class="code-annotated "><code>
 
 &lt;div <span class='highlight'>role=&#34;dialog&#34;</span> <span class='highlight'>aria-labelledby=&#34;dialog-heading&#34;</span>&gt;
 
 &lt;div <span class='highlight'>role=&#34;dialog&#34;</span> <span class='highlight'>aria-labelledby=&#34;dialog-heading&#34;</span>&gt;
 
   &lt;button <span class='highlight'>aria-label=&#34;close&#34;</span>&gt;x&lt;/button&gt;
 
   &lt;button <span class='highlight'>aria-label=&#34;close&#34;</span>&gt;x&lt;/button&gt;
 
   &lt;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
 
   &lt;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
 
@@ -446,28 +444,28 @@
 
 </code></div>
 
 </code></div>
 
 
 
 
 
-<p>You mark out the highlighted areas with double parentheses like so:</p>
 
+<p>You mark out the highlighted areas using triple square brackets like so:</p>
 
 
 
 <pre class=""><code  data-codeblock-shortcode>
 
 <pre class=""><code  data-codeblock-shortcode>
 
-&#x7b;{&lt;html>}}
 
-&lt;div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
-  &lt;button ((aria-label="close"))>x&lt;/button>
 
-  &lt;h2 ((id="dialog-heading"))>Confirmation&lt;/h2>
 
+&#x7b;{&lt;code>}}
 
+&lt;div [[[role="dialog"]]] [[[aria-labelledby="dialog-heading"]]]>
 
+  &lt;button [[[aria-label="close"]]]>x&lt;/button>
 
+  &lt;h2 [[[id="dialog-heading"]]]>Confirmation&lt;/h2>
 
   &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
   &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
   &lt;button>Okay&lt;/button>
 
   &lt;button>Okay&lt;/button>
 
   &lt;button>Cancel&lt;/button>
 
   &lt;button>Cancel&lt;/button>
 
 &lt;/div>
 
 &lt;/div>
 
-&#x7b;{&lt;/html>}}
 
+&#x7b;{&lt;/code>}}
 
 </code></pre>
 
 </code></pre>
 
 
 
 
 
-<p>Better still, if you include <code>numbered=&quot;true&quot;</code>, each highlight is enumerated so you can reference it directly in the ensuing text.</p>
 
+<p>Better still, if you include <code>numbered=&quot;true&quot;</code>, each highlight is enumerated so you can reference it directly in the ensuing text. If you follow the shortcode directly with an ordered list, the styles match:</p>
 
 
 
 
 
 
 
 
 
 
 
-<div class="html-annotated numbered"><code>
 
+<div class="code-annotated numbered"><code>
 
 &lt;div <span class='highlight'>role=&#34;dialog&#34;</span> <span class='highlight'>aria-labelledby=&#34;dialog-heading&#34;</span>&gt;
 
 &lt;div <span class='highlight'>role=&#34;dialog&#34;</span> <span class='highlight'>aria-labelledby=&#34;dialog-heading&#34;</span>&gt;
 
   &lt;button <span class='highlight'>aria-label=&#34;close&#34;</span>&gt;x&lt;/button&gt;
 
   &lt;button <span class='highlight'>aria-label=&#34;close&#34;</span>&gt;x&lt;/button&gt;
 
   &lt;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
 
   &lt;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
 
@@ -478,27 +476,68 @@
 
 </code></div>
 
 </code></div>
 
 
 
 
 
+<ol>
 
+<li>The dialog is only announced as a dialog if it takes the <code>dialog</code> ARIA role</li>
 
+<li>The <code>aria-labelledby</code> relationship attribute makes the element carrying the <code>id</code> it points to its label</li>
 
+<li>The close button uses <code>aria-label</code> to provide the text label &ldquo;close&rdquo;, overriding the text content</li>
 
+<li>The heading is used as the dialog&rsquo;s label. The <code>aria-labelledby</code> attribute points to its <code>id</code></li>
 
+</ol>
 
+
 
 <p>You just include <code>numbered=&quot;true&quot;</code> on the opening shortcode tag:</p>
 
 <p>You just include <code>numbered=&quot;true&quot;</code> on the opening shortcode tag:</p>
 
 
 
 <pre class=""><code  data-codeblock-shortcode>
 
 <pre class=""><code  data-codeblock-shortcode>
 
-&#x7b;{&lt;html numbered="true">}}
 
-&lt;div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
-  &lt;button ((aria-label="close"))>x&lt;/button>
 
-  &lt;h2 ((id="dialog-heading"))>Confirmation&lt;/h2>
 
+&#x7b;{&lt;code numbered="true">}}
 
+&lt;div [[[role="dialog"]]] [[[aria-labelledby="dialog-heading"]]]>
 
+  &lt;button [[[aria-label="close"]]]>x&lt;/button>
 
+  &lt;h2 [[[id="dialog-heading"]]]>Confirmation&lt;/h2>
 
   &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
   &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
   &lt;button>Okay&lt;/button>
 
   &lt;button>Okay&lt;/button>
 
   &lt;button>Cancel&lt;/button>
 
   &lt;button>Cancel&lt;/button>
 
 &lt;/div>
 
 &lt;/div>
 
-&#x7b;{&lt;/html>}}
 
+&#x7b;{&lt;/code>}}
 
+
 
+1. The dialog is only announced as a dialog if it takes the `dialog` ARIA role
 
+2. The `aria-labelledby` relationship attribute makes the element carrying the `id` it points to its label
 
+3. The close button uses `aria-label` to provide the text label "close", overriding the text content
 
+4. The heading is used as the dialog's label. The `aria-labelledby` attribute points to its `id`
 
 </code></pre>
 
 </code></pre>
 
 
 
 
 
+<h3 id="javascript-example">JavaScript example</h3>
 
+
 
+
 
+
 
+
 
+
 
+<div class="code-annotated numbered"><code>
 
+/* Enable scrolling by keyboard of code samples */
 
+(function () {
 
+  var codeBlocks = document.querySelectorAll(&#39;pre, .code-annotated&#39;);
 
+
 
+  Array.prototype.forEach.call(codeBlocks, function (block) {
 
+    if (block.querySelector(&#39;code&#39;)) {
 
+      block.setAttribute(<span class='highlight'>&#39;role&#39;, &#39;region&#39;</span>);
 
+      block.setAttribute(<span class='highlight'>&#39;aria-label&#39;, &#39;code sample&#39;</span>);
 
+      if (block.scrollWidth &gt; block.clientWidth) {
 
+        block.setAttribute(&#39;tabindex&#39;, &#39;0&#39;);
 
+      }
 
+    }
 
+  });
 
+}());
 
+</code></div>
 
+
 
+
 
+<ol>
 
+<li>The <code>region</code> role announces the block as a region</li>
 
+<li>The <code>aria-label</code> describes the kind of content to be expected in the region</li>
 
+</ol>
 
+
 
 <aside aria-label="note" class="note">
 
 <aside aria-label="note" class="note">
 
   <div>
 
   <div>
 
     <svg class="sign" aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
 
     <svg class="sign" aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
 
       <use xlink:href="#info"></use>
 
       <use xlink:href="#info"></use>
 
     </svg>
 
     </svg>
 
-    <p>As you may have noticed, using specified highlights with the <code>html</code> shortcode sacrifices syntax highlighting.</p>
 
+    <p>As you may have noticed, using specified highlights with the <code>code</code> shortcode sacrifices syntax highlighting. If you want syntax highlighting you must use the markdown triple back-tick syntax and annotation is not available.</p>
 
 
 
   </div>
 
   </div>
 
 </aside>
 
 </aside>

+ 58 - 19
docs/print-version/index.html
View File 

@@ -1709,17 +1709,15 @@ toc = false
 
 </aside>
 
 </aside>
 
 
 
 
 
-<h2 id="annotated-html">Annotated HTML</h2>
 
+<h2 id="annotated-code">Annotated code</h2>
 
 
 
-<p>Since the structure of HTML is critical to interoperable web interfaces, <strong>Infusion</strong> offers the ability to highlight and annotate specific HTML elements and attributes using the <code>html</code> shortcode.</p>
 
+<p><strong>Infusion</strong> offers the ability to highlight and annotate specific parts of your code examples using the <code>code</code> shortcode. Take an accessible dialog. You may wish to point out key attributes that make that dialog support assistive technologies:</p>
 
 
 
-<p>Take an accessible dialog. You may wish to point out key attributes that make that dialog support assistive technologies:</p>
 
 
 
 
 
 
 
 
 
-
 
-<div class="html-annotated "><code>
 
+<div class="code-annotated "><code>
 
 &lt;div <span class='highlight'>role=&#34;dialog&#34;</span> <span class='highlight'>aria-labelledby=&#34;dialog-heading&#34;</span>&gt;
 
 &lt;div <span class='highlight'>role=&#34;dialog&#34;</span> <span class='highlight'>aria-labelledby=&#34;dialog-heading&#34;</span>&gt;
 
   &lt;button <span class='highlight'>aria-label=&#34;close&#34;</span>&gt;x&lt;/button&gt;
 
   &lt;button <span class='highlight'>aria-label=&#34;close&#34;</span>&gt;x&lt;/button&gt;
 
   &lt;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
 
   &lt;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
 
@@ -1730,28 +1728,28 @@ toc = false
 
 </code></div>
 
 </code></div>
 
 
 
 
 
-<p>You mark out the highlighted areas with double parentheses like so:</p>
 
+<p>You mark out the highlighted areas using triple square brackets like so:</p>
 
 
 
 <pre class=""><code  data-codeblock-shortcode>
 
 <pre class=""><code  data-codeblock-shortcode>
 
-&#x7b;{&lt;html>}}
 
-&lt;div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
-  &lt;button ((aria-label="close"))>x&lt;/button>
 
-  &lt;h2 ((id="dialog-heading"))>Confirmation&lt;/h2>
 
+&#x7b;{&lt;code>}}
 
+&lt;div [[[role="dialog"]]] [[[aria-labelledby="dialog-heading"]]]>
 
+  &lt;button [[[aria-label="close"]]]>x&lt;/button>
 
+  &lt;h2 [[[id="dialog-heading"]]]>Confirmation&lt;/h2>
 
   &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
   &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
   &lt;button>Okay&lt;/button>
 
   &lt;button>Okay&lt;/button>
 
   &lt;button>Cancel&lt;/button>
 
   &lt;button>Cancel&lt;/button>
 
 &lt;/div>
 
 &lt;/div>
 
-&#x7b;{&lt;/html>}}
 
+&#x7b;{&lt;/code>}}
 
 </code></pre>
 
 </code></pre>
 
 
 
 
 
-<p>Better still, if you include <code>numbered=&quot;true&quot;</code>, each highlight is enumerated so you can reference it directly in the ensuing text.</p>
 
+<p>Better still, if you include <code>numbered=&quot;true&quot;</code>, each highlight is enumerated so you can reference it directly in the ensuing text. If you follow the shortcode directly with an ordered list, the styles match:</p>
 
 
 
 
 
 
 
 
 
 
 
-<div class="html-annotated numbered"><code>
 
+<div class="code-annotated numbered"><code>
 
 &lt;div <span class='highlight'>role=&#34;dialog&#34;</span> <span class='highlight'>aria-labelledby=&#34;dialog-heading&#34;</span>&gt;
 
 &lt;div <span class='highlight'>role=&#34;dialog&#34;</span> <span class='highlight'>aria-labelledby=&#34;dialog-heading&#34;</span>&gt;
 
   &lt;button <span class='highlight'>aria-label=&#34;close&#34;</span>&gt;x&lt;/button&gt;
 
   &lt;button <span class='highlight'>aria-label=&#34;close&#34;</span>&gt;x&lt;/button&gt;
 
   &lt;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
 
   &lt;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
 
@@ -1762,27 +1760,68 @@ toc = false
 
 </code></div>
 
 </code></div>
 
 
 
 
 
+<ol>
 
+<li>The dialog is only announced as a dialog if it takes the <code>dialog</code> ARIA role</li>
 
+<li>The <code>aria-labelledby</code> relationship attribute makes the element carrying the <code>id</code> it points to its label</li>
 
+<li>The close button uses <code>aria-label</code> to provide the text label &ldquo;close&rdquo;, overriding the text content</li>
 
+<li>The heading is used as the dialog&rsquo;s label. The <code>aria-labelledby</code> attribute points to its <code>id</code></li>
 
+</ol>
 
+
 
 <p>You just include <code>numbered=&quot;true&quot;</code> on the opening shortcode tag:</p>
 
 <p>You just include <code>numbered=&quot;true&quot;</code> on the opening shortcode tag:</p>
 
 
 
 <pre class=""><code  data-codeblock-shortcode>
 
 <pre class=""><code  data-codeblock-shortcode>
 
-&#x7b;{&lt;html numbered="true">}}
 
-&lt;div ((role="dialog")) ((aria-labelledby="dialog-heading"))>
 
-  &lt;button ((aria-label="close"))>x&lt;/button>
 
-  &lt;h2 ((id="dialog-heading"))>Confirmation&lt;/h2>
 
+&#x7b;{&lt;code numbered="true">}}
 
+&lt;div [[[role="dialog"]]] [[[aria-labelledby="dialog-heading"]]]>
 
+  &lt;button [[[aria-label="close"]]]>x&lt;/button>
 
+  &lt;h2 [[[id="dialog-heading"]]]>Confirmation&lt;/h2>
 
   &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
   &lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
 
   &lt;button>Okay&lt;/button>
 
   &lt;button>Okay&lt;/button>
 
   &lt;button>Cancel&lt;/button>
 
   &lt;button>Cancel&lt;/button>
 
 &lt;/div>
 
 &lt;/div>
 
-&#x7b;{&lt;/html>}}
 
+&#x7b;{&lt;/code>}}
 
+
 
+1. The dialog is only announced as a dialog if it takes the `dialog` ARIA role
 
+2. The `aria-labelledby` relationship attribute makes the element carrying the `id` it points to its label
 
+3. The close button uses `aria-label` to provide the text label "close", overriding the text content
 
+4. The heading is used as the dialog's label. The `aria-labelledby` attribute points to its `id`
 
 </code></pre>
 
 </code></pre>
 
 
 
 
 
+<h3 id="javascript-example">JavaScript example</h3>
 
+
 
+
 
+
 
+
 
+
 
+<div class="code-annotated numbered"><code>
 
+/* Enable scrolling by keyboard of code samples */
 
+(function () {
 
+  var codeBlocks = document.querySelectorAll(&#39;pre, .code-annotated&#39;);
 
+
 
+  Array.prototype.forEach.call(codeBlocks, function (block) {
 
+    if (block.querySelector(&#39;code&#39;)) {
 
+      block.setAttribute(<span class='highlight'>&#39;role&#39;, &#39;region&#39;</span>);
 
+      block.setAttribute(<span class='highlight'>&#39;aria-label&#39;, &#39;code sample&#39;</span>);
 
+      if (block.scrollWidth &gt; block.clientWidth) {
 
+        block.setAttribute(&#39;tabindex&#39;, &#39;0&#39;);
 
+      }
 
+    }
 
+  });
 
+}());
 
+</code></div>
 
+
 
+
 
+<ol>
 
+<li>The <code>region</code> role announces the block as a region</li>
 
+<li>The <code>aria-label</code> describes the kind of content to be expected in the region</li>
 
+</ol>
 
+
 
 <aside aria-label="note" class="note">
 
 <aside aria-label="note" class="note">
 
   <div>
 
   <div>
 
     <svg class="sign" aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
 
     <svg class="sign" aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
 
       <use xlink:href="#info"></use>
 
       <use xlink:href="#info"></use>
 
     </svg>
 
     </svg>
 
-    <p>As you may have noticed, using specified highlights with the <code>html</code> shortcode sacrifices syntax highlighting.</p>
 
+    <p>As you may have noticed, using specified highlights with the <code>code</code> shortcode sacrifices syntax highlighting. If you want syntax highlighting you must use the markdown triple back-tick syntax and annotation is not available.</p>
 
 
 
   </div>
 
   </div>
 
 </aside>
 
 </aside>

File diff suppressed because it is too large
+ 0 - 0
docs/service-worker.js


+ 5 - 0
themes/infusion/layouts/shortcodes/code.html
View File 

@@ -0,0 +1,5 @@
 
+{{ $code := .Inner | htmlEscape }}
 
+{{ $code := replace $code "[[[" "<span class='highlight'>" }}
 
+{{ $code := replace $code "]]]" "</span>" }}
 
+{{ $numbered := .Get "numbered" }}
 
+<div class="code-annotated {{ if and ($numbered) (ne $numbered "false") }}numbered{{ end }}"><code>{{ $code | safeHTML }}</code></div>

+ 1 - 1
themes/infusion/layouts/shortcodes/html.html
View File 

@@ -2,4 +2,4 @@
 
 {{ $html := replace $html "((" "<span class='highlight'>" }}
 
 {{ $html := replace $html "((" "<span class='highlight'>" }}
 
 {{ $html := replace $html "))" "</span>" }}
 
 {{ $html := replace $html "))" "</span>" }}
 
 {{ $numbered := .Get "numbered" }}
 
 {{ $numbered := .Get "numbered" }}
 
-<div class="html-annotated {{ if and ($numbered) (ne $numbered "false") }}numbered{{ end }}"><code>{{ $html | safeHTML }}</code></div>
 
+<div class="code-annotated {{ if and ($numbered) (ne $numbered "false") }}numbered{{ end }}"><code>{{ $html | safeHTML }}</code></div>

+ 14 - 12
themes/infusion/static/css/styles.css
View File 

@@ -519,11 +519,11 @@ pre[class*=language-][data-line] {
 
 pre[class*=language-] code * {
 
 pre[class*=language-] code * {
 
     margin-top: 0 !important;
 
     margin-top: 0 !important;
 
 }
 
 }
 
-[data-codeblock-shortcode], .html-annotated code {
 
+[data-codeblock-shortcode], .code-annotated code {
 
     display: inline-block;
 
     display: inline-block;
 
     margin-top: -1rem;
 
     margin-top: -1rem;
 
 }
 
 }
 
-.html-annotated {
 
+.code-annotated {
 
     overflow-y: hidden;
 
     overflow-y: hidden;
 
     overflow-x: auto;
 
     overflow-x: auto;
 
     padding: 1.5rem;
 
     padding: 1.5rem;
 
@@ -536,7 +536,8 @@ pre[class*=language-] code * {
 
     padding: 0.0625rem 0.33rem;
 
     padding: 0.0625rem 0.33rem;
 
     border-radius: 0.5rem;
 
     border-radius: 0.5rem;
 
 }
 
 }
 
-.numbered .highlight::after {
 
+.numbered .highlight::after,
 
+.code-annotated.numbered + ol li::before  {
 
     counter-increment: annotation;
 
     counter-increment: annotation;
 
     content: counter(annotation);
 
     content: counter(annotation);
 
     font-weight: bold;
 
     font-weight: bold;
 
@@ -548,16 +549,17 @@ pre[class*=language-] code * {
 
     padding: 0.125em 0.5em;
 
     padding: 0.125em 0.5em;
 
     vertical-align: 0.33em;
 
     vertical-align: 0.33em;
 
 }
 
 }
 
-/*main {
 
-    display: block;
 
-    counter-reset: fig;
 
-    min-height: 100vh;
 
+
 
+.code-annotated.numbered + ol {
 
+    list-style: none;
 
+    counter-reset: annotation;
 
+}
 
+
 
+.code-annotated.numbered + ol li::before {
 
+    font-size: 0.66em;
 
+    margin-right: 0.33em;
 
+    vertical-align: 0.25em;
 
 }
 
 }
 
-figcaption::before {
 
-    counter-increment: fig;
 
-    content: 'Figure ' counter(fig) ':\0020';
 
-    font-weight: bold;
 
-}*/
 
 /* file tree lists */
 
 /* file tree lists */
 
 .file-tree {
 
 .file-tree {
 
     overflow-x: auto;
 
     overflow-x: auto;

+ 1 - 1
themes/infusion/static/js/dom-scripts.js
View File 

@@ -82,7 +82,7 @@
 
 
 
 /* Enable scrolling by keyboard of code samples */
 
 /* Enable scrolling by keyboard of code samples */
 
 (function () {
 
 (function () {
 
-  var codeBlocks = document.querySelectorAll('pre, .html-annotated');
 
+  var codeBlocks = document.querySelectorAll('pre, .code-annotated');
 
 
 
   Array.prototype.forEach.call(codeBlocks, function (block) {
 
   Array.prototype.forEach.call(codeBlocks, function (block) {
 
     if (block.querySelector('code')) {
 
     if (block.querySelector('code')) {

Some files were not shown because too many files changed in this diff