basic highlighting implemented
This commit is contained in:
Heydon Pickering
parent
bba5718c36
commit
df320adcf5
|
|
@ -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>}}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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…</p>
|
<p>So, this…</p>
|
||||||
|
|
||||||
|
|
@ -423,6 +425,21 @@
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="annotated">Annotated</h2>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="html-annotated"><code>
|
||||||
|
<ul>
|
||||||
|
<li>Here's a thing</li>
|
||||||
|
<li <span class='highlight'>role="separator"</span>>Here's a thing</li>
|
||||||
|
<li>Here's a <span class='highlight'>thing</span></li>
|
||||||
|
<li>Here's a thing <span <span class='highlight'>aria-hidden="true"</span>></span></li>
|
||||||
|
</ul>
|
||||||
|
</code></div>
|
||||||
|
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer role="contentinfo">
|
<footer role="contentinfo">
|
||||||
|
|
|
||||||
|
|
@ -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…</p>
|
<p>So, this…</p>
|
||||||
|
|
||||||
|
|
@ -1707,6 +1709,21 @@ toc = false
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="annotated">Annotated</h2>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="html-annotated"><code>
|
||||||
|
<ul>
|
||||||
|
<li>Here's a thing</li>
|
||||||
|
<li <span class='highlight'>role="separator"</span>>Here's a thing</li>
|
||||||
|
<li>Here's a <span class='highlight'>thing</span></li>
|
||||||
|
<li>Here's a thing <span <span class='highlight'>aria-hidden="true"</span>></span></li>
|
||||||
|
</ul>
|
||||||
|
</code></div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pattern-section">
|
<div class="pattern-section">
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue