Skip to content

Fix incorrect highlight.js overrides #4624

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 24, 2025
Merged

Fix incorrect highlight.js overrides #4624

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2ad926a
Fix incorrect highlight.js overrides
kfranqueiro Sep 18, 2025
785f92c
Fix typos
kfranqueiro Sep 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions techniques/aria/ARIA24.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion techniques/client-side-script/SCR14.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't this be better as language-javascript? Seems there is much more JS than HTML

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What matters isn't how much there is, but that there's a <script> tag around it. This inherently makes this an HTML block.

Same for instances of CSS surrounded by <style>. The xml language support is capable of understanding JS and CSS within appropriate contexts, but the reverse is not true.

document.addEventListener("DOMContentLoaded", function (e) {
const stockBox = document.querySelector("#stock-box");
const stockMovement = document.querySelector("#stock-movement");
Expand Down
4 changes: 2 additions & 2 deletions techniques/css/C29.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;";
}
Expand Down
8 changes: 4 additions & 4 deletions techniques/css/C35.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion techniques/css/C36.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion techniques/failures/F100.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion techniques/failures/F2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ <h3>Using CSS to style the <code class="language-html">p</code> element to look

<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%;
Expand Down
2 changes: 1 addition & 1 deletion techniques/failures/F3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion techniques/failures/F37.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion techniques/failures/F50.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
2 changes: 1 addition & 1 deletion techniques/general/G188.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion techniques/server-side-script/SVR3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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")) {
Expand Down
4 changes: 2 additions & 2 deletions techniques/server-side-script/SVR4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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");
Expand Down