highlight.js: Add missing overrides, update version, and run at build time

11ty/CustomLiquid.ts

@@ -1,3 +1,4 @@
+import hljs from "highlight.js";
 import { Liquid, type Template } from "liquidjs";
 import type { LiquidOptions, RenderOptions } from "liquidjs/dist/liquid-options";
 import compact from "lodash-es/compact";
@@ -153,6 +154,31 @@ 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)."
+          );
+        }
+      }
+
+      $("pre code[class*='language-']").each((_, el) => {
+        const $el = $(el);
+        // Unescape any HTML entities (which were originally needed for client-side highlight.js)
+        const code = $el.html()!.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&");
+        const language = $el.attr("class")!.replace(/^.*language-(\S+).*$/, "$1");
+        $el.html(hljs.highlight(code, { language }).value);
+        $el.addClass("hljs");
+      });
+
       const prependedIncludes = ["header"];
       const appendedIncludes = ["wai-site-footer", "site-footer"];
 

_includes/waiscript.html

@@ -1,8 +1,5 @@
-{% if isTechniques %}{% assign hljsPath = "../" %}{% endif %}
-<link rel="stylesheet" href="{{ hljsPath }}a11y-light.css">
-<script src="{{ hljsPath }}highlight.min.js"></script>
+<link rel="stylesheet" href="{% if isTechniques %}../{% endif %}a11y-light.css">
 <script>
-  hljs.highlightAll();
-  var translationStrings = {}; /* fix WAI JS */
+  var translationStrings = {}; // prevent errors in WAI main.js t() calls
 </script>
 <script src="https://www.w3.org/WAI/assets/scripts/main.js"></script>

eleventy.config.ts

@@ -193,7 +193,6 @@ export default async function (eleventyConfig: any) {
   eleventyConfig.addPassthroughCopy({
     "css/base.css": "techniques/base.css",
     "css/a11y-light.css": "techniques/a11y-light.css",
-    "script/highlight.min.js": "techniques/highlight.min.js",
   });
 
   eleventyConfig.addPassthroughCopy("understanding/*.css");
@@ -225,10 +224,6 @@ export default async function (eleventyConfig: any) {
       join(dir.input, "css", "a11y-light.css"),
       join(dir.output, "understanding", "a11y-light.css")
     );
-    await copyFile(
-      join(dir.input, "script", "highlight.min.js"),
-      join(dir.output, "understanding", "highlight.min.js")
-    );
 
     // Output guidelines/index.html and dependencies for PR runs (not for GH Pages or W3C site)
     const sha = process.env.COMMIT_REF; // Read environment variable exposed by Netlify

package.json

@@ -22,6 +22,7 @@
     "cheerio": "^1.0.0",
     "glob": "^10.3.16",
     "gray-matter": "^4.0.3",
+    "highlight.js": "^11.11.1",
     "liquidjs": "^10.21.0",
     "lodash-es": "^4.17.21",
     "mkdirp": "^3.0.1",

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;

techniques/general/G91.html

@@ -23,7 +23,7 @@ <h2>Description</h2>
 		<h2>Examples</h2>
 		<section class="example">
 			<h3>Describing the purpose of a link in <abbr title="HyperText Markup Language">HTML</abbr> in the text content of the <code>a</code> element</h3>
-<pre xml:space="preserve"><code class="language-">&lt;a href="routes.html"&gt;Current routes at Boulders Climbing Gym&lt;/a&gt;</code></pre>
+<pre><code class="language-html">&lt;a href="routes.html"&gt;Current routes at Boulders Climbing Gym&lt;/a&gt;</code></pre>
 		</section>
 	</section>
 	<section id="tests">

techniques/html/H35.html

@@ -16,7 +16,7 @@
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>An applet to play the tic-tac-toe game. </h3>
-         <pre><code>&lt;applet code="tictactoe.class" width="250" height="250" alt="tic-tac-toe game"&gt;
+         <pre><code class="language-html">&lt;applet code="tictactoe.class" width="250" height="250" alt="tic-tac-toe game"&gt;
    tic-tac-toe game
 &lt;/applet&gt;</code></pre>
       </section>

techniques/html/H4.html

@@ -34,7 +34,7 @@
                   <code>tabindex</code> attributes of the input fields are used to specify a tab
                 order that navigates column by column.</p>
 
-         <pre><code>&lt;form action="#" method="post"&gt;
+         <pre><code class="language-html">&lt;form action="#" method="post"&gt;
  &lt;table summary="the first column contains the search criteria 
   of the groom, the second column the search criteria of 
   of the bride"&gt;
@@ -89,7 +89,7 @@
                 a different number for each element. Then it is easy to rearrange those elements or
                 add new elements and maintain a logical tab order.</p>
 
-         <pre><code>&lt;a href="xxx" tabindex = "1"&gt;First link in list&lt;/a&gt;
+         <pre><code class="language-html">&lt;a href="xxx" tabindex = "1"&gt;First link in list&lt;/a&gt;
 &lt;a href="xxx" tabindex = "1"&gt;Second link in list&lt;/a&gt;
 &lt;a href="xxx" tabindex = "1"&gt;Link that was added long 
   after the original list was created&lt;/a&gt;

techniques/html/H45.html

@@ -18,11 +18,11 @@
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>Using longdesc to refer to a long description contained on a separate resource.</h3>
-         <pre><code>&lt;p&gt;&lt;img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/&gt;&lt;/p&gt;</code></pre>
+         <pre><code class="language-html">&lt;p&gt;&lt;img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/&gt;&lt;/p&gt;</code></pre>
       </section>
       <section class="example">
          <h3>Using longdesc to refer to a long description within the same page.</h3>
-         <pre><code>&lt;img longdesc="thispage.html#desc" alt="Line graph of the number of subscribers" src="http://www.company/images/graph.png"&gt;
+         <pre><code class="language-html">&lt;img longdesc="thispage.html#desc" alt="Line graph of the number of subscribers" src="http://www.company/images/graph.png"&gt;
 &lt;div id="desc"&gt;
 &lt;h3&gt;Long Description: Line graph of the number of subscribers&lt;/h3&gt;
 &lt;!-- Full Description of Graph --&gt;

techniques/html/H46.html

@@ -21,7 +21,7 @@
          <h3>
 							     <code>noembed</code> is provided inside an <code>embed</code>
 						   </h3>
-         <pre><code>&lt;embed src="../movies/history_of_rome.mov"
+         <pre><code class="language-html">&lt;embed src="../movies/history_of_rome.mov"
   height="60" width="144" autostart="false"&gt;
   &lt;noembed&gt;
     &lt;a href="../transcripts/transcript_history_rome.htm"&gt;Transcript of "The history of Rome"&lt;/a&gt;
@@ -32,7 +32,7 @@ <h3>
          <h3>
 							     <code>noembed</code> is provided beside an <code>embed</code>
 						   </h3>
-         <pre><code>&lt;embed src="moviename.swf" width="100" height="80"
+         <pre><code class="language-html">&lt;embed src="moviename.swf" width="100" height="80"
   pluginspage="http://example.com/shockwave/download/" /&gt;
 &lt;noembed&gt;
   &lt;img alt="Still from Movie" src="moviename.gif" 

techniques/html/H56.html

@@ -33,7 +33,7 @@ <h3>Defining the text direction of a nested, mixed-direction phrase, in Hebrew a
                <p>the title is "YTIVITCA NOITAZILANOITANRETNI, w3c" in hebrew.</p>
                <p>The following markup will produce the expected result:</p>
 
-<pre><code>&lt;p&gt;The title says "&lt;span lang="he" dir="rtl"&gt;פעילות הבינאום, W3C&lt;/span&gt;" in Hebrew.&lt;/p&gt;</code></pre>
+<pre><code class="language-html">&lt;p&gt;The title says "&lt;span lang="he" dir="rtl"&gt;פעילות הבינאום, W3C&lt;/span&gt;" in Hebrew.&lt;/p&gt;</code></pre>
       </section>
    </section>
    <section id="tests">

techniques/html/H58.html

@@ -28,12 +28,12 @@ <h2>Examples</h2>
       <section class="example">
          <h3>The use of the <code>lang</code> attribute to define a quote written in German</h3>
 
-<pre xml:space="preserve"><code class="language-html">&lt;blockquote lang="de"&gt;
+<pre lang="de"><code class="language-html">&lt;blockquote lang="de"&gt;
   &lt;p&gt;
-    <span lang="de">Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
+    Da dachte der Herr daran, ihn aus dem Futter zu schaffen,
     aber der Esel merkte, daß kein guter Wind wehte, lief fort
     und machte sich auf den Weg nach Bremen: dort, meinte er,
-    könnte er ja Stadtmusikant werden.</span>
+    könnte er ja Stadtmusikant werden.
   &lt;/p&gt;
 &lt;/blockquote&gt;</code></pre>
       </section>

techniques/html/H59.html

@@ -38,7 +38,7 @@ <h2>Examples</h2>
             <p>A web page for Chapter 2 of an on-line book might contain the following links
                 within the <code>head</code> section.</p>
 
-<pre><code>&lt;link rel="prev" href="Chapter01.html" title="01. Why Volunteer?"&gt;
+<pre><code class="language-html">&lt;link rel="prev" href="Chapter01.html" title="01. Why Volunteer?"&gt;
 &lt;link rel="next" href="Chapter03.html" title="03. Who Volunteers?" /&gt;</code></pre>
       </section>
    </section>

techniques/html/H60.html

@@ -15,7 +15,7 @@
    </section><section id="examples"><h2>Examples</h2>
       <section class="example">
          <h3>The WCAG 2 Glossary.</h3>
-         <pre><code>&lt;link rel="glossary" href="https://www.w3.org/TR/WCAG20/#glossary"&gt;</code></pre>
+         <pre><code class="language-html">&lt;link rel="glossary" href="https://www.w3.org/TR/WCAG20/#glossary"&gt;</code></pre>
       </section>
    </section><section id="tests"><h2>Tests</h2>
       <section class="procedure"><h3>Procedure</h3>