Skip to content

Commit cc4e9fc

Browse files
fezcodefezcode
committed
fix(blog): render unlanguaged fenced code as block
React-markdown v10 removed the 'inline' prop, so the guard 'if (!inline && match)' only fired for code blocks with a language specifier. Unlanguaged fenced code fell through to the inline <code> fallback, which with border + padding renders as a 'pill per wrapped line' under box-drawing characters. Broaden the guard to also fire when children contains a newline, and default the highlighter language to 'text' when no language tag is present. Applied consistently across all ten blog views.
1 parent 26dd668 commit cc4e9fc

10 files changed

Lines changed: 26 additions & 26 deletions

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ const BrutalistBlogPostPage = () => {
120120
);
121121
};
122122

123-
if (!inline && match) {
123+
if (!inline && (match || /\n/.test(String(children)))) {
124124
return (
125125
<div className="relative group my-8">
126126
<div className="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -144,12 +144,12 @@ const BrutalistBlogPostPage = () => {
144144
<div className="border border-white/10 rounded-sm overflow-hidden shadow-2xl bg-zinc-950">
145145
<div className="bg-white/5 px-4 py-2 border-b border-white/10 flex justify-between items-center">
146146
<span className="font-mono text-[9px] uppercase tracking-[0.2em] text-gray-500">
147-
DATA_NODE: {match[1]}
147+
DATA_NODE: {match ? match[1] : 'text'}
148148
</span>
149149
</div>
150150
<SyntaxHighlighter
151151
style={customTheme}
152-
language={match[1]}
152+
language={match ? match[1] : 'text'}
153153
PreTag="div"
154154
CodeTag="code"
155155
customStyle={{

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ const DokumentBlogPostPage = () => {
199199
);
200200
};
201201

202-
if (!inline && match) {
202+
if (!inline && (match || /\n/.test(String(children)))) {
203203
return (
204204
<div className="relative group my-8">
205205
<div className="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -224,7 +224,7 @@ const DokumentBlogPostPage = () => {
224224

225225
<SyntaxHighlighter
226226
style={dokumentCodeTheme}
227-
language={match[1]}
227+
language={match ? match[1] : 'text'}
228228
PreTag="div"
229229
CodeTag="code"
230230
customStyle={{

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -237,7 +237,7 @@ const DossierBlogPostPage = () => {
237237
);
238238
};
239239

240-
if (!inline && match) {
240+
if (!inline && (match || /\n/.test(String(children)))) {
241241
return (
242242
<div className="relative group my-8">
243243
<div className="absolute -top-3 right-4 flex gap-2 z-10">
@@ -261,12 +261,12 @@ const DossierBlogPostPage = () => {
261261
<div className="border border-black bg-[#f0f0f0] shadow-[4px_4px_0px_0px_rgba(0,0,0,0.2)]">
262262
<div className="bg-black text-white px-2 py-1 text-xs font-mono uppercase tracking-widest border-b border-black flex justify-between">
263263
<span>
264-
{'//'} ATTACHMENT: {match[1]}
264+
{'//'} ATTACHMENT: {match ? match[1] : 'text'}
265265
</span>
266266
</div>
267267
<SyntaxHighlighter
268268
style={dossierCodeTheme}
269-
language={match[1]}
269+
language={match ? match[1] : 'text'}
270270
PreTag="div"
271271
CodeTag="code"
272272
customStyle={{

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ const EditorialBlogPostPage = () => {
119119
);
120120
};
121121

122-
if (!inline && match) {
122+
if (!inline && (match || /\n/.test(String(children)))) {
123123
return (
124124
<div
125125
className={`relative group my-8 border ${isInvert ? 'border-white/10' : 'border-black/10'}`}
@@ -149,12 +149,12 @@ const EditorialBlogPostPage = () => {
149149
<span
150150
className={`font-instr-sans text-[9px] uppercase tracking-[0.2em] ${isInvert ? 'text-white/50' : 'text-black/50'}`}
151151
>
152-
{match[1]}
152+
{match ? match[1] : 'text'}
153153
</span>
154154
</div>
155155
<SyntaxHighlighter
156156
style={isInvert ? darkTheme : lightTheme}
157-
language={match[1]}
157+
language={match ? match[1] : 'text'}
158158
PreTag="div"
159159
CodeTag="code"
160160
customStyle={{

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -166,7 +166,7 @@ const GalleyBlogPostPage = () => {
166166
);
167167
};
168168

169-
if (!inline && match) {
169+
if (!inline && (match || /\n/.test(String(children)))) {
170170
return (
171171
<div className="relative group my-10 -mx-4 md:-mx-8">
172172
<div className="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -190,15 +190,15 @@ const GalleyBlogPostPage = () => {
190190
<div className="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">
193-
Font tray · {match[1]}
193+
Font tray · {match ? match[1] : 'text'}
194194
</span>
195195
<span className="font-ibm-plex-mono text-[8.5px] uppercase tracking-[0.28em] text-[#C96442]">
196196
{'//'} composed
197197
</span>
198198
</div>
199199
<SyntaxHighlighter
200200
style={customTheme}
201-
language={match[1]}
201+
language={match ? match[1] : 'text'}
202202
PreTag="div"
203203
CodeTag="code"
204204
customStyle={{

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ const LuxeBlogPostPage = () => {
111111
});
112112
};
113113

114-
if (!inline && match) {
114+
if (!inline && (match || /\n/.test(String(children)))) {
115115
return (
116116
<div className="relative group my-12">
117117
{/* Action Overlay */}
@@ -137,12 +137,12 @@ const LuxeBlogPostPage = () => {
137137
<div className="rounded-sm overflow-hidden border border-[#1A1A1A]/5 shadow-sm bg-white">
138138
<div className="bg-[#FAFAF8] px-6 py-3 border-b border-[#1A1A1A]/5 flex justify-between items-center">
139139
<span className="font-outfit text-[10px] uppercase tracking-[0.2em] text-[#1A1A1A]/30 font-bold">
140-
Source Specimen: {match[1]}
140+
Source Specimen: {match ? match[1] : 'text'}
141141
</span>
142142
</div>
143143
<SyntaxHighlighter
144144
style={coy}
145-
language={match[1]}
145+
language={match ? match[1] : 'text'}
146146
PreTag="div"
147147
customStyle={{
148148
margin: 0,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ const OldBlogPostPage = () => {
186186
);
187187
};
188188

189-
if (!inline && match) {
189+
if (!inline && (match || /\n/.test(String(children)))) {
190190
if (match[1] === 'mermaid') {
191191
return <MermaidDiagram chart={String(children).replace(/\n$/, '')} />;
192192
}
@@ -213,7 +213,7 @@ const OldBlogPostPage = () => {
213213
<div className="rounded-lg overflow-hidden border border-gray-700/50 shadow-2xl">
214214
<SyntaxHighlighter
215215
style={customTheme}
216-
language={match[1]}
216+
language={match ? match[1] : 'text'}
217217
PreTag="div"
218218
CodeTag="code"
219219
customStyle={{

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ const TerminalBlogPostPage = () => {
231231
);
232232
};
233233

234-
if (!inline && match) {
234+
if (!inline && (match || /\n/.test(String(children)))) {
235235
return (
236236
<div className="relative group my-6 border border-orange-500 shadow-orange-glow">
237237
<div className="absolute -top-3 right-2 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
@@ -256,7 +256,7 @@ const TerminalBlogPostPage = () => {
256256

257257
<SyntaxHighlighter
258258
style={terminalCodeTheme}
259-
language={match[1]}
259+
language={match ? match[1] : 'text'}
260260
PreTag="div"
261261
CodeTag="code"
262262
customStyle={{

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ const TerminalGreenBlogPostPage = () => {
126126
return <MermaidDiagram chart={String(children).replace(/\n$/, '')} />;
127127
}
128128

129-
if (!inline && match) {
129+
if (!inline && (match || /\n/.test(String(children)))) {
130130
return (
131131
<div className="relative group my-6 border border-emerald-500/20 bg-black shadow-lg">
132132
<div className="absolute -top-3 right-2 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity z-10">
@@ -141,7 +141,7 @@ const TerminalGreenBlogPostPage = () => {
141141
</div>
142142
<SyntaxHighlighter
143143
style={emeraldTerminalTheme}
144-
language={match[1]}
144+
language={match ? match[1] : 'text'}
145145
PreTag="div"
146146
CodeTag="code"
147147
customStyle={{ background: 'transparent', padding: '1.5rem' }}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@ const TerracottaBlogPostPage = () => {
130130
);
131131
};
132132

133-
if (!inline && match) {
133+
if (!inline && (match || /\n/.test(String(children)))) {
134134
return (
135135
<div className="relative group my-8">
136136
<div className="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -152,12 +152,12 @@ const TerracottaBlogPostPage = () => {
152152
<div className="border border-[#1A161320] rounded-sm overflow-hidden shadow-[0_20px_40px_-25px_#1A161330] bg-[#15110E]">
153153
<div className="bg-[#1A1613] px-4 py-2 border-b border-[#F3ECE0]/10 flex justify-between items-center">
154154
<span className="font-mono text-[9px] uppercase tracking-[0.2em] text-[#F3ECE0]/50">
155-
DATA_NODE: {match[1]}
155+
DATA_NODE: {match ? match[1] : 'text'}
156156
</span>
157157
</div>
158158
<SyntaxHighlighter
159159
style={customTheme}
160-
language={match[1]}
160+
language={match ? match[1] : 'text'}
161161
PreTag="div"
162162
CodeTag="code"
163163
customStyle={{

0 commit comments

Comments
 (0)