From df320adcf557068e8621934a6c2b7ea71f36785b Mon Sep 17 00:00:00 2001 From: Heydon Pickering Date: Sat, 7 Oct 2017 10:36:18 +0100 Subject: [PATCH] basic highlighting implemented --- content/patterns/coding/code-blocks.md | 11 +++++ docs/css/styles.css | 44 +++++++++++++++++++- docs/patterns/coding/code-blocks/index.html | 19 ++++++++- docs/print-version/index.html | 19 ++++++++- docs/service-worker.js | 2 +- themes/infusion/layouts/shortcodes/html.html | 4 ++ themes/infusion/static/css/styles.css | 44 +++++++++++++++++++- 7 files changed, 138 insertions(+), 5 deletions(-) create mode 100644 themes/infusion/layouts/shortcodes/html.html diff --git a/content/patterns/coding/code-blocks.md b/content/patterns/coding/code-blocks.md index 98abc2a..32efc34 100644 --- a/content/patterns/coding/code-blocks.md +++ b/content/patterns/coding/code-blocks.md @@ -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 + +{{}} + +{{}} diff --git a/docs/css/styles.css b/docs/css/styles.css index b0560ea..5fb8c78 100644 --- a/docs/css/styles.css +++ b/docs/css/styles.css @@ -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; diff --git a/docs/patterns/coding/code-blocks/index.html b/docs/patterns/coding/code-blocks/index.html index 11fdf18..1c7d0f0 100644 --- a/docs/patterns/coding/code-blocks/index.html +++ b/docs/patterns/coding/code-blocks/index.html @@ -394,7 +394,9 @@ -

Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.

+ + +

Markdown already supports code samples both inline (using single backticks like `some code here`) and in blocks. Infusion will syntax highlight HTML, CSS, and JavaScript if you provide the correct language in the formulation of the block.

So, this…

@@ -423,6 +425,21 @@ +

Annotated

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