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

basic highlighting implemented

Heydon Pickering 7 years ago
parent
bba5718c36
commit
df320adcf5
7 changed files with 137 additions and 4 deletions
Split View Show Diff Stats
  1. 11 0
      content/patterns/coding/code-blocks.md
  2. 43 1
      docs/css/styles.css
  3. 18 1
      docs/patterns/coding/code-blocks/index.html
  4. 18 1
      docs/print-version/index.html
  5. 0 0
      docs/service-worker.js
  6. 4 0
      themes/infusion/layouts/shortcodes/html.html
  7. 43 1
      themes/infusion/static/css/styles.css

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

@@ -24,3 +24,14 @@ 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>}}
 
+<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
View File 

@@ -517,10 +517,52 @@ 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.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 {
 
     overflow-x: auto;

+ 18 - 1
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,21 @@
 
 </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>
 
 
           <footer role="contentinfo">

+ 18 - 1
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,21 @@ toc = false
 
 </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 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
View File 

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

@@ -517,10 +517,52 @@ 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.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 {
 
     overflow-x: auto;

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