You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Converge on default pre > code highlight.js usage (#4604)
- Removes our customization of the highlight.js config
- Adds `<code>` in cases where it is warranted but was missing
- Intentionally does not change instances that are now fixed by resetting the configuration
- Removes `no-highlight` and the `<code>` tag in its entirety in T1, T2,
and T3, which don't need highlight.js to run at all
- Copies and fixes references to the highlight.js script and theme for
Understanding documents, so it will work for the code block in
Understanding Conformance
- Removes a duplicated `;` in a noembed example (spotted by Francis)
Note: Silverlight and Flash techniques use only `<pre>`, but I left them
alone, since they are all obsolete, and our build of highlight.js does
not support e.g. C# and ActionScript anyway.
---------
Co-authored-by: Francis Storr <[email protected]>
Copy file name to clipboardExpand all lines: techniques/client-side-script/SCR37.html
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -22,7 +22,7 @@ <h3>An options button that opens a dialog</h3>
22
22
<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>
23
23
<p>In this example, the Submit and Reset buttons inside the dialog simply hide the <codeclass="el">div</code>. </p>
24
24
25
-
<prexml:space="preserve">...
25
+
<pre><code>...
26
26
<button onclick="TogglePopup(event,true)"
27
27
name="pop0001">Options</button>
28
28
@@ -42,11 +42,11 @@ <h3>An options button that opens a dialog</h3>
42
42
43
43
</div>
44
44
...
45
-
</pre>
45
+
</code></pre>
46
46
47
47
<p>The <codeclass="el">div</code>, heading and <codeclass="el">form</code> elements are styled with CSS to look like a dialog. </p>
48
48
49
-
<prexml:space="preserve">...
49
+
<pre><code>...
50
50
a { color:blue; }
51
51
a.clickPopup img { border:none; width:0; }
52
52
@@ -59,11 +59,11 @@ <h3>An options button that opens a dialog</h3>
59
59
#pop0001 div.buttons { text-align:right; }
60
60
#pop0001 div.buttons input { width:6em; }
61
61
...
62
-
</pre>
62
+
</code></pre>
63
63
64
64
<p>The script toggles the display of the popup <codeclass="el">div</code>, showing it and hiding it. </p>
65
65
66
-
<prexml:space="preserve">...
66
+
<pre><code>...
67
67
function TogglePopup(evt,show) {
68
68
HarmonizeEvent(evt);
69
69
var src = evt.target;
@@ -102,7 +102,7 @@ <h3>An options button that opens a dialog</h3>
Copy file name to clipboardExpand all lines: techniques/general/G224.html
+10-10Lines changed: 10 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -24,7 +24,7 @@ <h2>Examples</h2>
24
24
<sectionclass="example">
25
25
<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>
26
26
<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>
27
-
<pre>
27
+
<pre><code>
28
28
<div class="example">
29
29
<ul>
30
30
<li>
@@ -55,8 +55,8 @@ <h2>Examples</h2>
55
55
...
56
56
</ul>
57
57
</div>
58
-
</pre>
59
-
<pre>
58
+
</code></pre>
59
+
<pre><code>
60
60
*, *::before, *::after {
61
61
box-sizing: border-box;
62
62
}
@@ -83,7 +83,7 @@ <h2>Examples</h2>
83
83
min-width: 300px;
84
84
}
85
85
}
86
-
</pre>
86
+
</code></pre>
87
87
<p>A working example of <ahref="../../working-examples/reflow-nested-lists">a list where nested levels can be read within a 320px wide viewport</a>.</p>
88
88
</section>
89
89
@@ -92,7 +92,7 @@ <h2>Examples</h2>
92
92
<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>
93
93
94
94
<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>
95
-
<pre>
95
+
<pre><code>
96
96
def complex_function(x):
97
97
if x > 0:
98
98
for i in range(x):
@@ -112,9 +112,9 @@ <h2>Examples</h2>
112
112
print(f" {a} is odd")
113
113
else:
114
114
print("x is not a positive number")
115
-
</pre>
115
+
</code></pre>
116
116
<p>The following code example demonstrates the use of indentation to convey the nesting of elements in an HTML document:</p>
117
-
<pre>
117
+
<pre><code>
118
118
<html lang=en>
119
119
<head>...</head>
120
120
<body>
@@ -123,9 +123,9 @@ <h2>Examples</h2>
123
123
</div>
124
124
</body>
125
125
</html>
126
-
</pre>
126
+
</code></pre>
127
127
<p>The indentation of code blocks like these could be adjusted at different viewport sizes, via a CSS Media Query.</p>
128
-
<pre>
128
+
<pre><code>
129
129
@media screen and ( min-width: 320px ) {
130
130
pre {
131
131
tab-size: 8px;
@@ -143,7 +143,7 @@ <h2>Examples</h2>
143
143
tab-size: 32px;
144
144
}
145
145
}
146
-
</pre>
146
+
</code></pre>
147
147
<p>A working example of <ahref="../../working-examples/reflow-indenting">code snippets using CSS to modify indentation width at different breakpoints</a>.
<h3>Using longdesc to refer to a long description within the same page.</h3>
25
-
<prexml:space="preserve"><img longdesc="thispage.html#desc" alt="Line graph of the number of subscribers" src="http://www.company/images/graph.png">
25
+
<pre><code><img longdesc="thispage.html#desc" alt="Line graph of the number of subscribers" src="http://www.company/images/graph.png">
26
26
<div id="desc">
27
27
<h3>Long Description: Line graph of the number of subscribers</h3>
0 commit comments