TIL: Prettier MDX/JSX formatting quirk with nested elements Dark _ □ ✕
  • Posts
  • About
  • Debug
Post

TIL: Prettier MDX/JSX formatting quirk with nested elements

Published
2026-09-06 07:45 UTC (precision: second)
Source feed
msfjarvis.dev [exclude this blog]
Link
https://msfjarvis.dev/notes/til-prettier-mdx-jsx-formatting-quirk-with-nested-elements/
Canonical
https://msfjarvis.dev/notes/til-prettier-mdx-jsx-formatting-quirk-with-nested-elements
Length
2212 runes
Extracted text
Prettier is a JavaScript-based formatter that I use for this very site’s codebase, since it is quite extensible and can handle a wide variety of formats. I recently noticed a specific quirk with it where you need to specifically pre-format JSX in a certain way to get a specific output from it. With this source document and no formatting configured: <Figure src={lego_dino_onesie} alt="A large red LEGO character wearing a dino onesie holding a small dinosaur egg" /> <Gallery> <Figure src={lego_dino_onesie} alt="A large red LEGO character wearing a dino onesie holding a small dinosaur egg" /> <Figure src={lego_spiderman} alt="A LEGO Spider-Man figure displayed among other models" /> </Gallery> You will get this output (Prettier playground): <Figure src={lego_dino_onesie} alt="A large red LEGO character wearing a dino onesie holding a small dinosaur egg" /> <Gallery> <Figure src={lego_dino_onesie} alt="A large red LEGO character wearing a dino onesie holding a small dinosaur egg" /> <Figure src={lego_spiderman} alt="A LEGO Spider-Man figure displayed among other models" /> </Gallery> Notice how the outer Figure is now 2 space indented but the inner ones didn’t change? Here’s how you need to manually lay out the inner text for Prettier to format it like the other one: <Figure src={lego_dino_onesie} alt="A large red LEGO character wearing a dino onesie holding a small dinosaur egg" /> <Gallery> <Figure src={lego_dino_onesie} alt="A large red LEGO character wearing a dino onesie holding a small dinosaur egg" /> <Figure src={lego_spiderman} alt="A LEGO Spider-Man figure displayed among other models" /> </Gallery> Formatting this version with Prettier will give you the expected variant (Prettier playground): <Figure src={lego_dino_onesie} alt="A large red LEGO character wearing a dino onesie holding a small dinosaur egg" /> <Gallery> <Figure src={lego_dino_onesie} alt="A large red LEGO character wearing a dino onesie holding a small dinosaur egg" /> <Figure src={lego_spiderman} alt="A LEGO Spider-Man figure displayed among other models" /> </Gallery> I think it will be fixed by this PR, but it has been in-progress for nearly 10 months now without any indication of an imminent merge.
Stored topics

Every stored assignment is listed, including rows below the current cutoff (0.75), so a missing tag can be explained.

Concept Code Score Meter Margin Origin Path
science and technology science-and-technology 0.99 4.50 direct science and technology
technology and engineering technology-and-engineering 0.98 3.67 direct science and technology > technology and engineering
information technology and computer science information-technology-and-computer 0.97 3.63 direct science and technology > technology and engineering > information technology and computer science
economy, business and finance economy-business-and-finance 0.93 2.51 ↑derived from local:software-development economy, business and finance
products and services products-and-services 0.93 2.51 ↑derived from local:software-development economy, business and finance > products and services
computing and information technology computing-and-information-technology 0.93 2.51 ↑derived from local:software-development economy, business and finance > products and services > computing and information technology
software and applications software-and-applications 0.93 2.51 ↑derived from local:software-development economy, business and finance > products and services > computing and information technology > software and applications
Software development software-development 0.93 2.51 direct economy, business and finance > products and services > computing and information technology > software and applications > Software development
arts, culture, entertainment and media arts-culture-entertainment-and-media 0.92 2.39 ↑derived from 20000003 arts, culture, entertainment and media
arts and entertainment arts-and-entertainment 0.92 2.39 ↑derived from 20000003 arts, culture, entertainment and media > arts and entertainment
animation animation 0.92 2.39 direct arts, culture, entertainment and media > arts and entertainment > animation
lifestyle and leisure lifestyle-and-leisure 0.83 1.59 ↑derived from 20000548 lifestyle and leisure
leisure leisure 0.83 1.59 ↑derived from 20000548 lifestyle and leisure > leisure
game game 0.83 1.59 ↑derived from 20000548 lifestyle and leisure > leisure > game
video game video-game 0.83 1.59 direct lifestyle and leisure > leisure > game > video game
media and entertainment industry media-and-entertainment-industry 0.83 1.59 ↑derived from 20000307 economy, business and finance > products and services > media and entertainment industry
film industry film-industry 0.83 1.59 direct economy, business and finance > products and services > media and entertainment industry > film industry
Open source open-source 0.79 1.35 direct economy, business and finance > products and services > computing and information technology > software and applications > Open source
Information security information-security 0.72 0.94 direct science and technology > technology and engineering > information technology and computer science > Information security
books and publishing books-and-publishing 0.48 -0.09 direct economy, business and finance > products and services > media and entertainment industry > books and publishing
artificial intelligence artificial-intelligence 0.35 -0.61 direct science and technology > technology and engineering > information technology and computer science > artificial intelligence
sport sport 0.33 -0.71 ↑derived from 20001183 sport
competition discipline competition-discipline 0.33 -0.71 ↑derived from 20001183 sport > competition discipline
eSports esports 0.33 -0.71 direct sport > competition discipline > eSports
Tabletop gaming tabletop-gaming 0.32 -0.74 direct lifestyle and leisure > leisure > game > Tabletop gaming
mass media mass-media 0.23 -1.19 ↑derived from 20000051 arts, culture, entertainment and media > mass media
television television 0.23 -1.19 direct arts, culture, entertainment and media > mass media > television
natural science natural-science 0.19 -1.43 ↑derived from 20000719 science and technology > natural science
biology biology 0.19 -1.43 direct science and technology > natural science > biology
literature literature 0.15 -1.70 direct arts, culture, entertainment and media > arts and entertainment > literature
MMORPG mmorpg 0.14 -1.80 direct lifestyle and leisure > leisure > game > video game > MMORPG
Self-hosting self-hosting 0.11 -2.04 direct economy, business and finance > products and services > computing and information technology > Self-hosting
board game board-game 0.09 -2.30 direct lifestyle and leisure > leisure > game > board game
social media social-media 0.07 -2.62 ↑derived from local:blogging arts, culture, entertainment and media > mass media > social media
Blogging blogging 0.07 -2.62 direct arts, culture, entertainment and media > mass media > social media > Blogging
crime, law and justice crime-law-and-justice 0.07 -2.65 ↑derived from 20000086 crime, law and justice
crime crime 0.07 -2.65 ↑derived from 20000086 crime, law and justice > crime
cyber crime cyber-crime 0.07 -2.65 direct crime, law and justice > crime > cyber crime
streaming service streaming-service 0.06 -2.71 direct economy, business and finance > products and services > media and entertainment industry > streaming service
health health 0.06 -2.81 ↑derived from 20000458 health
disease and condition disease-and-condition 0.06 -2.81 ↑derived from 20000458 health > disease and condition
mental health and disorder mental-health-and-disorder 0.06 -2.81 direct health > disease and condition > mental health and disorder
scientific research scientific-research 0.05 -2.87 ↑derived from 20000739 science and technology > scientific research
scientific exploration scientific-exploration 0.05 -2.87 ↑derived from 20000739 science and technology > scientific research > scientific exploration
space exploration space-exploration 0.05 -2.87 direct science and technology > scientific research > scientific exploration > space exploration
social sciences social-sciences 0.05 -2.88 direct science and technology > social sciences
environment environment 0.05 -2.89 direct environment
visual arts visual-arts 0.05 -2.90 ↑derived from 20000036 arts, culture, entertainment and media > arts and entertainment > visual arts
photography photography 0.05 -2.90 direct arts, culture, entertainment and media > arts and entertainment > visual arts > photography
culture culture 0.05 -3.01 direct arts, culture, entertainment and media > culture
society society 0.05 -3.05 ↑derived from 20001300 society
fundamental rights fundamental-rights 0.05 -3.05 ↑derived from 20001300 society > fundamental rights
privacy privacy 0.05 -3.05 direct society > fundamental rights > privacy
podcast podcast 0.04 -3.24 direct economy, business and finance > products and services > media and entertainment industry > podcast
hobby hobby 0.04 -3.28 direct lifestyle and leisure > leisure > hobby
food and drink enthusiasm food-and-drink-enthusiasm 0.03 -3.32 direct lifestyle and leisure > leisure > hobby > food and drink enthusiasm
music music 0.03 -3.32 direct arts, culture, entertainment and media > arts and entertainment > music
labour labour 0.03 -3.38 direct labour
education education 0.03 -3.52 direct education
consumer goods consumer-goods 0.03 -3.53 ↑derived from 20001160 economy, business and finance > products and services > consumer goods
handicrafts handicrafts 0.03 -3.53 direct economy, business and finance > products and services > consumer goods > handicrafts
Cryptography cryptography 0.02 -3.68 direct science and technology > technology and engineering > information technology and computer science > Cryptography
human interest human-interest 0.02 -3.76 ↑derived from 20000498 human interest
award and prize award-and-prize 0.02 -3.76 direct human interest > award and prize
politics and government politics-and-government 0.02 -3.84 direct politics and government
card game card-game 0.02 -3.86 direct lifestyle and leisure > leisure > game > card game
health treatment and procedure health-treatment-and-procedure 0.02 -3.91 direct health > health treatment and procedure
history history 0.02 -4.00 direct science and technology > social sciences > history
family family 0.01 -4.26 direct society > family
disaster, accident and emergency incident disaster-accident-and-emergency-incident 0.01 -4.45 direct disaster, accident and emergency incident
public health public-health 0.01 -4.46 direct health > public health
conflict, war and peace conflict-war-and-peace 0.01 -4.59 direct conflict, war and peace
exercise and fitness exercise-and-fitness 0.01 -4.68 direct lifestyle and leisure > wellness > exercise and fitness
wellness wellness 0.01 -4.68 ↑derived from 20001239 lifestyle and leisure > wellness
travel and tourism travel-and-tourism 0.01 -5.06 direct lifestyle and leisure > leisure > travel and tourism
climate change climate-change 0.01 -5.07 direct environment > climate change
religion religion 0.00 -5.61 direct religion
diet diet 0.00 -5.67 direct health > health treatment and procedure > diet
weather weather 0.00 -5.95 direct weather
weather forecast weather-forecast 0.00 -6.30 direct weather > weather forecast
lifestyle lifestyle 0.00 -6.84 ↑derived from 20001257 lifestyle and leisure > lifestyle
house and home house-and-home 0.00 -6.84 ↑derived from 20001257 lifestyle and leisure > lifestyle > house and home
gardening gardening 0.00 -6.84 direct lifestyle and leisure > lifestyle > house and home > gardening

← Back to posts

feedtagger 0.1.0-dev model: modernbert-base-zeroshot-v2.0/int8@all-s256 2115 posts 0 unclassified min score 0.75