Skip to content

Add style module resetting skin inline-code styling#39

Closed
kghbln wants to merge 1 commit into
masterfrom
fix-fenced-code-styling
Closed

Add style module resetting skin inline-code styling#39
kghbln wants to merge 1 commit into
masterfrom
fix-fenced-code-styling

Conversation

@kghbln

@kghbln kghbln commented Jul 16, 2026

Copy link
Copy Markdown
Member

MediaWiki skins style the bare code element (background, border, padding) for inline code. CommonMark renders fenced blocks as pre > code, a nesting wikitext never produces, so the inline styling painted a background pill per line inside the pre container. The new ext.nativeMarkdown.styles module resets it and leaves the block styling to the pre container.

Diagnosis and fix prepared with the help of Claude Code.
Co-Authored-By: Claude Fable 5 noreply@anthropic.com

Refs: #36
Fixes: #36

…ocks

Fixes #36

MediaWiki skins style the bare code element (background, border, padding)
for inline code. CommonMark renders fenced blocks as pre > code, a nesting
wikitext never produces, so the inline styling painted a background pill
per line inside the pre container. The new ext.nativeMarkdown.styles module
resets it and leaves the block styling to the pre container.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@codecov-commenter

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 84.58%. Comparing base (e4ef238) to head (5fb1085).

Additional details and impacted files
@@             Coverage Diff              @@
##             master      #39      +/-   ##
============================================
+ Coverage     84.56%   84.58%   +0.01%     
  Complexity      379      379              
============================================
  Files            37       37              
  Lines           985      986       +1     
============================================
+ Hits            833      834       +1     
  Misses          152      152              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@JeroenDeDauw

Copy link
Copy Markdown
Member

Subsumed by #41, which carries this same fix alongside the syntax highlighting for #37. Both add a style module and touch MarkdownContentHandler, so they cannot land independently.

Your diagnosis here was first and correct. #41 was written without noticing this PR, and has now adopted your module naming and layout (ext.nativeMarkdown.styles in resources/) over its own, with remoteExtPath set to NativeMarkdown/resources so that it agrees with localBasePath. Apologies for the duplicated effort.

AI-authored — Claude Code, Fable 5 (max); closure decided by @JeroenDeDauw after comparing both PRs; this comment text posted without human review.

@JeroenDeDauw
JeroenDeDauw deleted the fix-fenced-code-styling branch July 16, 2026 17:04
JeroenDeDauw added a commit that referenced this pull request Jul 16, 2026
* Syntax-highlight fenced code blocks via Extension:SyntaxHighlight

Fixes #37

A fenced code block whose info string names a language (```python) is now
highlighted server-side by Extension:SyntaxHighlight (Pygments) when that
extension is installed, matching how a wikitext <syntaxhighlight> block renders.
Without it -- or for a block with no info string, an unknown language, an
over-size block or a highlighter error -- the block keeps the default
<pre><code class="language-..."> rendering, so this is a silent progressive
enhancement with no hard dependency and no new configuration.

Delegation goes through a pure CodeHighlighter port with a SyntaxHighlight
adapter in Persistence and a no-op fallback, selected in the composition root by
ExtensionRegistry. Highlight attempts are capped per render (mirroring the
template-expansion cap) because each block can shell out to Pygments and there
is no expensive-function budget in the ContentHandler context. The required
ResourceLoader modules (ext.pygments, ext.pygments.view) are registered on the
ParserOutput only when a block was actually highlighted.

Possible follow-up: a tracking category for pages whose fenced languages could
not be highlighted.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* Reset skin inline-code styling inside fenced code blocks

Fixes #36

Skins style bare `code` for inline use, giving it a background, a border
and padding. Since `code` is an inline element, that background paints
once per line box, so a code block showed a pill behind every one of its
lines inside the box `pre` already draws. Wikitext never nests the two
elements, so no skin resets this, while CommonMark renders every code
block as `pre > code`.

Ships the extension's first style module, loaded on every markdown page:
it is tiny, it also covers indented code blocks, and it gives future
markdown-specific styling a home.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* Clone SyntaxHighlight over any cached copy in CI

The MediaWiki cache turned out to keep extensions/, despite the
`!mediawiki/extensions/` exclusion, so once the cache was warm the
restored tree already contained SyntaxHighlight and the clone step
failed on a non-empty destination. It only passed the first time round
because the cache was still cold.

Remove the directory before cloning, so the step is correct with a cold
or a warm cache without needing a cache key bump, and drop the comment
claiming the cache excludes extensions/.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* Adopt the style module naming from #39

Renames ext.nativeMarkdown.content to ext.nativeMarkdown.styles and moves
its CSS from modules/ to resources/, matching both Karsten's independent
fix in #39 and the house convention WikibaseFacetedSearch and Maps follow.
Sets remoteExtPath to NativeMarkdown/resources so it agrees with
localBasePath, which matters as soon as the CSS references a file.

Drops the border-radius reset: it does nothing once the border is gone and
the background is transparent.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fenced code blocks: skin inline-code styling bleeds into pre > code (per-line background pills)

3 participants