Skip to content

Commit 109c27d

Browse files
gingerwizardgingerwizard
committed
use old code
1 parent 284990d commit 109c27d

File tree

7 files changed

+154
-419
lines changed

7 files changed

+154
-419
lines changed

‎docs/quick-start.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ ORDER BY timestamp
138138
```
139139
Notice the response comes back in a nice table format:
140140

141-
```response
141+
```text
142142
┌─user_id─┬─message────────────────────────────────────────────┬───────────timestamp─┬──metric─┐
143143
│ 102 │ Insert a lot of rows per batch │ 2022-03-21 00:00:00 │ 1.41421 │
144144
│ 102 │ Sort your data based on your commonly-used queries │ 2022-03-22 00:00:00 │ 2.718 │

‎docusaurus.config.en.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@ const config = {
287287
prism: {
288288
theme: themes.darkTheme,
289289
darkTheme: themes.darkTheme,
290-
additionalLanguages: ["java", "cpp", "rust"],
290+
additionalLanguages: ["java", "cpp", "rust", "python"],
291291
magicComments: [
292292
// Remember to extend the default highlight class name as well!
293293
{

‎src/components/CodeViewer/index.tsx

+35-25
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { ChartConfig, ChartType } from './types'
55
import { base64Decode } from './utils'
66
import { useColorMode } from '@docusaurus/theme-common'
77
import { isValidElement } from 'react'
8+
import DocusaurusCodeBlock from '@theme-original/CodeBlock';
89

910
function getCodeContent(children: any): string {
1011
if (typeof children === 'string') return children
@@ -49,6 +50,7 @@ function CodeViewer({
4950
show_statistics = 'true',
5051
style = '',
5152
title='',
53+
click_ui = 'false',
5254
children,
5355
...props
5456
}: any) {
@@ -78,36 +80,44 @@ function CodeViewer({
7880
const header = title ? (
7981
<>
8082
<Text className='pl-[16px] pt-[14px]' size='md'>{title}</Text>
81-
<Separator size="md"/>
8283
</>
8384
): null
85+
86+
const code_block = click_ui === 'true' ? (
87+
<CodeBlock
88+
style={combinedStyle}
89+
className={`code-viewer`}
90+
language={language}
91+
onCopy={function Da() {}}
92+
onCopyError={function Da() {}}
93+
showLineNumbers={showLineNumbers}
94+
theme={colorMode}
95+
wrapLines={false}
96+
>
97+
{typeof children === 'string' ? children : getCodeContent(children)}
98+
</CodeBlock>
99+
): (
100+
<DocusaurusCodeBlock children={children} className={`language-${language}`}/>
101+
)
102+
const results = runnable ? (
103+
<CodeInterpreter
104+
link={link}
105+
run={runBoolean}
106+
runnable={runnableBoolean}
107+
queryString={typeof children === 'string' ? children : getCodeContent(children)}
108+
view={chart ? view : DefaultView.Table}
109+
chart={chart}
110+
settings={clickhouse_settings}
111+
show_statistics={showStatistics}
112+
/>
113+
): null
114+
84115
return (
85-
<div className={`code-viewer mb-[12px] ${colorMode === 'dark' ? 'bg-[#282828]' : 'bg-[#f5f5f5]'}`}>
116+
<div className={`code-viewer mb-[12px] ${colorMode === 'dark' ? 'bg-[#292D3E]' : 'bg-[#f5f5f5]'}`}>
86117
<ClickUIProvider theme={colorMode}>
87118
{ header }
88-
<CodeBlock
89-
style={combinedStyle}
90-
className={`code-viewer`}
91-
language={language}
92-
onCopy={function Da() {}}
93-
onCopyError={function Da() {}}
94-
showLineNumbers={showLineNumbers}
95-
theme={colorMode}
96-
wrapLines={false}
97-
>
98-
{typeof children === 'string' ? children : getCodeContent(children)}
99-
</CodeBlock>
100-
101-
<CodeInterpreter
102-
link={link}
103-
run={runBoolean}
104-
runnable={runnableBoolean}
105-
queryString={typeof children === 'string' ? children : getCodeContent(children)}
106-
view={chart ? view : DefaultView.Table}
107-
chart={chart}
108-
settings={clickhouse_settings}
109-
show_statistics={showStatistics}
110-
/>
119+
{ code_block }
120+
{ results }
111121
</ClickUIProvider>
112122
</div>
113123

‎src/css/custom.scss

+115-4
Original file line numberDiff line numberDiff line change
@@ -228,12 +228,123 @@ html {
228228
font-size: 16px;
229229
}
230230

231-
.code-viewer pre {
232-
font-size: inherit !important;
231+
/* === Base <code> styles === */
232+
code {
233+
font-weight: bold;
234+
font-size: 0.95em;
235+
border-radius: 0;
236+
padding: 0.15em 0.35em;
237+
scrollbar-width: thin;
238+
scrollbar-color: rgb(99, 99, 99) rgb(41, 45, 62);
239+
}
240+
241+
/* Normalize inner span styles */
242+
code span {
243+
font-style: normal !important;
244+
}
245+
246+
/* === Theme-specific inline <code> backgrounds === */
247+
html[data-theme='dark'] pre,
248+
html[data-theme='dark'] pre code,
249+
html[data-theme='dark'] code {
250+
background: none !important;
251+
background-color: #292D3E !important;
252+
box-shadow: none !important;
253+
filter: none !important;
254+
border: none !important;
255+
}
256+
257+
html[data-theme='light'] code {
258+
background-color: #f5f5f5 !important;
259+
color: #000 !important;
260+
}
261+
262+
/* === Block code (pre) === */
263+
pre {
264+
padding: 1rem;
265+
border-radius: 0 !important;
266+
}
267+
268+
html[data-theme='light'] pre,
269+
html[data-theme='light'] pre code {
270+
background-color: #f5f5f5 !important;
271+
color: #000 !important;
272+
}
273+
274+
html[data-theme='dark'] pre,
275+
html[data-theme='dark'] pre code {
276+
background-color: #292D3E !important;
277+
color: var(--prism-color);
278+
}
279+
280+
/* === Prism token styles (Dark Theme) === */
281+
code .token.keyword {
282+
font-style: italic !important;
283+
color: rgb(86, 156, 214) !important;
284+
}
285+
286+
code .token.plain {
287+
color: rgb(156, 220, 254) !important;
288+
}
289+
290+
code .token.punctuation {
291+
color: rgb(199, 146, 234) !important;
292+
}
293+
294+
code .token.operator {
295+
color: rgb(137, 221, 255) !important;
296+
}
297+
298+
code .token.string {
299+
color: rgb(206, 145, 120) !important;
300+
}
301+
302+
code .token.number {
303+
color: rgb(181, 206, 168) !important;
304+
}
305+
306+
code .token.function {
307+
color: rgb(220, 220, 170) !important;
308+
}
309+
310+
/* === Prism token styles (Light Theme) === */
311+
html[data-theme='light'] code .token.keyword {
312+
font-style: italic !important;
313+
color: rgb(0, 92, 154) !important;
314+
}
315+
316+
html[data-theme='light'] code .token.plain {
317+
color: rgb(36, 41, 46) !important;
318+
}
319+
320+
html[data-theme='light'] code .token.identifier {
321+
color: rgb(0, 102, 204) !important;
322+
}
323+
324+
html[data-theme='light'] code .token.punctuation {
325+
color: rgb(125, 86, 148) !important;
326+
}
327+
328+
html[data-theme='light'] code .token.operator {
329+
color: rgb(0, 112, 138) !important;
330+
}
331+
332+
html[data-theme='light'] code .token.string {
333+
color: rgb(163, 21, 21) !important;
334+
}
335+
336+
html[data-theme='light'] code .token.number {
337+
color: rgb(34, 134, 58) !important;
338+
}
339+
340+
html[data-theme='light'] code .token.function {
341+
color: rgb(88, 92, 63) !important;
233342
}
234343

235-
.code-viewer pre code {
236-
font-size: inherit !important;
344+
/* Ensure keywords are not italic if nested */
345+
html[data-theme='light'] code span.token.keyword,
346+
code span.token.keyword {
347+
font-style: normal !important;
237348
}
238349

239350
.markdown h1:first-child {

‎src/theme/CodeBlock/Container/styles.module.css

-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
11
.codeBlockContainer {
2-
background: var(--prism-background-color);
3-
color: var(--prism-color);
4-
margin-bottom: var(--ifm-leading);
5-
box-shadow: var(--ifm-global-shadow-lw);
6-
border-radius: var(--ifm-code-border-radius);
7-
--ifm-code-background: var(--prism-background-color);
8-
--ifm-pre-color: var(--prism-color);
9-
overflow-x: scroll;
102
}
113

‎src/theme/CodeBlock/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ function countLines(text) {
1212

1313
function parseMetaString(meta = '') {
1414
const result = {}
15-
const implicit_settings = ['runnable', 'run', 'show_statistics']
15+
const implicit_settings = ['runnable', 'run', 'show_statistics', 'click_ui']
1616

1717
meta.split(' ').forEach((part) => {
1818
if (!part) return
@@ -72,7 +72,7 @@ export default function CodeBlockWrapper(props) {
7272
);
7373
}
7474

75-
75+
7676
const settings = parseMetaString(props.metastring);
7777
settings['language'] = props.className ? props.className.replace('language-', ''): 'txt';
7878
return (

0 commit comments

Comments
 (0)