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

basic highlighting implemented

Browse Source
This commit is contained in:
Heydon Pickering 2017-10-07 10:36:18 +01:00
parent bba5718c36
commit df320adcf5
7 changed files with 138 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
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 %}} {{% 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>}}

44
docs/css/styles.css
View File

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

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

@ -394,6 +394,8 @@
<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">

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

@ -1678,6 +1678,8 @@ 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">

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

4
themes/infusion/layouts/shortcodes/html.html Normal file
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>

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

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