[*][editorial] Fix autolinks to value in <pre>

Author: cdoublev

css-borders-4/Overview.bs

@@ -366,7 +366,7 @@ Issue <a href="https://github.com/w3c/csswg-drafts/issues/11610">#11610</a>: che
 'corner-shape' values</h4>
 
 	<pre class=prod>
-		<dfn><<corner-shape-value>></dfn> = ''round'' | ''scoop'' | ''bevel'' | ''notch'' | ''straight'' | ''squircle'' | superellipse(<<number [0,&infin;]>> | infinity)
+		<dfn><<corner-shape-value>></dfn> = <l>''round''</l> | <l>''scoop''</l> | <l>''bevel''</l> | <l>''notch''</l> | <l>''straight''</l> | <l>''squircle''</l> | superellipse(<<number [0,&infin;]>> | infinity)
 	</pre>
 
 	<dl dfn-type="value" dfn-for="<corner-shape-value>">

css-color-4/Overview.bs

@@ -3740,9 +3740,9 @@ Specifying Predefined Colors: the ''color()'' function</h3>
 		<dfn>color()</dfn> = color( <<colorspace-params>> [ / [ <<alpha-value>> | none ] ]? )
 		<dfn>&lt;colorspace-params></dfn> = [ <<predefined-rgb-params>> | <<xyz-params>>]
 		<dfn>&lt;predefined-rgb-params></dfn> = <<predefined-rgb>> [ <<number>> | <<percentage>> | none ]{3}
-		<dfn>&lt;predefined-rgb></dfn> = ''srgb'' | ''srgb-linear'' | ''display-p3'' | ''a98-rgb'' | ''prophoto-rgb'' | ''rec2020''
+		<dfn>&lt;predefined-rgb></dfn> = <l>''srgb''</l> | <l>''srgb-linear''</l> | <l>''display-p3''</l> | <l>''a98-rgb''</l> | <l>''prophoto-rgb''</l> | <l>''rec2020''</l>
 		<dfn>&lt;xyz-params></dfn> = <<xyz-space>> [ <<number>> | <<percentage>> | none ]{3}
-		<dfn>&lt;xyz-space></dfn> = ''xyz'' | ''xyz-d50'' | ''xyz-d65''
+		<dfn>&lt;xyz-space></dfn> = <l>''xyz''</l> | <l>''xyz-d50''</l> | <l>''xyz-d65''</l>
 	</pre>
 
 	<wpt>
@@ -4688,8 +4688,8 @@ Color Space for Interpolation</h3>
 
 	<pre class='prod'>
 		<dfn export>&lt;color-space></dfn> = &lt;rectangular-color-space> | &lt;polar-color-space>
-		<dfn export>&lt;rectangular-color-space></dfn> = ''srgb'' | ''srgb-linear'' | ''display-p3'' | ''a98-rgb'' | ''prophoto-rgb'' | ''rec2020'' | ''lab'' | ''oklab'' | ''xyz'' | ''xyz-d50'' | ''xyz-d65''
-		<dfn export>&lt;polar-color-space></dfn> = ''hsl'' | ''hwb'' | ''lch'' | ''oklch''
+		<dfn export>&lt;rectangular-color-space></dfn> = <l>''srgb''</l> | <l>''srgb-linear''</l> | <l>''display-p3''</l> | <l>''a98-rgb''</l> | <l>''prophoto-rgb''</l> | <l>''rec2020''</l> | <l>''lab''</l> | <l>''oklab''</l> | <l>''xyz''</l> | <l>''xyz-d50''</l> | <l>''xyz-d65''</l>
+		<dfn export>&lt;polar-color-space></dfn> = <l>''hsl''</l> | <l>''hwb''</l> | <l>''lch''</l> | <l>''oklch''</l>
 		<dfn export>&lt;hue-interpolation-method></dfn> = [ shorter | longer | increasing | decreasing ] hue
 		<dfn export id="color-interpolation-method">&lt;color-interpolation-method></dfn> = in [ <<rectangular-color-space>> | <<polar-color-space>> <<hue-interpolation-method>>? ]
 	</pre>

css-color-5/Overview.bs

@@ -1845,7 +1845,7 @@ or any other color or monochrome output device which has been characterized.
 		It's defined as:
 
 		<pre class='prod'>
-		@color-profile = @color-profile [<<dashed-ident>> | ''device-cmyk''] { <<declaration-list>> }
+		@color-profile = @color-profile [<<dashed-ident>> | <l>''device-cmyk''</l>] { <<declaration-list>> }
 		</pre>
 
 	<wpt>
@@ -2407,8 +2407,8 @@ or any other color or monochrome output device which has been characterized.
 		<pre class='prod'>
 			<dfn>device-cmyk()</dfn> = <<legacy-device-cmyk-syntax>> | <<modern-device-cmyk-syntax>>
 			<dfn>&lt;legacy-device-cmyk-syntax></dfn> = device-cmyk( <<number>>#{4} )
-			<dfn>&lt;modern-device-cmyk-syntax></dfn> = device-cmyk( <<cmyk-component>>{4} [ / [ <<alpha-value>> | ''none'' ] ]? )
-			<dfn>&lt;cmyk-component></dfn> = <<number>> | <<percentage>> | ''none''
+			<dfn>&lt;modern-device-cmyk-syntax></dfn> = device-cmyk( <<cmyk-component>>{4} [ / [ <<alpha-value>> | <l>''none''</l> ] ]? )
+			<dfn>&lt;cmyk-component></dfn> = <<number>> | <<percentage>> | <l>''none''</l>
 		</pre>
 
 		The arguments of the ''device-cmyk()'' function specify the cyan, magenta, yellow, and black components, in order,
@@ -2653,8 +2653,8 @@ or any other color or monochrome output device which has been characterized.
 
 	<pre class='prod'>
 		<dfn export>&lt;color-space></dfn> = <<rectangular-color-space>> | <<polar-color-space>> | <<custom-color-space>>
-		<dfn export>&lt;rectangular-color-space></dfn> = ''srgb'' | ''srgb-linear'' | ''display-p3'' | ''a98-rgb'' | ''prophoto-rgb'' | ''rec2020'' | ''lab'' | ''oklab'' | ''xyz'' | ''xyz-d50'' | ''xyz-d65''
-		<dfn export>&lt;polar-color-space></dfn> = ''hsl'' | ''hwb'' | ''lch'' | ''oklch''
+		<dfn export>&lt;rectangular-color-space></dfn> = <l>''srgb''</l> | <l>''srgb-linear''</l> | <l>''display-p3''</l> | <l>''a98-rgb''</l> | <l>''prophoto-rgb''</l> | <l>''rec2020''</l> | <l>''lab''</l> | <l>''oklab''</l> | <l>''xyz'' | ''xyz-d50'' | ''xyz-d65''</l>
+		<dfn export>&lt;polar-color-space></dfn> = <l>''hsl''</l> | <l>''hwb''</l> | <l>''lch''</l> | <l>''oklch''</l>
 		<dfn export>&lt;custom-color-space></dfn> = <<dashed-ident>>
 		<dfn export>&lt;hue-interpolation-method></dfn> = [ shorter | longer | increasing | decreasing ] hue
 		<dfn export id="color-interpolation-method">&lt;color-interpolation-method></dfn> = in [ <<rectangular-color-space>> | <<polar-color-space>> <<hue-interpolation-method>>? | <<custom-color-space>> ]

css-easing-2/Overview.bs

@@ -599,7 +599,7 @@ A <a>cubic Bézier easing function</a> has the following syntax:
 
 <pre class="prod">
   <dfn>&lt;cubic-bezier-easing-function></dfn> =
-    ''ease'' | ''ease-in'' | ''ease-out'' | ''ease-in-out'' | <<cubic-bezier()>>
+    <l>''ease''</l> | <l>''ease-in''</l> | <l>''ease-out''</l> | <l>''ease-in-out''</l> | <<cubic-bezier()>>
 
   <dfn>cubic-bezier()</dfn> = cubic-bezier( [ <<number [0,1]>>, <<number>> ]#{2} )
 </pre>
@@ -784,8 +784,8 @@ It has the following syntax:
   <dfn>&lt;step-easing-function></dfn> = ''step-start'' | ''step-end'' | <<steps()>>
 
   <dfn>steps()</dfn> = steps( <<integer>>, <<step-position>>?)
-  <dfn type>&lt;step-position></dfn> = ''jump-start'' | ''jump-end'' | ''jump-none'' | ''jump-both''
-                | ''start'' | ''end''
+  <dfn type>&lt;step-position></dfn> = <l>''jump-start''</l> | <l>''jump-end''</l> | <l>''jump-none''</l> | <l>''jump-both''</l>
+                | <l>''start''</l> | <l>''end''</l>
 </pre>
 
 <wpt>

css-fonts-4/Overview.bs

@@ -376,9 +376,9 @@ Syntax of <<generic-family>>
 
 <pre class=prod>
 	<dfn><<generic-family>></dfn> = <<generic-script-specific>>| <<generic-complete>> | <<generic-incomplete>>
-	<dfn><<generic-script-specific>></dfn> = ''generic(fangsong)'' | ''generic(kai)'' | ''generic(khmer-mul)'' |  ''generic(nastaliq)''
-	<dfn><<generic-complete>></dfn> = ''serif'' | ''sans-serif'' | ''system-ui'' | ''cursive'' | ''fantasy'' | ''math'' | ''monospace''
-	<dfn><<generic-incomplete>></dfn> = ''ui-serif'' | ''ui-sans-serif'' | ''ui-monospace'' | ''ui-rounded''
+	<dfn><<generic-script-specific>></dfn> = <l>''generic(fangsong)''</l> | <l>''generic(kai)''</l> | <l>''generic(khmer-mul)''</l> |  <l>''generic(nastaliq)''</l>
+	<dfn><<generic-complete>></dfn> = <l>''serif''</l> | <l>''sans-serif''</l> | <l>''system-ui''</l> | <l>''cursive''</l> | <l>''fantasy''</l> | <l>''math''</l> | <l>''monospace''</l>
+	<dfn><<generic-incomplete>></dfn> = <l>''ui-serif''</l> | <l>''ui-sans-serif''</l> | <l>''ui-monospace''</l> | <l>''ui-rounded''</l>
 </pre>
 
 	To make the syntax less succeptible to clashes, more recently defined generic font families are identified using a functional syntax.
@@ -401,7 +401,7 @@ Syntax of <<system-family-name>>
 </h4>
 
 	<pre class="prod">
-		<l><<system-family-name>></l> = ''caption'' | ''icon'' | ''menu'' | ''message-box'' | ''small-caption'' | ''status-bar''
+		<l><<system-family-name>></l> = <l>''caption''</l> | <l>''icon''</l> | <l>''menu''</l> | <l>''message-box''</l> | <l>''small-caption''</l> | <l>''status-bar''</l>
 	</pre>
 
 <h4 id="font-families">

css-shapes-1/Overview.bs

@@ -780,7 +780,7 @@ Shapes from Box Values</h2>
 	Its syntax is:
 
 	<pre class="prod">
-		<dfn><<shape-box>></dfn> = <<visual-box>> | ''margin-box''
+		<dfn><<shape-box>></dfn> = <<visual-box>> | <l>''margin-box''</l>
 	</pre>
 
 	The definitions of the values are: