From 9852a3d84ee7a99f3371d0d1eb0400759946a587 Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Mon, 13 Aug 2018 13:46:21 -0400
Subject: [PATCH] Meta: update some syntax highlighting stuff

* Makes "bad" examples fit the current code block style, instead of
  removing their background.
* Marks ABNF code as such. This will require html-build tweaks to have
  an effect.
* Adds syntax highlighting styles to the dev edition. Closes #3755.
* Removes no-longer-necessary [hidden] rule, per
  https://github.com/whatwg/whatwg.org/issues/220#issuecomment-409368787.
---
 dev/styles.css | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++
 source         | 28 ++++++++++++-------------
 2 files changed, 70 insertions(+), 15 deletions(-)

diff --git a/dev/styles.css b/dev/styles.css
index 3039db1b0cc..8b8eccac148 100644
--- a/dev/styles.css
+++ b/dev/styles.css
@@ -633,3 +633,60 @@ ul.domTree li:not(:last-child)::after {
   content: '';
   border-width: 0.1em;
 }
+
+/* SYNTAX HIGHLIGHTING */
+
+
+/* for output from https://github.com/tabatkins/highlighter */
+c-[a] { color: #990055 } /* Keyword.Declaration */
+c-[b] { color: #990055 } /* Keyword.Type */
+c-[c] { color: #708090 } /* Comment */
+c-[d] { color: #708090 } /* Comment.Multiline */
+c-[e] { color: #0077aa } /* Name.Attribute */
+c-[f] { color: #669900 } /* Name.Tag */
+c-[g] { color: #222222 } /* Name.Variable */
+c-[k] { color: #990055 } /* Keyword */
+c-[l] { color: #000000 } /* Literal */
+c-[m] { color: #000000 } /* Literal.Number */
+c-[n] { color: #0077aa } /* Name */
+c-[o] { color: #999999 } /* Operator */
+c-[p] { color: #999999 } /* Punctuation */
+c-[s] { color: #a67f59 } /* Literal.String */
+c-[t] { color: #a67f59 } /* Literal.String.Single */
+c-[u] { color: #a67f59 } /* Literal.String.Double */
+c-[cp] { color: #708090 } /* Comment.Preproc */
+c-[c1] { color: #708090 } /* Comment.Single */
+c-[cs] { color: #708090 } /* Comment.Special */
+c-[kc] { color: #990055 } /* Keyword.Constant */
+c-[kn] { color: #990055 } /* Keyword.Namespace */
+c-[kp] { color: #990055 } /* Keyword.Pseudo */
+c-[kr] { color: #990055 } /* Keyword.Reserved */
+c-[ld] { color: #000000 } /* Literal.Date */
+c-[nc] { color: #0077aa } /* Name.Class */
+c-[no] { color: #0077aa } /* Name.Constant */
+c-[nd] { color: #0077aa } /* Name.Decorator */
+c-[ni] { color: #0077aa } /* Name.Entity */
+c-[ne] { color: #0077aa } /* Name.Exception */
+c-[nf] { color: #0077aa } /* Name.Function */
+c-[nl] { color: #0077aa } /* Name.Label */
+c-[nn] { color: #0077aa } /* Name.Namespace */
+c-[py] { color: #0077aa } /* Name.Property */
+c-[ow] { color: #999999 } /* Operator.Word */
+c-[mb] { color: #000000 } /* Literal.Number.Bin */
+c-[mf] { color: #000000 } /* Literal.Number.Float */
+c-[mh] { color: #000000 } /* Literal.Number.Hex */
+c-[mi] { color: #000000 } /* Literal.Number.Integer */
+c-[mo] { color: #000000 } /* Literal.Number.Oct */
+c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
+c-[sc] { color: #a67f59 } /* Literal.String.Char */
+c-[sd] { color: #a67f59 } /* Literal.String.Doc */
+c-[se] { color: #a67f59 } /* Literal.String.Escape */
+c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
+c-[si] { color: #a67f59 } /* Literal.String.Interpol */
+c-[sx] { color: #a67f59 } /* Literal.String.Other */
+c-[sr] { color: #a67f59 } /* Literal.String.Regex */
+c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
+c-[vc] { color: #0077aa } /* Name.Variable.Class */
+c-[vg] { color: #0077aa } /* Name.Variable.Global */
+c-[vi] { color: #0077aa } /* Name.Variable.Instance */
+c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
diff --git a/source b/source
index 6ab4395fe82..90fc3711ed4 100644
--- a/source
+++ b/source
@@ -82,9 +82,7 @@
   </style>
   <link w-dev rel="stylesheet" href="styles.css">
   <style w-nodev>
-   [hidden] { display: none; }
-
-   .bad, .bad *:not(.X\58X) { color: gray; border-color: gray; background: transparent; }
+   .bad, .bad *:not(.X\58X) { color: gray; }
 
    .fingerprint { position: absolute; right: 0; z-index: 5; }
    @media (max-width: 767px) {
@@ -45628,11 +45626,11 @@ interface <dfn>HTMLInputElement</dfn> : <span>HTMLElement</span> {
   production of the following ABNF, the character set for which is Unicode. This ABNF implements the
   extensions described in RFC 1123. <ref spec=ABNF> <ref spec=RFC5322> <ref spec=RFC1034> <ref spec=RFC1123></p>
 
-  <pre>email         = 1*( atext / "." ) "@" label *( "." label )
+  <pre><code data-x="" class="abnf">email         = 1*( atext / "." ) "@" label *( "." label )
 label         = let-dig [ [ ldh-str ] let-dig ]  ; limited to a length of 63 characters by <a href="https://tools.ietf.org/html/rfc1034#section-3.5">RFC 1034 section 3.5</a>
 atext         = &lt; as defined in <a href="https://tools.ietf.org/html/rfc5322#section-3.2.3">RFC 5322 section 3.2.3</a> >
 let-dig       = &lt; as defined in <a href="https://tools.ietf.org/html/rfc1034#section-3.5">RFC 1034 section 3.5</a> >
-ldh-str       = &lt; as defined in <a href="https://tools.ietf.org/html/rfc1034#section-3.5">RFC 1034 section 3.5</a> ></pre>
+ldh-str       = &lt; as defined in <a href="https://tools.ietf.org/html/rfc1034#section-3.5">RFC 1034 section 3.5</a> ></code></pre>
 
   <!-- Domain syntax based on section 3.5 of [RFC1034] and section 2.1 of [RFC1123] -->
 
@@ -58533,7 +58531,7 @@ o............A....e
   data-x="">script</code> production in the following ABNF, the character set for which is Unicode.
   <ref spec=ABNF></p>
 
-  <pre>script        = outer *( comment-open inner comment-close outer )
+  <pre><code data-x="" class="abnf">script        = outer *( comment-open inner comment-close outer )
 
 outer         = &lt; any string that doesn't contain a substring that matches not-in-outer >
 not-in-outer  = comment-open
@@ -58562,7 +58560,7 @@ tag-end       =/ %x000A ; U+000A LINE FEED (LF)
 tag-end       =/ %x000C ; U+000C FORM FEED (FF)
 tag-end       =/ %x0020 ; U+0020 SPACE
 tag-end       =/ %x002F ; U+002F SOLIDUS (/)
-tag-end       =/ %x003E ; U+003E GREATER-THAN SIGN (&gt;)</pre>
+tag-end       =/ %x003E ; U+003E GREATER-THAN SIGN (&gt;)</code></pre>
 
   <p>When a <code>script</code> element contains <span>script documentation</span>, there are
   further restrictions on the contents of the element, as described in the section below.</p>
@@ -58646,7 +58644,7 @@ if (script > player) { ... }</code></pre>
   element's contents, matches the <code data-x="">documentation</code> production in the following
   ABNF, the character set for which is Unicode. <ref spec=ABNF></p>
 
-  <pre>documentation = *( *( space / tab / comment ) [ line-comment ] newline )
+  <pre><code data-x="" class="abnf">documentation = *( *( space / tab / comment ) [ line-comment ] newline )
 comment       = slash star *( not-star / star not-slash ) 1*star slash
 line-comment  = slash slash *not-newline
 
@@ -58661,7 +58659,7 @@ not-newline   = %x0000-0009 / %x000B-10FFFF
 not-star      = %x0000-0029 / %x002B-10FFFF
                 ; a <span>scalar value</span> other than U+002A ASTERISK (*)
 not-slash     = %x0000-002E / %x0030-10FFFF
-                ; a <span>scalar value</span> other than U+002F SOLIDUS (/)</pre>
+                ; a <span>scalar value</span> other than U+002F SOLIDUS (/)</code></pre>
 
   <p class="note">This corresponds to putting the contents of the element in JavaScript
   comments.</p>
@@ -71985,7 +71983,7 @@ END:VCARD</pre>
    <p>It would be turned into the following JSON by the algorithm above (supposing that the page's
    URL was <code data-x="">https://blog.example.com/progress-report</code>):</p>
 
-   <pre>{
+   <pre><code data-x="" class="json">{
   "items": [
     {
       "type": [ "http://schema.org/BlogPosting" ],
@@ -72028,7 +72026,7 @@ END:VCARD</pre>
       }
     }
   ]
-}</pre>
+}</code></pre>
 
   </div>
 
@@ -77061,7 +77059,7 @@ dictionary <dfn>DragEventInit</dfn> : <span>MouseEventInit</span> {
    out loaded into an <code>iframe</code> as shown, and <code data-x="">b-2.html</code> and <code
    data-x="">c.html</code> are omitted (they can simply be an empty document).</p>
 
-   <pre>&lt;!-- a.html -->
+   <pre><code data-x="" class="html">&lt;!-- a.html -->
 &lt;!DOCTYPE html>
 &lt;html lang="en">
 &lt;title>Browsing context A&lt;/title>
@@ -77074,7 +77072,7 @@ dictionary <dfn>DragEventInit</dfn> : <span>MouseEventInit</span> {
 &lt;html lang="en">
 &lt;title>Browsing context B&lt;/title>
 
-&lt;iframe src="c.html">&lt;/iframe></pre>
+&lt;iframe src="c.html">&lt;/iframe></code></pre>
 
    <p>At this point, the documents given by <code data-x="">a.html</code>, <code
    data-x="">b-1.html</code>, and <code data-x="">c.html</code> are all the <span data-x="active
@@ -94374,7 +94372,7 @@ dictionary <dfn>EventSourceInit</dfn> {
   <p>The event stream format is as described by the <code data-x="">stream</code> production of the
   following ABNF, the character set for which is Unicode. <ref spec=ABNF></p>
 
-  <pre>stream        = [ bom ] *event
+  <pre><code data-x="" class="abnf">stream        = [ bom ] *event
 event         = *( comment / field ) end-of-line
 comment       = colon *any-char end-of-line
 field         = 1*name-char [ colon [ space ] *any-char ] end-of-line
@@ -94389,7 +94387,7 @@ bom           = %xFEFF ; U+FEFF BYTE ORDER MARK
 name-char     = %x0000-0009 / %x000B-000C / %x000E-0039 / %x003B-10FFFF
                 ; a <span>scalar value</span> other than U+000A LINE FEED (LF), U+000D CARRIAGE RETURN (CR), or U+003A COLON (:)
 any-char      = %x0000-0009 / %x000B-000C / %x000E-10FFFF
-                ; a <span>scalar value</span> other than U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR)</pre>
+                ; a <span>scalar value</span> other than U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR)</code></pre>
 
   <p>Event streams in this format must always be encoded as UTF-8. <ref spec=ENCODING></p>