Fix incorrect highlight.js overrides (#4624)

kfranqueiro · web-flow · commit ad4542f48a5d · 2025-09-24T12:20:32.000-04:00
This fixes instances where we had specified the wrong `language-...` class in `<pre><code class="...">`, causing highlight.js to highlight code incorrectly. (Originally fixed/reported in #4611, which is being split up and closed)
diff --git a/techniques/aria/ARIA24.html b/techniques/aria/ARIA24.html
@@ -28,7 +28,7 @@ <h3>Basic principle of the technique</h3>
 
          <h4>1. Author adds a font-face to the CSS</h4>
          <p>The first step is used for adding a font face with icons via the CSS file.</p>
-         <pre xml:space="preserve"><code class="language-html">/* specify font-family name for icons */
+         <pre xml:space="preserve"><code class="language-css">/* specify font-family name for icons */
 @font-face { font-family: 'IconFontRoleImg'; }
 
 /* default class for fonts-face with icons */
@@ -48,7 +48,7 @@ <h4>2. Author adds the font classes to the HTML</h4>
 
          <h4>3. User CSS file replaces the font-family except the icon file</h4>
          <p>The third step uses the ":not selector" in combination with the "[attribute] selector" to only replace font faces for regular text.</p>
-         <pre xml:space="preserve"><code class="language-html">/* replaces font faces but excludes all elements with attribute role="img" */
+         <pre xml:space="preserve"><code class="language-css">/* replaces font faces but excludes all elements with attribute role="img" */
 *:not([role="img"]) { font-family: Verdana, sans-serif !important; }</code></pre>
 
       </section>
diff --git a/techniques/client-side-script/SCR14.html b/techniques/client-side-script/SCR14.html
@@ -28,7 +28,7 @@ <h3>Updating screen reader settings for stock price update alerts</h3>
         <section id="the-javascript">
 				<h4>The JavaScript</h4>
          
-<pre xml:space="preserve"><code class="language-javascript">&lt;script&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;script&gt;
 document.addEventListener("DOMContentLoaded", function (e) {
   const stockBox = document.querySelector("#stock-box");
   const stockMovement = document.querySelector("#stock-movement");
diff --git a/techniques/css/C29.html b/techniques/css/C29.html
@@ -289,11 +289,11 @@ <h5>At the beginning of the PHP page</h5>
 				<section id="head-section">
 
 					<h5>In the &lt;head&gt; section</h5>
-<pre xml:space="preserve"><code class="language-html">&lt;link rel="stylesheet" media="screen" href="&lt;?php echo($thestyle);?&gt;.css"&gt;</code></pre>
+<pre xml:space="preserve"><code class="language-php-template">&lt;link rel="stylesheet" media="screen" href="&lt;?php echo($thestyle);?&gt;.css"&gt;</code></pre>
 				</section>
 				<section id="body-section">
 					<h5>In &lt;body&gt; section</h5>
-<pre xml:space="preserve"><code class="language-html">&lt;?php
+<pre xml:space="preserve"><code class="language-php-template">&lt;?php
   if ($thestyle == "style1") {
     echo "&lt;a href=\"index.php?set=style1\"&gt;Switch to Style Sheet Two&lt;/a&gt;";
   }
diff --git a/techniques/css/C35.html b/techniques/css/C35.html
@@ -35,9 +35,9 @@ <h3>A box sized with space to allow for expansion</h3>
          <p>The containers are sized to a value greater than the default width of the text.</p>
             <section id="the-css">
                <h4>The CSS</h4>
-<pre xml:space="preserve"><code class="language-css">&lt;style&gt;
-/* Links are less than 8ex wide,
-so 10ex width of each li allows for expanded letter and word width */
+<pre xml:space="preserve"><code class="language-html">&lt;style&gt;
+/* Links are less than 8em wide,
+so 10em width of each li allows for expanded letter and word width */
 nav li { width: 10em; }
 &lt;/style&gt;</code></pre>
             </section>
@@ -57,7 +57,7 @@ <h4>The <abbr title="HyperText Markup Language">HTML</abbr></h4>
          <h3>A box which expands with the text size</h3>
             <section id="the-css2">
                <h4>The CSS</h4>
-<pre xml:space="preserve"><code class="language-css">&lt;style&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;style&gt;
 /* CSS containers are given a display of inline-block. No negative margins set. */
  nav li { display: inline-block; }
  &lt;/style&gt;</code></pre>
diff --git a/techniques/css/C36.html b/techniques/css/C36.html
@@ -27,7 +27,7 @@ <h2>Examples</h2>
 					<h3>A paragraph expands vertically within container</h3>
                <section id="the-css">
                   <h4>The CSS</h4>
-<pre xml:space="preserve"><code class="language-css">&lt;style&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;style&gt;
 /* CSS: No height property is set.*/
 &lt;/style&gt;</code></pre>
 <h4>The <abbr title="HyperText Markup Language">HTML</abbr></h4>
diff --git a/techniques/failures/F100.html b/techniques/failures/F100.html
@@ -37,7 +37,7 @@ <h3>Block an orientation ("door slam") by using HTML and CSS</h3>
 
         When the <code>portrait</code> property matches the viewport space defined via media queries, the message will disappear or vice versa. This particular example uses the CSS <code>landscape</code>, <code>portrait</code> media query properties.</p>
 
-<pre xml:space="preserve"><code class="language-css">&lt;style&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;style&gt;
 /* Orientation "door slam" Styling */
 
 @media all and (orientation: landscape) {
diff --git a/techniques/failures/F2.html b/techniques/failures/F2.html
@@ -8,7 +8,7 @@ <h3>Using CSS to style the <code>p</code> element to look like a heading</h3>
          
             <p>The author intended to make a heading but didn't want the look of the default HTML heading. So they used CSS to style the P element to look like a heading and they called it a heading. But they failed to use the proper HTML heading element. Therefore, the Assistive Technology could not distinguish it as a heading.</p>
          
-<pre xml:space="preserve"><code class="language-css">&lt;style&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;style&gt;
 .heading1{
   font-family: Times, serif;
   font-size:200%;
diff --git a/techniques/failures/F3.html b/techniques/failures/F3.html
@@ -77,7 +77,7 @@ <h3></h3>
 <pre xml:space="preserve"><code class="language-html">&lt;p id="bestinterest" style="background: transparent url(/images/TopRate.png) no-repeat top left;"&gt;
    Where else would you find a better interest rate?&lt;p&gt;</code></pre>
             <p>In the following code, the background image declaration is created in a client script:</p>
-<pre xml:space="preserve"><code class="language-javascript">&lt;script&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;script&gt;
    var newP = document.createElement('p');
    var newPText = document.createTextNode('Where else would you find a better interest rate?');
    newP.appendChild(newPText);
diff --git a/techniques/failures/F37.html b/techniques/failures/F37.html
@@ -19,7 +19,7 @@ <h3></h3>
                                 the form when a radio button is selected instead of using a submit
                                 button. </p>
          
-<pre xml:space="preserve"><code class="language-javascript">&lt;script&gt; 
+<pre xml:space="preserve"><code class="language-html">&lt;script&gt; 
    function goToMirror(theInput) {
     var mirrorSite = "https://download." + theInput.value + "/"; 
     window.open(mirrorSite); 
diff --git a/techniques/failures/F50.html b/techniques/failures/F50.html
@@ -10,7 +10,7 @@
             <p>The following example uses script to blink content, but the blink
                                 continues indefinitely rather than stopping after five seconds.</p>
          
-<pre xml:space="preserve"><code class="language-javascript">&lt;script&gt;
+<pre xml:space="preserve"><code class="language-html">&lt;script&gt;
   // blink "on" state
   function show(){
       document.getElementById("blink1").style.visibility = "visible";
diff --git a/techniques/general/G188.html b/techniques/general/G188.html
@@ -26,7 +26,7 @@ <h2>Description</h2>
 				<h2>Examples</h2>
 				<section class="example">
 					<p>Use standard style page switching and have a button or link on the page that switches the stylesheet. The new stylesheet contains a rule to increase the line height and a class to increase the paragraph spacing.</p>
-<pre xml:space="preserve"><code class="language-html">p {
+<pre xml:space="preserve"><code class="language-css">p {
   line-height: 1.5;
   margin-bottom: 2em;
 }</code></pre>
diff --git a/techniques/server-side-script/SVR3.html b/techniques/server-side-script/SVR3.html
@@ -51,7 +51,7 @@ <h4>Conforming PHP</h4>
          
                <h4>Non-conforming PHP</h4>
          
-<pre xml:space="preserve"><code class="language-php">&lt;?php 
+<pre xml:space="preserve"><code class="language-php-template">&lt;?php 
 // if the request comes from a file that contains the string "conforming.php" 
 // then render the page
   if(stristr($_SERVER['HTTP_REFERER'], "conforming.php")) {
diff --git a/techniques/server-side-script/SVR4.html b/techniques/server-side-script/SVR4.html
@@ -52,7 +52,7 @@ <h3>Setting a session or persistent cookie to store a user preference</h3>
    <section id="pref">
 		<h4>pref.php</h4>
    
-<pre xml:space="preserve"><code class="language-php">&lt;?php
+<pre xml:space="preserve"><code class="language-php-template">&lt;?php
 if(isset($site_pref)) {
 setcookie("site_pref",$site_pref, time() + (86400 * 30)); //set for 30 days
 header("location: http://www.example.com"); //redirects to home page
@@ -65,7 +65,7 @@ <h4>pref.php</h4>
 	<section id="index">
 		<h4>index.php</h4>
 
-<pre xml:space="preserve"><code class="language-php">&lt;?
+<pre xml:space="preserve"><code class="language-php-template">&lt;?php
 if(isset($site_pref)) {
   if($site_pref="axx") {
     header("location: ./accessible/index.php");
