basic highlighting implemented

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

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

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;

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

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

File diff suppressed because one or more lines are too long

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>

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;