Render fancy ordered-list markers: honour list style/delimiter (#100)#101
Merged
Conversation
MyST list nodes can carry style (lower-alpha | upper-alpha | lower-roman | upper-roman) and delimiter (paren | parens), emitted by the QuantEcon mystmd fork for Pandoc fancy_lists markers such as a., iv., and (i) — see QuantEcon/mystmd#50. myst-to-react's list renderer drops both fields, so these lists rendered with plain decimal markers. - app/renderers.tsx: LIST_RENDERERS overrides the list renderer via the existing mergeRenderers extension point — maps style to the <ol type> attribute and exposes delimiter as a delimiter-paren(s) class. Plain lists emit byte-identical HTML to before. - styles/lists.css: restates the type mapping as author CSS (the presentational hint loses to prose list-style-type) and draws parenthesized markers with the built-in list-item counter, which honours <ol start>. Interim override until the fix lands upstream in jupyter-book/myst-theme alongside the fancy-lists upstreaming — tracked in QuantEcon/mystmd#51. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
|
Contributor
🎭 Visual regression results
Details
Skipped testsmobile-chrome › theme.spec.ts › QuantEcon theme — visual regression › launch-colab |
This was referenced Jul 16, 2026
There was a problem hiding this comment.
Pull request overview
This PR restores correct rendering for “fancy” ordered-list markers (e.g. (a), iv., B)) by overriding the default list node renderer in the theme so the style and delimiter metadata from MyST list nodes is reflected in emitted HTML and CSS.
Changes:
- Override the MyST
listrenderer to mapstyle→<ol type>anddelimiter→delimiter-*class. - Add CSS rules to (a) restate the
<ol type>mapping as author styles and (b) draw parenthesized markers via CSS counters. - Document the fix in the changelog and wire the new stylesheet into the main CSS bundle.
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 |
|---|---|
| app/renderers.tsx | Adds a custom list renderer that preserves style/delimiter for ordered lists. |
| app/root.tsx | Merges the new list renderer into the renderer stack so it overrides defaults. |
| styles/lists.css | Implements type→list-style-type rules and counter-based marker rendering for paren/parens delimiters. |
| styles/app.css | Imports the new lists.css stylesheet into the built CSS bundle. |
| CHANGELOG.md | Notes the fancy-ordered-list marker rendering fix in the Unreleased “Fixed” section. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…S, visual coverage Review follow-ups to #101, plus a real bug the new coverage caught: - app/renderers.tsx: allow-list both lookups (unknown style/delimiter values now emit nothing — no arbitrary class injection from plugin-mutated ASTs) and use start={node.start ?? undefined} so CommonMark's `0.` start survives (`||` dropped it). - styles/lists.css keys off case-sensitive `list-*` classes emitted by the renderer instead of ol[type] selectors: HTML matches [type=...] case-insensitively, so ol[type='a'] and ol[type='A'] select the same elements and the later (uppercase) rules always won — every lowercase variant rendered uppercase. Caught by eyeballing the new fixture snapshot. - tests/visual: new `lists` fixture page whose ordinary `1.` lists are stamped with style/delimiter by a fixture-local transform (fancy-lists.mjs), so coverage does not depend on the building CLI parsing fancy-list markers (stock mystmd does not — the parser is QuantEcon/mystmd#50); darwin baselines committed. A `lists-markers` test asserts <ol type>, classes, computed list-style-type, and the ::before marker content directly — a wrong marker case moves too few pixels for the snapshot's 1% diff budget. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
Author
|
/update-new-snapshots |
Contributor
|
🎭 Refreshed visual baselines in 9821ec5:
|
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 #100.
What
Fancy ordered lists (QuantEcon/mystmd#50) — markers like
a.,iv.,(i)— parse intolistnodes carryingstyleanddelimiter, butmyst-to-react'slistrenderer drops both fields, so HTML sites render plain decimal markers. This landed as a silent regression for paren-form documents when books upgraded past the fancy-lists release: the literal(a)text disappears and a1.takes its place (QuantEcon/mystmd#74, found upgrading the Deep Learning book).This PR overrides the
listrenderer through the theme's existingmergeRenderersextension point inapp/root.tsx— no patch-package entry, no myst-theme fork:app/renderers.tsx—LIST_RENDERERSmapsstyleto the<ol type>attribute (lower-alpha→a,upper-roman→I, …) and exposesdelimiteras adelimiter-paren/delimiter-parensclass. Plain ordered lists and unordered lists emit byte-identical HTML to the default renderer.styles/lists.css— restates thetypemapping as author CSS, because thetypeattribute is only a presentational hint and loses to any authorlist-style-type(prose typography setsdecimal); draws(a)/a)markers with the built-inlist-itemCSS counter (honours<ol start>), positioned in the list gutter so wrapped lines align like native markers.Verification
SSR-rendered list ASTs through the exact merged renderer stack from
root.tsx(defaultRenderers+JUPYTER_RENDERERS+LIST_RENDERERS):<ol start="1">(unchanged)(a)lower-alpha parens<ol start="1" type="a" class="delimiter-parens">(i)lower-roman parens<ol start="1" type="i" class="delimiter-parens">B)upper-alpha paren, start 2<ol start="2" type="A" class="delimiter-paren">iv.period style<ol start="4" type="i">(no class)<ul>(unchanged)npm run compile(tsc) passes;npm run build:csspasses and the emitted bundle contains the new rules.Test drive
A minimal page reproduces QuantEcon/mystmd#74:
Markers should read
(a)/(i)— decimals before this change. The PR preview workflow builds real lectures, though note the preview corpus may not contain fancy-list markers, in which case the preview mainly confirms no regression to ordinary lists.Lifetime
Interim override: the long-term home is jupyter-book/myst-theme's
myst-to-react, which can only be proposed once fancy-lists itself goes upstream to jupyter-book/mystmd (upstream's parser doesn't emitstyle/delimiter). That sequencing is tracked in QuantEcon/mystmd#51 — when it lands and this theme picks up the fixedmyst-to-react, dropapp/renderers.tsxandstyles/lists.css.🤖 Generated with Claude Code