Skip to content

Commit 5681868

Browse files
fezcodefezcode
committed
fix(galley): anchor code styles on wrapper class, not language class
react-syntax-highlighter emits <code> without any class attribute, so code[class*='language-'] selectors never matched anything in the DOM and prose's default color kept winning. Add a galley-code class on the outer wrapper div and anchor the token table on that instead — now .galley-code code + .galley-code .token.keyword etc. win the cascade unambiguously.
1 parent a9a9ca3 commit 5681868

3 files changed

Lines changed: 40 additions & 38 deletions

File tree

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "fezcodex",
3-
"version": "0.24.30",
3+
"version": "0.24.31",
44
"private": true,
55
"homepage": "https://fezcode.com",
66
"dependencies": {

‎src/pages/blog-views/GalleyBlogPostPage.jsx‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ const GalleyBlogPostPage = () => {
187187
Lift
188188
</button>
189189
</div>
190-
<div className="border border-[#1A161340] bg-[#EDE3D2] overflow-hidden">
190+
<div className="galley-code border border-[#1A161340] bg-[#EDE3D2] overflow-hidden">
191191
<div className="flex items-center justify-between px-4 py-1.5 border-b border-[#1A161320] bg-[#E8DECE]">
192192
<span className="font-ibm-plex-mono text-[8.5px] uppercase tracking-[0.28em] text-[#2E2620]/70">
193193
Font tray · {match ? match[1] : 'text'}
@@ -506,43 +506,45 @@ const GalleyBlogPostPage = () => {
506506
font-style: normal;
507507
}
508508
509-
/* syntax theme — nuclear option: hit code + every token with high specificity */
510-
.galley-body code[class*="language-"],
511-
.galley-body pre[class*="language-"],
512-
.galley-body code[class*="language-"] * {
509+
/* syntax theme — the syntax-highlighter code element ships with no class,
510+
so we anchor on the wrapper .galley-code + descendant code/span. */
511+
.galley-code code,
512+
.galley-code code span,
513+
.galley-code code * {
513514
color: #1A1613 !important;
514515
text-shadow: none !important;
516+
background: transparent !important;
515517
}
516-
.galley-body code[class*="language-"] .token.comment,
517-
.galley-body code[class*="language-"] .token.prolog,
518-
.galley-body code[class*="language-"] .token.doctype,
519-
.galley-body code[class*="language-"] .token.cdata { color: #8A7C68 !important; font-style: italic; }
520-
.galley-body code[class*="language-"] .token.punctuation { color: #3A302A !important; }
521-
.galley-body code[class*="language-"] .token.property,
522-
.galley-body code[class*="language-"] .token.class-name,
523-
.galley-body code[class*="language-"] .token.constant,
524-
.galley-body code[class*="language-"] .token.symbol,
525-
.galley-body code[class*="language-"] .token.deleted { color: #8A4A1B !important; font-weight: 600; }
526-
.galley-body code[class*="language-"] .token.number,
527-
.galley-body code[class*="language-"] .token.boolean { color: #8A3E1C !important; }
528-
.galley-body code[class*="language-"] .token.selector,
529-
.galley-body code[class*="language-"] .token.string,
530-
.galley-body code[class*="language-"] .token.char,
531-
.galley-body code[class*="language-"] .token.inserted,
532-
.galley-body code[class*="language-"] .token.attr-name,
533-
.galley-body code[class*="language-"] .token.attr-value { color: #556B2F !important; }
534-
.galley-body code[class*="language-"] .token.operator,
535-
.galley-body code[class*="language-"] .token.entity,
536-
.galley-body code[class*="language-"] .token.url { color: #7A3020 !important; }
537-
.galley-body code[class*="language-"] .token.keyword,
538-
.galley-body code[class*="language-"] .token.atrule,
539-
.galley-body code[class*="language-"] .token.regex,
540-
.galley-body code[class*="language-"] .token.tag { color: #5C3A87 !important; font-weight: 600; }
541-
.galley-body code[class*="language-"] .token.function,
542-
.galley-body code[class*="language-"] .token.builtin { color: #1F4A78 !important; font-weight: 600; }
543-
.galley-body code[class*="language-"] .token.important { color: #7A3020 !important; font-weight: bold; }
544-
.galley-body code[class*="language-"] .token.bold { font-weight: bold; }
545-
.galley-body code[class*="language-"] .token.italic { font-style: italic; }
518+
.galley-code .token.comment,
519+
.galley-code .token.prolog,
520+
.galley-code .token.doctype,
521+
.galley-code .token.cdata { color: #8A7C68 !important; font-style: italic; }
522+
.galley-code .token.punctuation { color: #3A302A !important; }
523+
.galley-code .token.property,
524+
.galley-code .token.class-name,
525+
.galley-code .token.constant,
526+
.galley-code .token.symbol,
527+
.galley-code .token.deleted { color: #8A4A1B !important; font-weight: 600; }
528+
.galley-code .token.number,
529+
.galley-code .token.boolean { color: #8A3E1C !important; }
530+
.galley-code .token.selector,
531+
.galley-code .token.string,
532+
.galley-code .token.char,
533+
.galley-code .token.inserted,
534+
.galley-code .token.attr-name,
535+
.galley-code .token.attr-value { color: #556B2F !important; }
536+
.galley-code .token.operator,
537+
.galley-code .token.entity,
538+
.galley-code .token.url { color: #7A3020 !important; }
539+
.galley-code .token.keyword,
540+
.galley-code .token.atrule,
541+
.galley-code .token.regex,
542+
.galley-code .token.tag { color: #5C3A87 !important; font-weight: 600; }
543+
.galley-code .token.function,
544+
.galley-code .token.builtin { color: #1F4A78 !important; font-weight: 600; }
545+
.galley-code .token.important { color: #7A3020 !important; font-weight: bold; }
546+
.galley-code .token.bold { font-weight: bold; }
547+
.galley-code .token.italic { font-style: italic; }
546548
`}</style>
547549

548550
<MarginMark glyph="¶" note="set" />

0 commit comments

Comments
 (0)