Skip to content

Commit 158aa8e

Browse files
authored
fix: better support for unrecognized languages (#23188)
<!--Delete sections as needed --> ## Description Degrade nicely when a code fence uses an unrecognized language. <img width="1865" height="628" alt="Frame 35" src="https://github.com/user-attachments/assets/e819a128-4025-404b-a421-51f571382d2e" />
1 parent 504ef8a commit 158aa8e

File tree

2 files changed

+23
-34
lines changed

2 files changed

+23
-34
lines changed

assets/css/global.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,3 +92,7 @@ input[type="search"]::-ms-clear {
9292
color: var(--color-blue-400);
9393
}
9494
}
95+
96+
code{
97+
font-size:0.9em;
98+
}

assets/css/utilities.css

Lines changed: 19 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -138,50 +138,35 @@
138138
}
139139

140140
@utility prose {
141-
.highlight,
142-
:not(pre) > code {
143-
font-size: 0.875em;
144-
border: 1px solid;
145-
border-radius: 0.25rem; /* theme("spacing.1") fallback */
146-
border: none;
147-
background: transparent;
148-
&::before,
149-
&::after {
150-
content: none !important;
151-
}
152-
}
153-
154-
:not(pre) > code {
155-
background: var(--tw-prose-code-bg);
156-
.dark & {
157-
background: var(--tw-prose-code-bg-dark);
158-
}
159-
display: inline-block;
160-
margin: 0;
161-
font-weight: 400;
162-
overflow-wrap: anywhere;
163-
padding: 0 4px;
164-
}
165-
166141
table:not(.lntable) code {
167142
overflow-wrap: unset;
168143
white-space: nowrap;
169144
}
170145

171-
/* Indented code blocks */
172-
pre:not(.chroma) {
173-
@apply my-4 overflow-x-auto p-3;
146+
/* code in `inline code` style */
147+
:where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)),
148+
a>code {
174149
font-size: 0.875em;
175-
border: 1px solid;
176-
border-radius: 0.25rem; /* theme("spacing.1") fallback */
177-
background: var(--color-white-main);
178-
border-color: var(--color-gray-300);
150+
font-weight: 400 !important;
151+
border: 1px solid !important;
152+
border-radius: 0.25rem;
153+
border: none !important;
154+
padding: 4px !important;
155+
background: var(--tw-prose-code-bg) !important;
179156
.dark & {
180-
background: var(--color-gray-200);
181-
border-color: var(--color-gray-400);
157+
background: var(--tw-prose-code-bg-dark) !important;
158+
}
159+
&::before,
160+
&::after {
161+
content: none !important;
182162
}
183163
}
184164

165+
/* code blocks with unrecognized languages*/
166+
pre:not(.chroma) {
167+
@apply overflow-x-auto p-3;
168+
}
169+
185170
.highlight {
186171
@apply my-0 overflow-x-auto p-2;
187172

0 commit comments

Comments
 (0)