Skip to content

Commit c382a65

Browse files
righrigh
committed
add themes
1 parent f157d23 commit c382a65

File tree

12 files changed

+232
-137
lines changed

12 files changed

+232
-137
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,3 +107,4 @@ typings/
107107
stories/
108108
storybook-static/
109109
.idea
110+
.DS_Store

‎Makefile‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,10 @@ build_js_katex:
6969
.PHONY: build_css
7070
build_css:
7171
yarn
72+
yarn run build-default-css
73+
yarn run build-dark-css
74+
yarn run build-darkbronco-css
75+
yarn run build-dorkula-css
7276
yarn run build-chesterish-css
7377
yarn run build-grade3-css
7478
yarn run build-gruvboxd-css
@@ -82,6 +86,10 @@ build_css:
8286
.PHONY: build_css_katex
8387
build_css_katex:
8488
cd katex && yarn
89+
cd katex && yarn run build-default-css
90+
cd katex && yarn run build-dark-css
91+
cd katex && yarn run build-darkbronco-css
92+
cd katex && yarn run build-dorkula-css
8593
cd katex && yarn run build-chesterish-css
8694
cd katex && yarn run build-grade3-css
8795
cd katex && yarn run build-gruvboxd-css

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@
1111
"analyze": "rm -rf ./dist && webpack --analyze",
1212
"storybook": "start-storybook -p 6006",
1313
"build-storybook": "build-storybook",
14+
"build-default-css": "lessc --clean-css ./src/styles/default.less ./dist/styles/default.css",
15+
"build-dark-css": "lessc --clean-css ./src/styles/dark.less ./dist/styles/dark.css",
16+
"build-darkbronco-css": "lessc --clean-css ./src/styles/darkbronco.less ./dist/styles/darkbronco.css",
17+
"build-dorkula-css": "lessc --clean-css ./src/styles/dorkula.less ./dist/styles/dorkula.css",
1418
"build-chesterish-css": "lessc --clean-css ./src/styles/chesterish.less ./dist/styles/chesterish.css",
1519
"build-grade3-css": "lessc --clean-css ./src/styles/grade3.less ./dist/styles/grade3.css",
1620
"build-gruvboxd-css": "lessc --clean-css ./src/styles/gruvboxd.less ./dist/styles/gruvboxd.css",

‎src/components/Cell.tsx‎

Lines changed: 118 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -45,18 +45,22 @@ export const Cell: React.FC<CellProps> = ({ cell, seq }) => {
4545
background: "transparent",
4646
};
4747
}
48+
if (!cell.outputs?.length) {
49+
return null;
50+
}
51+
4852
return (
4953
<div className="cell border-box-sizing code_cell rendered">
5054
<div className="input">
5155
<div className="prompt input_prompt">
5256
{cell.cell_type === "code" ? (
53-
<>
57+
<span>
5458
In [
5559
{seqAsExecutionCount
5660
? seq
5761
: cell.execution_count || cell.prompt_number || " "}
5862
]:
59-
</>
63+
</span>
6064
) : null}
6165
</div>
6266
<div className="inner_cell">
@@ -78,7 +82,16 @@ export const Cell: React.FC<CellProps> = ({ cell, seq }) => {
7882
if (cell.cell_type === "code") {
7983
return (
8084
<div className="input_area">
81-
<div className="highlight hl-ipython3">
85+
<div
86+
className="highlight hl-ipython3"
87+
onDoubleClick={(e) => {
88+
const selection = window.getSelection();
89+
const range = document.createRange();
90+
range.selectNodeContents(e.currentTarget);
91+
selection?.removeAllRanges();
92+
selection?.addRange(range);
93+
}}
94+
>
8295
{source && (
8396
<Prism
8497
language={language}
@@ -100,147 +113,146 @@ export const Cell: React.FC<CellProps> = ({ cell, seq }) => {
100113
})()}
101114
</div>
102115
</div>
103-
{!cell.outputs?.length ? null : (
104-
<div className="output_wrapper">
105-
<div className="output">
106-
{(cell.outputs || []).map((output, j) => (
107-
<div className="output_area" key={j}>
108-
<div className="prompt output_prompt">
109-
{output.execution_count && (
110-
<>Out [{output.execution_count}]:</>
111-
)}
112-
</div>
113-
{(() => {
114-
if (output.data == null) {
115-
if (output.png) {
116-
return (
117-
<div className="output_png output_subarea">
118-
<img
119-
src={`data:image/png;base64,${output.png}`}
120-
alt="output png"
121-
/>
122-
</div>
123-
);
124-
}
125-
if (output.jpeg) {
126-
return (
127-
<div className="output_jpeg output_subarea">
128-
<img
129-
src={`data:image/jpeg;base64,${output.jpeg}`}
130-
alt="output jpeg"
131-
/>
132-
</div>
133-
);
134-
}
135-
if (output.gif) {
136-
return (
137-
<div className="output_gif output_subarea">
138-
<img
139-
src={`data:image/gif;base64,${output.gif}`}
140-
alt="output gif"
141-
/>
142-
</div>
143-
);
144-
}
145-
if (output.svg) {
146-
return (
147-
<div
148-
className="output_svg output_subarea"
149-
dangerouslySetInnerHTML={{
150-
__html: htmlFilter(output.svg),
151-
}}
152-
></div>
153-
);
154-
}
155-
if (output.text) {
156-
return (
157-
<div
158-
className={`output_subarea output_text output_${output.output_type} output_${output.name} output-${output.name}`}
159-
>
160-
<pre>{stringify(output.text)}</pre>
161-
</div>
162-
);
163-
}
164-
if (output.traceback) {
165-
return <div className="output_subarea output_error">
166-
<Ansi>{stringify(output.traceback)}</Ansi>
167-
</div>
168116

169-
}
170-
return null;
171-
}
172-
if (output.data["text/latex"]) {
173-
return (
174-
<Markdown
175-
className="output_latex output_subarea output_execute_result"
176-
text={stringify(output.data["text/latex"])}
177-
/>
178-
);
179-
}
180-
if (output.data["text/html"]) {
181-
const html = stringify(output.data["text/html"]);
182-
return (
183-
<div
184-
className="output_html rendered_html output_subarea"
185-
dangerouslySetInnerHTML={{
186-
__html: htmlFilter(html),
187-
}}
188-
></div>
189-
);
190-
}
191-
if (output.data["image/png"]) {
117+
<div className="output_wrapper">
118+
<div className="output">
119+
{(cell.outputs || []).map((output, j) => (
120+
<div className="output_area" key={j}>
121+
<div className="prompt output_prompt">
122+
{output.execution_count && (
123+
<>Out [{output.execution_count}]:</>
124+
)}
125+
</div>
126+
{(() => {
127+
if (output.data == null) {
128+
if (output.png) {
192129
return (
193130
<div className="output_png output_subarea">
194131
<img
195-
src={`data:image/png;base64,${output.data["image/png"]}`}
132+
src={`data:image/png;base64,${output.png}`}
196133
alt="output png"
197134
/>
198135
</div>
199136
);
200137
}
201-
if (output.data["image/jpeg"]) {
138+
if (output.jpeg) {
202139
return (
203140
<div className="output_jpeg output_subarea">
204141
<img
205-
src={`data:image/jpeg;base64,${output.data["image/jpeg"]}`}
142+
src={`data:image/jpeg;base64,${output.jpeg}`}
206143
alt="output jpeg"
207144
/>
208145
</div>
209146
);
210147
}
211-
if (output.data["image/gif"]) {
148+
if (output.gif) {
212149
return (
213150
<div className="output_gif output_subarea">
214151
<img
215-
src={`data:image/gif;base64,${output.data["image/gif"]}`}
152+
src={`data:image/gif;base64,${output.gif}`}
216153
alt="output gif"
217154
/>
218155
</div>
219156
);
220157
}
221-
if (output.data["image/svg+xml"]) {
158+
if (output.svg) {
222159
return (
223160
<div
224161
className="output_svg output_subarea"
225162
dangerouslySetInnerHTML={{
226-
__html: htmlFilter(output.data["image/svg+xml"]),
163+
__html: htmlFilter(output.svg),
227164
}}
228165
></div>
229166
);
230167
}
231-
if (output.data["text/plain"]) {
168+
if (output.text) {
232169
return (
233-
<div className="output_text output_subarea output_execute_result">
234-
<pre className={``}>{output.data["text/plain"]}</pre>
170+
<div
171+
className={`output_subarea output_text output_${output.output_type} output_${output.name} output-${output.name}`}
172+
>
173+
<pre>{stringify(output.text)}</pre>
235174
</div>
236175
);
237176
}
238-
})()}
239-
</div>
240-
))}
241-
</div>
177+
if (output.traceback) {
178+
return <div className="output_subarea output_error">
179+
<Ansi>{stringify(output.traceback)}</Ansi>
180+
</div>
181+
182+
}
183+
return null;
184+
}
185+
if (output.data["text/latex"]) {
186+
return (
187+
<Markdown
188+
className="output_latex output_subarea output_execute_result"
189+
text={stringify(output.data["text/latex"])}
190+
/>
191+
);
192+
}
193+
if (output.data["text/html"]) {
194+
const html = stringify(output.data["text/html"]);
195+
return (
196+
<div
197+
className="output_html rendered_html output_subarea"
198+
dangerouslySetInnerHTML={{
199+
__html: htmlFilter(html),
200+
}}
201+
></div>
202+
);
203+
}
204+
if (output.data["image/png"]) {
205+
return (
206+
<div className="output_png output_subarea">
207+
<img
208+
src={`data:image/png;base64,${output.data["image/png"]}`}
209+
alt="output png"
210+
/>
211+
</div>
212+
);
213+
}
214+
if (output.data["image/jpeg"]) {
215+
return (
216+
<div className="output_jpeg output_subarea">
217+
<img
218+
src={`data:image/jpeg;base64,${output.data["image/jpeg"]}`}
219+
alt="output jpeg"
220+
/>
221+
</div>
222+
);
223+
}
224+
if (output.data["image/gif"]) {
225+
return (
226+
<div className="output_gif output_subarea">
227+
<img
228+
src={`data:image/gif;base64,${output.data["image/gif"]}`}
229+
alt="output gif"
230+
/>
231+
</div>
232+
);
233+
}
234+
if (output.data["image/svg+xml"]) {
235+
return (
236+
<div
237+
className="output_svg output_subarea"
238+
dangerouslySetInnerHTML={{
239+
__html: htmlFilter(output.data["image/svg+xml"]),
240+
}}
241+
></div>
242+
);
243+
}
244+
if (output.data["text/plain"]) {
245+
return (
246+
<div className="output_text output_subarea output_execute_result">
247+
<pre className={``}>{output.data["text/plain"]}</pre>
248+
</div>
249+
);
250+
}
251+
})()}
252+
</div>
253+
))}
242254
</div>
243-
)}
255+
</div>
244256
</div>
245257
);
246258
};

‎src/styles/base.less‎

Lines changed: 4 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,4 @@
1-
// https://github.com/dunovank/jupyter-themes/blob/master/jupyterthemes/stylefx.py
2-
@notebook-fontfamily: sans-serif;
3-
@nb-fontsize: 13pt;
4-
@nb-fontsize-sub: 12pt;
5-
@cc-line-height: 170%;
6-
@cell-width: 980px;
7-
@container-margins: auto;
8-
@kernel-logo-display: block;
9-
@df-fontsize: 9.3pt;
10-
@df-header-fontsize: 9.4pt;
11-
@cc-output-bg: @notebook-bg;
12-
@text-cell-bg: @cc-input-bg;
13-
@monofont: monospace;
14-
@monofontsize: 11;
15-
@monofontsize-sub: 10;
16-
@prompt-text: @input-prompt;
17-
@prompt-min-width: 11.5ex;
18-
@out-prompt-min-width: 12ex;
19-
@cc-prompt-width: 11.5ex;
20-
@cc-prompt-bg: @cc-input-bg;
21-
@prompt-border: 2px solid @prompt-line;
22-
@tc-prompt-border: 2px solid @tc-prompt-std;
23-
@output-font-size: 8.5pt;
24-
@text-cell-fontfamily: sans-serif;
25-
@text-cell-fontsize: 13pt;
26-
@tc-prompt-width: 12ex;
27-
@cursor-width: 2px;
28-
@cursor-info: @cursor-width solid default;
29-
@mathfontsize: 100%;
30-
@solar-base: #839496;
1+
@import "./variables.less";
312

323
.ipynb-renderer-root {
334
@import "./jupyter-themes/jupyterthemes/layout/notebook.less";
@@ -50,6 +21,9 @@
5021
div.output_latex {
5122
color: #888888;
5223
}
24+
div.inner_cell {
25+
width: 100%;
26+
}
5327
div.output_subarea {
5428
&.output_error {
5529
background-color: rgba(255, 0, 0, 0.25);

‎src/styles/dark.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "./jupyter-themes/jupyterthemes/styles/dark.less";
2+
@import "./base.less";

‎src/styles/darkbronco.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "./jupyter-themes/jupyterthemes/styles/darkbronco.less";
2+
@import "./base.less";

0 commit comments

Comments
 (0)