hugopoi
/
cupper-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #15 from ThePacielloGroup/highlights 

Highlights
This commit is contained in:
Heydon Pickering 2017-10-07 12:29:06 +01:00 committed by GitHub
parent bba5718c36 fff72dff15
commit 2f10727182
9 changed files with 288 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
content/patterns/coding/code-blocks.md
View File

@ -24,3 +24,59 @@ Note that the syntax highlighting uses a greyscale theme. **Infusion** is carefu
{{% 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 %}}
## Annotated HTML
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:
{{<html>}}
<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>
<button>Okay</button>
<button>Cancel</button>
</div>
{{</html>}}
You mark out the highlighted areas with double parentheses like so:
{{<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>
&lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
&lt;button>Okay&lt;/button>
&lt;button>Cancel&lt;/button>
&lt;/div>
&#x7b;{&lt;/html>}}
{{</codeBlock>}}
Better still, if you include `numbered="true"`, each highlight is enumberated so you can reference it directly in the ensuing text.
{{<html 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>
<button>Okay</button>
<button>Cancel</button>
</div>
{{</html>}}
You just include `numbered="true"` on the opening shortcode tag:
{{<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>
&lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
&lt;button>Okay&lt;/button>
&lt;button>Cancel&lt;/button>
&lt;/div>
&#x7b;{&lt;/html>}}
{{</codeBlock>}}

45
docs/css/styles.css
View File

@ -65,8 +65,10 @@ figure p img {
[data-expands]:focus svg,
.patterns a:focus .text,
[for="themer"] :focus + [aria-hidden] {
outline: 3px solid #888;
outline-offset: 2px;
outline: 4px solid #999;
}
a {
outline-offset: 2px;
}
/* fix for IE :( */
@ -382,7 +384,7 @@ caption {
}
#menu-button:focus {
outline: none;
box-shadow: inset 0 0 0 0.25rem #888;
box-shadow: inset 0 0 0 0.25rem #999;
}
/* Tables of contents */
@ -517,10 +519,45 @@ pre[class*=language-][data-line] {
pre[class*=language-] code * {
margin-top: 0 !important;
}
[data-codeblock-shortcode] {
[data-codeblock-shortcode], .html-annotated code {
display: inline-block;
margin-top: -1rem;
}
.html-annotated {
overflow-y: hidden;
overflow-x: auto;
padding: 1.5rem;
border: 1px solid;
white-space: pre;
counter-reset: annotation;
}
.highlight {
background: #ddd;
padding: 0.0625rem 0.33rem;
border-radius: 0.5rem;
}
.numbered .highlight::after {
counter-increment: annotation;
content: counter(annotation);
font-weight: bold;
font-size: 0.5rem;
background: #111;
color: #fefefe;
border-radius: 1rem;
margin-left: 0.25rem;
padding: 0.125em 0.5em;
vertical-align: 0.33em;
}
/*main {
display: block;
counter-reset: fig;
min-height: 100vh;
}
figcaption::before {
counter-increment: fig;
content: 'Figure ' counter(fig) ':\0020';
font-weight: bold;
}*/
/* file tree lists */
.file-tree {
overflow-x: auto;

2
docs/js/dom-scripts.js
View File

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

72
docs/patterns/coding/code-blocks/index.html
View File

@ -394,7 +394,9 @@
<p>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. <strong>Infusion</strong> will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.</p>
<p>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. <strong>Infusion</strong> will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.</p>
<p>So, this&hellip;</p>
@ -423,6 +425,74 @@
</aside>
<h2 id="annotated-html">Annotated HTML</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>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>
&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;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
&lt;p&gt;Press &lt;strong&gt;Okay&lt;/strong&gt; to confirm or &lt;strong&gt;Cancel&lt;/strong&gt;&lt;/p&gt;
&lt;button&gt;Okay&lt;/button&gt;
&lt;button&gt;Cancel&lt;/button&gt;
&lt;/div&gt;
</code></div>
<p>You mark out the highlighted areas with double parentheses like so:</p>
<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>
&lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
&lt;button>Okay&lt;/button>
&lt;button>Cancel&lt;/button>
&lt;/div>
&#x7b;{&lt;/html>}}
</code></pre>
<p>Better still, if you include <code>numbered=&quot;true&quot;</code>, each highlight is enumberated so you can reference it directly in the ensuing text.</p>
<div class="html-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;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;p&gt;Press &lt;strong&gt;Okay&lt;/strong&gt; to confirm or &lt;strong&gt;Cancel&lt;/strong&gt;&lt;/p&gt;
&lt;button&gt;Okay&lt;/button&gt;
&lt;button&gt;Cancel&lt;/button&gt;
&lt;/div&gt;
</code></div>
<p>You just include <code>numbered=&quot;true&quot;</code> on the opening shortcode tag:</p>
<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>
&lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
&lt;button>Okay&lt;/button>
&lt;button>Cancel&lt;/button>
&lt;/div>
&#x7b;{&lt;/html>}}
</code></pre>
</main>
<footer role="contentinfo">

72
docs/print-version/index.html
View File

@ -1678,7 +1678,9 @@ toc = false
</svg>
Code blocks
</h1>
<p>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. <strong>Infusion</strong> will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.</p>
<p>Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. <strong>Infusion</strong> will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.</p>
<p>So, this&hellip;</p>
@ -1707,6 +1709,74 @@ toc = false
</aside>
<h2 id="annotated-html">Annotated HTML</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>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>
&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;h2 <span class='highlight'>id=&#34;dialog-heading&#34;</span>&gt;Confirmation&lt;/h2&gt;
&lt;p&gt;Press &lt;strong&gt;Okay&lt;/strong&gt; to confirm or &lt;strong&gt;Cancel&lt;/strong&gt;&lt;/p&gt;
&lt;button&gt;Okay&lt;/button&gt;
&lt;button&gt;Cancel&lt;/button&gt;
&lt;/div&gt;
</code></div>
<p>You mark out the highlighted areas with double parentheses like so:</p>
<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>
&lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
&lt;button>Okay&lt;/button>
&lt;button>Cancel&lt;/button>
&lt;/div>
&#x7b;{&lt;/html>}}
</code></pre>
<p>Better still, if you include <code>numbered=&quot;true&quot;</code>, each highlight is enumberated so you can reference it directly in the ensuing text.</p>
<div class="html-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;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;p&gt;Press &lt;strong&gt;Okay&lt;/strong&gt; to confirm or &lt;strong&gt;Cancel&lt;/strong&gt;&lt;/p&gt;
&lt;button&gt;Okay&lt;/button&gt;
&lt;button&gt;Cancel&lt;/button&gt;
&lt;/div&gt;
</code></div>
<p>You just include <code>numbered=&quot;true&quot;</code> on the opening shortcode tag:</p>
<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>
&lt;p>Press <strong>Okay</strong> to confirm or <strong>Cancel</strong>&lt;/p>
&lt;button>Okay&lt;/button>
&lt;button>Cancel&lt;/button>
&lt;/div>
&#x7b;{&lt;/html>}}
</code></pre>
</div>
<div class="pattern-section">

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

5
themes/infusion/layouts/shortcodes/html.html Normal file
View File

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

45
themes/infusion/static/css/styles.css
View File

@ -65,8 +65,10 @@ figure p img {
[data-expands]:focus svg,
.patterns a:focus .text,
[for="themer"] :focus + [aria-hidden] {
outline: 3px solid #888;
outline-offset: 2px;
outline: 4px solid #999;
}
a {
outline-offset: 2px;
}
/* fix for IE :( */
@ -382,7 +384,7 @@ caption {
}
#menu-button:focus {
outline: none;
box-shadow: inset 0 0 0 0.25rem #888;
box-shadow: inset 0 0 0 0.25rem #999;
}
/* Tables of contents */
@ -517,10 +519,45 @@ pre[class*=language-][data-line] {
pre[class*=language-] code * {
margin-top: 0 !important;
}
[data-codeblock-shortcode] {
[data-codeblock-shortcode], .html-annotated code {
display: inline-block;
margin-top: -1rem;
}
.html-annotated {
overflow-y: hidden;
overflow-x: auto;
padding: 1.5rem;
border: 1px solid;
white-space: pre;
counter-reset: annotation;
}
.highlight {
background: #ddd;
padding: 0.0625rem 0.33rem;
border-radius: 0.5rem;
}
.numbered .highlight::after {
counter-increment: annotation;
content: counter(annotation);
font-weight: bold;
font-size: 0.5rem;
background: #111;
color: #fefefe;
border-radius: 1rem;
margin-left: 0.25rem;
padding: 0.125em 0.5em;
vertical-align: 0.33em;
}
/*main {
display: block;
counter-reset: fig;
min-height: 100vh;
}
figcaption::before {
counter-increment: fig;
content: 'Figure ' counter(fig) ':\0020';
font-weight: bold;
}*/
/* file tree lists */
.file-tree {
overflow-x: auto;

2
themes/infusion/static/js/dom-scripts.js
View File

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