hugopoi/cupper-hugo-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

removed line numbering

Browse Source
This commit is contained in:
Heydon Pickering 2017-09-18 13:54:44 +01:00
parent 95fca7142f
commit 611e43b519
18 changed files with 50 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
content/patterns/coding/code-blocks.md
View File

@ -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>}}
&#x7b;{&lt;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);
});
&#x7b;{&lt;/codeBlock>}}
{{</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`.
{{<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>}}
{{% 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 %}}

30
docs/patterns/coding/code-blocks/index.html
View File

@ -394,8 +394,6 @@
<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>
@ -414,34 +412,6 @@
<p>Note that the syntax highlighting uses a greyscale theme. <strong>Infusion</strong> 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.</p>
<h2 id="line-numbered-code-blocks">Line-numbered code blocks</h2>
<p>In addition to the basic markdown support, <strong>Infusion</strong> provides a mechanism to display code blocks with line numbers. This is via the <code>codeBlock</code> shortcode. Here is the code for a block of JavaScript with line numbers:</p>
<pre class=" "><code data-codeblock-shortcode>
&#x7b;{&lt;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);
});
&#x7b;{&lt;/codeBlock>}}
</code></pre>
<p>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 <code>3</code>.</p>
<pre class="language-js line-numbers"><code class="language-js" data-codeblock-shortcode>
var toggle = demo.querySelector('[aria-pressed]');
toggle.addEventListener('click', (e) => {
let pressed = e.target.getAttribute('aria-pressed') === 'true';
e.target.setAttribute('aria-pressed', !pressed);
});
</code></pre>
<aside aria-label="note" class="note">
<div>
<svg class="sign" aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">

2
docs/patterns/setup/index.html
View File

@ -453,7 +453,7 @@
<p>You&rsquo;ll also want to name your project and configure one or two other things in the <code>config.toml</code> file that&rsquo;s found at the root of your project. Here&rsquo;s how that file looks:</p>
<pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode>
<pre class="language-html"><code class="language-html" data-codeblock-shortcode>
languageCode = "en-us"
title = "Infusion"
baseURL = "https://thepaciellogroup.github.io/infusion/"

32
docs/print-version/index.html
View File

@ -492,7 +492,7 @@
<p>You&rsquo;ll also want to name your project and configure one or two other things in the <code>config.toml</code> file that&rsquo;s found at the root of your project. Here&rsquo;s how that file looks:</p>
<pre class="language-html line-numbers"><code class="language-html" data-codeblock-shortcode>
<pre class="language-html"><code class="language-html" data-codeblock-shortcode>
languageCode = "en-us"
title = "Infusion"
baseURL = "https://thepaciellogroup.github.io/infusion/"
@ -1667,8 +1667,6 @@ 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>So, this&hellip;</p>
@ -1687,34 +1685,6 @@ toc = false
<p>Note that the syntax highlighting uses a greyscale theme. <strong>Infusion</strong> 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.</p>
<h2 id="line-numbered-code-blocks">Line-numbered code blocks</h2>
<p>In addition to the basic markdown support, <strong>Infusion</strong> provides a mechanism to display code blocks with line numbers. This is via the <code>codeBlock</code> shortcode. Here is the code for a block of JavaScript with line numbers:</p>
<pre class=" "><code data-codeblock-shortcode>
&#x7b;{&lt;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);
});
&#x7b;{&lt;/codeBlock>}}
</code></pre>
<p>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 <code>3</code>.</p>
<pre class="language-js line-numbers"><code class="language-js" data-codeblock-shortcode>
var toggle = demo.querySelector('[aria-pressed]');
toggle.addEventListener('click', (e) => {
let pressed = e.target.getAttribute('aria-pressed') === 'true';
e.target.setAttribute('aria-pressed', !pressed);
});
</code></pre>
<aside aria-label="note" class="note">
<div>
<svg class="sign" aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">

2
docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

2
themes/infusion/layouts/shortcodes/codeBlock.html
View File

@ -1 +1 @@
<pre class="{{ with .Get "lang" }}language-{{ . }}{{ end }} {{ with .Get "numbered" }}line-numbers{{ end }}"><code {{ with .Get "lang" }}class="language-{{ . }}"{{ end }} data-codeblock-shortcode>{{ .Inner }}</code></pre>
<pre class="{{ with .Get "lang" }}language-{{ . }}{{ end }}"><code {{ with .Get "lang" }}class="language-{{ . }}"{{ end }} data-codeblock-shortcode>{{ .Inner }}</code></pre>