Skip to content

Commit

Permalink
Meta: update some syntax highlighting stuff
Browse files Browse the repository at this point in the history 
* 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 whatwg#3755.
* Removes no-longer-necessary [hidden] rule, per
  whatwg/whatwg.org#220 (comment).
  • Loading branch information
@domenic @mustaqahmed
domenic authored and mustaqahmed committed Feb 15, 2019
1 parent b539c32 commit 2dda3ff
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 15 deletions.
57 changes: 57 additions & 0 deletions dev/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
28 changes: 13 additions & 15 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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] -->

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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

Expand All @@ -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>
Expand Down Expand Up @@ -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" ],
Expand Down Expand Up @@ -72028,7 +72026,7 @@ END:VCARD</pre>
}
}
]
}</pre>
}</code></pre>

</div>

Expand Down Expand Up @@ -77003,7 +77001,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>
Expand All @@ -77016,7 +77014,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
Expand Down Expand Up @@ -94316,7 +94314,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
Expand All @@ -94331,7 +94329,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>

Expand Down

0 comments on commit 2dda3ff

Please sign in to comment.