Add missing hljs class overrides + build check

Author: kfranqueiro

11ty/CustomLiquid.ts

@@ -153,6 +153,22 @@ export class CustomLiquid extends Liquid {
       // Add charset to pages that forgot it
       if (!$("meta[charset]").length) $('<meta charset="UTF-8">').prependTo("head");
 
+      const $missingHljsOverrides = $("pre code:not([class])");
+      if ($missingHljsOverrides.length) {
+        $missingHljsOverrides.each((_, el) => {
+          const code = $(el).html()!.replace(/\n/g, "\\n");
+          const excerpt = `${code.slice(0, 40)}${code.length > 40 ? "..." : ""}`;
+          console.log(
+            `${filepath} missing "language-*" or "no-highlight" class on <pre><code> starting with ${excerpt}`
+          );
+        });
+        if (process.env.ELEVENTY_RUN_MODE === "build") {
+          throw new Error(
+            "Please ensure all code blocks have a highlight.js class (language-* or no-highlight)."
+          );
+        }
+      }
+
       const prependedIncludes = ["header"];
       const appendedIncludes = ["wai-site-footer", "site-footer"];
 

techniques/aria/ARIA24.html

@@ -79,7 +79,7 @@ <h5><strong>- Instead of... -</strong></h5>
 			</section>
          	<section>
             <h5><strong>- Do... -</strong></h5>
-            <pre xml:space="preserve"><code>&lt;p&gt;
+            <pre><code class="language-html">&lt;p&gt;
   &lt;span class=&quot;icon icon-star-bg&quot; role=&quot;img&quot; aria-label=&quot;Favorite&quot;&gt;&lt;/span&gt;
 &lt;/p&gt;</code></pre>
          	</section>

techniques/client-side-script/SCR37.html

@@ -22,7 +22,7 @@ <h3>An options button that opens a dialog</h3>
             <p>The triggering element is a button and the script is triggered from the onclick event. This sends the appropriate events to the operating system so that assistive technology is aware of the change in the DOM. </p>
             <p>In this example, the Submit and Reset buttons inside the dialog simply hide the <code>div</code>. </p>
 
-         <pre><code>...
+         <pre><code class="language-html">...
 &lt;button onclick="TogglePopup(event,true)"
   name="pop0001"&gt;Options&lt;/button&gt;
 
@@ -46,7 +46,7 @@ <h3>An options button that opens a dialog</h3>
 
             <p>The <code>div</code>, heading and <code>form</code> elements are styled with CSS to look like a dialog. </p>
 
-         <pre><code>...
+         <pre><code class="language-css">...
 a { color:blue; }
 a.clickPopup img { border:none; width:0; }
 
@@ -63,7 +63,7 @@ <h3>An options button that opens a dialog</h3>
 
             <p>The script toggles the display of the popup <code>div</code>, showing it and hiding it. </p>
 
-         <pre><code>...
+         <pre><code class="language-javascript">...
 function TogglePopup(evt,show) {
   HarmonizeEvent(evt);
   var src = evt.target;

techniques/css/C15.html

@@ -48,7 +48,7 @@ <h3>Link elements</h3>
 				<h3>Highlighting elements that receive focus</h3>
 				<p>In this example, the :focus pseudo-class is used to change the style applied to input fields when they receive focus by changing the background color.</p>
 
-<pre xml:space="preserve"><code class="language-">&lt;!doctype html&gt;
+<pre><code class="language-html">&lt;!doctype html&gt;
 &lt;html lang="en"&gt;
   &lt;head&gt;
     &lt;style&gt;

techniques/css/C43.html

@@ -30,7 +30,7 @@ <h3>Using CSS <code>scroll-padding</code> to un-obscure content</h3>
           <p>This example demonstrates a technique to un-obscure content underneath a fixed-position banner. To prevent the page becoming unusable at smaller screen sizes, the banner becomes un-fixed. To observe the <code>scroll-padding</code> effect you will need to use a viewport over 800px wide.</p>
         </aside>
 				<p>Working example: <a href="../../working-examples/css-padding-focus-not-obscured/">Using CSS <code>scroll-padding</code> to un-obscure content</a>.</p>
-<pre xml:space="preserve"><code>&lt;!doctype html&gt;
+<pre><code class="language-html">&lt;!doctype html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
   &lt;meta charset="utf-8"&gt;

techniques/css/C45.html

@@ -36,7 +36,7 @@ <h3>Using <abbr title="Cascading Style Sheets">CSS</abbr> <code>:focus-visible</
         <p>By default, in all modern browsers, this button does not show any focus indication when activated using a mouse/pointer. Browsers show their default focus outline/indication when a user sets focus on the button using <kbd>Tab</kbd>.</p>
         <p>In order to make this focus indication more prominent, we use the <code>:focus-visible</code> pseudo-class selector to define a more intentional and pronounced focus style.</p>
 				<p>Working example: <a href="../../working-examples/css-focus-visible/">Using CSS <code>:focus-visible</code> to provide keyboard focus indication</a>.</p>
-<pre><code>&lt;!DOCTYPE html&gt;
+<pre><code class="language-html">&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
   &lt;meta charset="utf-8"&gt;

techniques/css/C8.html

@@ -27,7 +27,7 @@ <h3>Increasing the spacing between characters in a word</h3>
 
 			<section id="the-css">
 			<h4>The CSS</h4>
-<pre><code>h2 {
+<pre><code class="language-css">h2 {
   letter-spacing: 1em;
 }</code></pre>
 </section>

techniques/failures/F111.html

@@ -30,7 +30,7 @@ <h2>Examples</h2>
       <section class="example">
 				<h3>A text input with a visible label, but without an accessible name</h3>
 				<p>The text input is preceded by a visible text label "Enter name", but the text is not marked up as a <code>&lt;label&gt;</code> for the input, and there is no alternative way (e.g., <code>aria-label</code>) to provide the input with an accessible name at all.</p>
-				<pre><code>
+				<pre><code class="language-html">
 					&lt;p&gt;Enter name&lt;/p&gt;
 					&lt;input type="text"&gt;
         </code></pre>
@@ -39,7 +39,7 @@ <h3>A text input with a visible label, but without an accessible name</h3>
 			<section class="example">
 				<h3>A text input with a visible label and aria-labelledby pointing to a non-existent id</h3>
 				<p>The text input is preceded by a visible text label "Enter name". The text's container has an <code>id</code> of <code>nameEntry</code>, but the input has an <code>aria-labelledby</code> referencing a non-existent <code>name-entry</code> <code>id</code>. As a result, the input lacks an accessible name altogether.</p>
-				<pre><code>
+				<pre><code class="language-html">
 					&lt;p id="nameEntry"&gt;Enter name&lt;/p&gt;
 					&lt;input type="text" aria-labelledby="name-entry" &gt;
         </code></pre>

techniques/failures/F71.html

@@ -12,14 +12,14 @@ <h3>Characters </h3>
 
             <p>The following word looks, in browsers with appropriate font support, like the English word "cook", yet is composed of the string <code>U+03f2 U+043E U+03BF U+006B</code>, only one of which is a letter from the Western alphabet. This word will not be processed meaningfully, and a text alternative is not provided.</p>
 
-         <pre xml:space="preserve"><code>ϲоοk</code></pre>
+         <pre>ϲоοk</pre>
       </section>
       <section class="example">
          <h3>Character entities</h3>
 
             <p>The following example, like its predecessor, will look like the English word "cook" when rendered in browsers with appropriate font support. In this case, the characters are implemented with character entities, but the word will still not be processed meaningfully, and a text alternative is not provided.</p>
 
-         <pre xml:space="preserve"><code>&amp;#x03F2;&amp;#x043E;&amp;#x03BF;&amp;#x006B;</code></pre>
+         <pre><code class="language-html">&amp;#x03F2;&amp;#x043E;&amp;#x03BF;&amp;#x006B;</code></pre>
 
             <p>Working Example: "ϲоοk"</p>
 

techniques/general/G224.html

@@ -24,7 +24,7 @@ <h2>Examples</h2>
       <section class="example">
         <p>A website conveys information in a nested list format. The understandability of the list hierarchy is supported by the indentation of the list content. While it is important for the individual list item text to reflow, the list hierarchy would suffer if flattened so that all content would fit within a 320 CSS pixel wide viewport.</p>  
         <p>The following example list contains additional nested lists to provide more context for each of the parent list item's text. To maintain the visual hierarchy, the indentation of each list level remains present, but modified once an author defined CSS breakpoint is met. Additional styles are set for different breakpoints to mitigate against the potential for content to extend beyond a 320px wide viewport, while accounting for visual spacing against the borders of the viewport, to attempt to make the content not feel cramped. At the smallest breakpoint, the content of list items receive a minimum width to mitigate against potentially "squished" content lists with many nested levels. At this breakpoint, each nested list level can be horizontally scrolled into view, and once a nested list is visible within the viewport, only vertical scrolling will be necessary to read the content of the nested list's items.</p>
-<pre><code>
+<pre><code class="language-html">
 &lt;div class="example">
 	&lt;ul>
 		&lt;li>
@@ -56,7 +56,7 @@ <h2>Examples</h2>
 	&lt;/ul>
 &lt;/div>
 </code></pre>
-<pre><code>
+<pre><code class="language-css">
 *, *::before, *::after {
     box-sizing: border-box;
 }
@@ -92,7 +92,7 @@ <h2>Examples</h2>
         <p>As a user zooms in the web page, the CSS of the indentation can be adjusted to maintain this necessary structure, while also allowing more text to be visible on a single line.</p>
 
         <p>The following represents a Python code example. The indentation of each line of text is necessary to create a group of statements that are executed as a block.</p>
-<pre><code>
+<pre><code class="language-python">
 def complex_function(x):
     if x > 0:
         for i in range(x):
@@ -114,7 +114,7 @@ <h2>Examples</h2>
         print("x is not a positive number")
 </code></pre>
         <p>The following code example demonstrates the use of indentation to convey the nesting of elements in an HTML document:</p>
-<pre><code>
+<pre><code class="language-html">
 &lt;html lang=en>
 	&lt;head>...&lt;/head>
 	&lt;body>
@@ -125,7 +125,7 @@ <h2>Examples</h2>
 &lt;/html>
 </code></pre>     
         <p>The indentation of code blocks like these could be adjusted at different viewport sizes, via a CSS Media Query.</p>
-<pre><code>
+<pre><code class="language-css">
 @media screen and ( min-width: 320px ) {
 	pre {
 		tab-size: 8px;