From 611e43b519f3550a1bfed24d508fdfeb44f4ae74 Mon Sep 17 00:00:00 2001 From: Heydon Pickering Date: Mon, 18 Sep 2017 13:54:44 +0100 Subject: [PATCH] removed line numbering --- content/patterns/coding/code-blocks.md | 26 ------- docs/patterns/coding/code-blocks/index.html | 34 +------- .../patterns/coding/color-palettes/index.html | 2 +- docs/patterns/coding/command-line/index.html | 2 +- .../patterns/coding/demo-embedding/index.html | 6 +- docs/patterns/coding/file-trees/index.html | 2 +- docs/patterns/coding/tested/index.html | 2 +- .../coding/writing-inline-demos/index.html | 6 +- .../media/including-images/index.html | 2 +- .../media/including-videos/index.html | 2 +- docs/patterns/setup/index.html | 2 +- .../writing/expandable-sections/index.html | 4 +- .../writing/notes-and-warnings/index.html | 4 +- docs/patterns/writing/references/index.html | 8 +- docs/patterns/writing/snippets/index.html | 2 +- docs/print-version/index.html | 78 ++++++------------- docs/service-worker.js | 2 +- .../layouts/shortcodes/codeBlock.html | 2 +- 18 files changed, 50 insertions(+), 136 deletions(-) diff --git a/content/patterns/coding/code-blocks.md b/content/patterns/coding/code-blocks.md index 7cc4fee..98abc2a 100644 --- a/content/patterns/coding/code-blocks.md +++ b/content/patterns/coding/code-blocks.md @@ -21,32 +21,6 @@ So, this… Note that the syntax highlighting uses a greyscale theme. **Infusion** is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed. -## Line-numbered code blocks - -In addition to the basic markdown support, **Infusion** provides a mechanism to display code blocks with line numbers. This is via the `codeBlock` shortcode. Here is the code for a block of JavaScript with line numbers: - -{{}} -{{<codeBlock lang="js" numbered="true">}} -var toggle = demo.querySelector('[aria-pressed]'); - -toggle.addEventListener('click', (e) => { - let pressed = e.target.getAttribute('aria-pressed') === 'true'; - e.target.setAttribute('aria-pressed', !pressed); -}); -{{</codeBlock>}} -{{}} - -The output will look like the following. Now you can refer to particular bits of the code by line number, like the arrow function on line `3`. - -{{}} -var toggle = demo.querySelector('[aria-pressed]'); - -toggle.addEventListener('click', (e) => { - let pressed = e.target.getAttribute('aria-pressed') === 'true'; - e.target.setAttribute('aria-pressed', !pressed); -}); -{{}} - {{% 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 %}} diff --git a/docs/patterns/coding/code-blocks/index.html b/docs/patterns/coding/code-blocks/index.html index e74a38a..252bbd6 100644 --- a/docs/patterns/coding/code-blocks/index.html +++ b/docs/patterns/coding/code-blocks/index.html @@ -394,13 +394,11 @@ - - -

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…

-

+

 ```html
 <button aria-pressed="false">toggle me</button>
 ```
@@ -414,34 +412,6 @@
 
 
Note that the syntax highlighting uses a greyscale theme. Infusion is careful not to use color as part of its own design, because these colors may clash with those of the design being illustrated and discussed.

 
-
Line-numbered code blocks

-
-
In addition to the basic markdown support, Infusion provides a mechanism to display code blocks with line numbers. This is via the codeBlock shortcode. Here is the code for a block of JavaScript with line numbers:

-
-

-{{<codeBlock lang="js" numbered="true">}}
-var toggle = demo.querySelector('[aria-pressed]');
-
-toggle.addEventListener('click', (e) => {  
-  let pressed = e.target.getAttribute('aria-pressed') === 'true';
-  e.target.setAttribute('aria-pressed', !pressed);
-});
-{{</codeBlock>}}
-

-
-
-
The output will look like the following. Now you can refer to particular bits of the code by line number, like the arrow function on line 3.

-
-

-var toggle = demo.querySelector('[aria-pressed]');
-
-toggle.addEventListener('click', (e) => {  
-  let pressed = e.target.getAttribute('aria-pressed') === 'true';
-  e.target.setAttribute('aria-pressed', !pressed);
-});
-

-
-