Browse Source

basic highlighting implemented

Heydon Pickering 7 years ago
parent
commit
df320adcf5

+ 11 - 0
content/patterns/coding/code-blocks.md

@@ -24,3 +24,14 @@ 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>}}
+<ul>
+  <li>Here's a thing</li>
+  <li ((role="separator"))>Here's a thing</li>
+  <li>Here's a ((thing))</li>
+  <li>Here's a thing <span ((aria-hidden="true"))></span></li>
+</ul>
+{{</html>}}

+ 43 - 1
docs/css/styles.css

@@ -517,10 +517,52 @@ 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.25rem 0.5rem;
+  border-radius: 0.5rem;
+}
+.highlight::after {
+  counter-increment: annotation;
+  content: counter(annotation);
+  font-weight: bold;
+  font-size: 0.5rem;
+  background: #111;
+  color: #fefefe;
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  line-height: 0.75rem;
+  text-align: center;
+  border-radius: 1rem;
+  vertical-align: middle;
+  margin-left: 0.25rem;
+}
+
+
+
+/*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;

+ 18 - 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,21 @@
 </aside>
 </aside>
 
 
 
 
+<h2 id="annotated">Annotated</h2>
+
+
+
+
+<div class="html-annotated"><code>
+&lt;ul&gt;
+  &lt;li&gt;Here&#39;s a thing&lt;/li&gt;
+  &lt;li <span class='highlight'>role=&#34;separator&#34;</span>&gt;Here&#39;s a thing&lt;/li&gt;
+  &lt;li&gt;Here&#39;s a <span class='highlight'>thing</span>&lt;/li&gt;
+  &lt;li&gt;Here&#39;s a thing &lt;span <span class='highlight'>aria-hidden=&#34;true&#34;</span>&gt;&lt;/span&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</code></div>
+
+
   </main>
   </main>
 
 
           <footer role="contentinfo">
           <footer role="contentinfo">

+ 18 - 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,21 @@ toc = false
 </aside>
 </aside>
 
 
 
 
+<h2 id="annotated">Annotated</h2>
+
+
+
+
+<div class="html-annotated"><code>
+&lt;ul&gt;
+  &lt;li&gt;Here&#39;s a thing&lt;/li&gt;
+  &lt;li <span class='highlight'>role=&#34;separator&#34;</span>&gt;Here&#39;s a thing&lt;/li&gt;
+  &lt;li&gt;Here&#39;s a <span class='highlight'>thing</span>&lt;/li&gt;
+  &lt;li&gt;Here&#39;s a thing &lt;span <span class='highlight'>aria-hidden=&#34;true&#34;</span>&gt;&lt;/span&gt;&lt;/li&gt;
+&lt;/ul&gt;
+</code></div>
+
+
           </div>
           </div>
         
         
           <div class="pattern-section">
           <div class="pattern-section">

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


+ 4 - 0
themes/infusion/layouts/shortcodes/html.html

@@ -0,0 +1,4 @@
+{{ $html := .Inner | htmlEscape }}
+{{ $html := replace $html "((" "<span class='highlight'>" }}
+{{ $html := replace $html "))" "</span>" }}
+<div class="html-annotated"><code>{{ $html | safeHTML }}</code></div>

+ 43 - 1
themes/infusion/static/css/styles.css

@@ -517,10 +517,52 @@ 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.25rem 0.5rem;
+  border-radius: 0.5rem;
+}
+.highlight::after {
+  counter-increment: annotation;
+  content: counter(annotation);
+  font-weight: bold;
+  font-size: 0.5rem;
+  background: #111;
+  color: #fefefe;
+  display: inline-block;
+  width: 0.75rem;
+  height: 0.75rem;
+  line-height: 0.75rem;
+  text-align: center;
+  border-radius: 1rem;
+  vertical-align: middle;
+  margin-left: 0.25rem;
+}
+
+
+
+/*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;

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