feat(core/grammar-boxes): add styled ABNF, EBNF, and BNF pre blocks#5294
Draft
marcoscaceres wants to merge 4 commits into
Draft
feat(core/grammar-boxes): add styled ABNF, EBNF, and BNF pre blocks#5294marcoscaceres wants to merge 4 commits into
marcoscaceres wants to merge 4 commits into
Conversation
Adds `src/core/grammar-boxes.js` which processes `<pre class="abnf">`, `<pre class="ebnf">`, and `<pre class="bnf">` blocks, giving each a header badge (matching the WebIDL/CDDL pattern) with a self-link and copy button. Content is wrapped in a `<code>` element so that the existing `core/highlight` module can apply syntax highlighting via highlight.js. Registers `ebnf` and `bnf` languages in the highlight worker (ABNF was already registered). Use `data-no-grammar` to opt out of processing for a specific block. Closes #3523 Closes #3525
- Add .highlight class to processed pre elements (prevents double-highlighting) - Fix light mode contrast: use #005a9c (dark blue) text on light blue badge - Remove duplicate --grammar-focus in dark mode block - Collapse CSS selectors with :is(.abnf, .ebnf, .bnf) - Scope focus-visible to .grammarHeader anchors only - Remove stale module comment about auto-detection
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new core module to render “grammar boxes” for <pre class="abnf|ebnf|bnf">, aligning them with existing WebIDL/CDDL UX (header badge, copy button, and highlight.js-based syntax highlighting).
Changes:
- Register
bnfandebnflanguages in the highlight.js worker allowlist/registry. - Introduce
core/grammar-boxesto wrap grammar<pre>content in<code>, add a self-link header badge, and attach a copy button + injected CSS. - Add a dedicated spec test suite covering wrapping, header/self-linking, copy button presence, opt-out via
data-no-grammar, and CSS injection.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| worker/respec-highlight.js | Registers BNF/EBNF with highlight.js and adds them to the configured language set. |
| tests/spec/core/grammar-boxes-spec.js | New spec tests validating grammar box DOM structure and CSS injection behavior. |
| src/styles/grammar.css.js | New CSS for ABNF/EBNF/BNF pre blocks and the shared grammar header badge styling. |
| src/core/grammar-boxes.js | New core plugin that transforms grammar <pre> blocks (wraps in <code>, adds header badge + copy button, injects CSS). |
| profiles/w3c.js | Wires the new module into the W3C profile plugin pipeline. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #3523
Adds header badges, copy buttons, and syntax highlighting for grammar blocks. Authors add
class="abnf",class="ebnf", orclass="bnf"to a<pre>element. The module wraps content in<code>, adds an ID-linked header badge, and registers the languages with highlight.js for syntax coloring.