首頁 探索 說明
註冊 登入
wang2365
/
cupper-hugo-theme
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

Merge pull request #15 from ThePacielloGroup/highlights

Highlights
Heydon Pickering 7 年之前
父節點
bba5718c36 fff72dff15
當前提交
2f10727182
共有 9 個文件被更改，包括 287 次插入 和 12 次删除
統一視圖 顯示文件統計
  1. 56 0
      content/patterns/coding/code-blocks.md
  2. 41 4
      docs/css/styles.css
  3. 1 1
      docs/js/dom-scripts.js
  4. 71 1
      docs/patterns/coding/code-blocks/index.html
  5. 71 1
      docs/print-version/index.html
  6. 0 0
      docs/service-worker.js
  7. 5 0
      themes/infusion/layouts/shortcodes/html.html
  8. 41 4
      themes/infusion/static/css/styles.css
  9. 1 1
      themes/infusion/static/js/dom-scripts.js

+ 56 - 0
content/patterns/coding/code-blocks.md
查看文件 

@@ -24,3 +24,59 @@ Note that the syntax highlighting uses a greyscale theme. **Infusion** is carefu
 
 {{% note %}}
 
 {{% 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.
 
 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
 
+
 
+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>}}

+ 41 - 4
docs/css/styles.css
查看文件 

@@ -65,8 +65,10 @@ figure p img {
 
 [data-expands]:focus svg,
 
 [data-expands]:focus svg,
 
 .patterns a:focus .text,
 
 .patterns a:focus .text,
 
 [for="themer"] :focus + [aria-hidden] {
 
 [for="themer"] :focus + [aria-hidden] {
 
-    outline: 3px solid #888;
 
-    outline-offset: 2px;
 
+    outline: 4px solid #999;
 
+}
 
+a {
 
+  outline-offset: 2px;
 
 }
 
 }
 
 /* fix for IE :( */
 
 /* fix for IE :( */
 
 
 
@@ -382,7 +384,7 @@ caption {
 
 }
 
 }
 
 #menu-button:focus {
 
 #menu-button:focus {
 
     outline: none;
 
     outline: none;
 
-    box-shadow: inset 0 0 0 0.25rem #888;
 
+    box-shadow: inset 0 0 0 0.25rem #999;
 
 }
 
 }
 
 /* Tables of contents */
 
 /* Tables of contents */
 
 
 
@@ -517,10 +519,45 @@ pre[class*=language-][data-line] {
 
 pre[class*=language-] code * {
 
 pre[class*=language-] code * {
 
     margin-top: 0 !important;
 
     margin-top: 0 !important;
 
 }
 
 }
 
-[data-codeblock-shortcode] {
 
+[data-codeblock-shortcode], .html-annotated code {
 
     display: inline-block;
 
     display: inline-block;
 
     margin-top: -1rem;
 
     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 lists */
 
 .file-tree {
 
 .file-tree {
 
     overflow-x: auto;
 
     overflow-x: auto;

+ 1 - 1
docs/js/dom-scripts.js
查看文件 

@@ -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');
 
+  var codeBlocks = document.querySelectorAll('pre, .html-annotated');
 
 
 
   Array.prototype.forEach.call(codeBlocks, function (block) {
 
   Array.prototype.forEach.call(codeBlocks, function (block) {
 
     if (block.querySelector('code')) {
 
     if (block.querySelector('code')) {

+ 71 - 1
docs/patterns/coding/code-blocks/index.html
查看文件 

@@ -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>
 
 <p>So, this&hellip;</p>
 
 
 
@@ -423,6 +425,74 @@
 
 </aside>
 
 </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>
 
   </main>
 
 
 
           <footer role="contentinfo">
 
           <footer role="contentinfo">

+ 71 - 1
docs/print-version/index.html
查看文件 

@@ -1678,7 +1678,9 @@ toc = false
 
               </svg>
 
               </svg>
 
               Code blocks
 
               Code blocks
 
             </h1>
 
             </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>
 
 <p>So, this&hellip;</p>
 
 
 
@@ -1707,6 +1709,74 @@ toc = false
 
 </aside>
 
 </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>
 
         
         
           <div class="pattern-section">
 
           <div class="pattern-section">

文件差異過大導致無法顯示
+ 0 - 0
docs/service-worker.js


+ 5 - 0
themes/infusion/layouts/shortcodes/html.html
查看文件 

@@ -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>

+ 41 - 4
themes/infusion/static/css/styles.css
查看文件 

@@ -65,8 +65,10 @@ figure p img {
 
 [data-expands]:focus svg,
 
 [data-expands]:focus svg,
 
 .patterns a:focus .text,
 
 .patterns a:focus .text,
 
 [for="themer"] :focus + [aria-hidden] {
 
 [for="themer"] :focus + [aria-hidden] {
 
-    outline: 3px solid #888;
 
-    outline-offset: 2px;
 
+    outline: 4px solid #999;
 
+}
 
+a {
 
+  outline-offset: 2px;
 
 }
 
 }
 
 /* fix for IE :( */
 
 /* fix for IE :( */
 
 
 
@@ -382,7 +384,7 @@ caption {
 
 }
 
 }
 
 #menu-button:focus {
 
 #menu-button:focus {
 
     outline: none;
 
     outline: none;
 
-    box-shadow: inset 0 0 0 0.25rem #888;
 
+    box-shadow: inset 0 0 0 0.25rem #999;
 
 }
 
 }
 
 /* Tables of contents */
 
 /* Tables of contents */
 
 
 
@@ -517,10 +519,45 @@ pre[class*=language-][data-line] {
 
 pre[class*=language-] code * {
 
 pre[class*=language-] code * {
 
     margin-top: 0 !important;
 
     margin-top: 0 !important;
 
 }
 
 }
 
-[data-codeblock-shortcode] {
 
+[data-codeblock-shortcode], .html-annotated code {
 
     display: inline-block;
 
     display: inline-block;
 
     margin-top: -1rem;
 
     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 lists */
 
 .file-tree {
 
 .file-tree {
 
     overflow-x: auto;
 
     overflow-x: auto;

+ 1 - 1
themes/infusion/static/js/dom-scripts.js
查看文件 

@@ -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');
 
+  var codeBlocks = document.querySelectorAll('pre, .html-annotated');
 
 
 
   Array.prototype.forEach.call(codeBlocks, function (block) {
 
   Array.prototype.forEach.call(codeBlocks, function (block) {
 
     if (block.querySelector('code')) {
 
     if (block.querySelector('code')) {

部分文件因文件數量過多而無法顯示