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

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

19
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">

19
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">

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 * {
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;