Jupyter Notebook 自定义外观
Jupyter Notebook 原生的外观可以说是能用但是绝对不好看。所以可以试试修改 css 获得一个好看一些的外观。
Windows 系统下,在个人文件夹 C:\Users\****\
下找到或者新建文件夹 .jupyter
。或者在 CMD / PowerShell 键入:
1jupyter notebook --generate-config
然后就会生成这个文件夹。在 .jupyter
文件夹下新建一个文件夹叫做 custom
,然后新建文件 custom.css
。参考内容:
1/* Ref: https://www.zhihu.com/question/40012144 */
2
3/* Body */
4/* #notebook-container {
5 width: 90%
6} */
7
8/* Markdown */
9div#notebook {
10 font-family: "Microsoft YaHei";
11 line-height: 20px;
12 -webkit-font-smoothing: antialiased !important;
13}
14
15/* Markdown - h2 */
16div#notebook h2 {
17 color: #007aff;
18}
19
20/* Markdown - quote */
21div#notebook blockquote{
22 background-color: #f8f8f8;
23 color: #505050;
24 padding: 8.5px;
25 margin: 0.5em -0.5em 0.5em -0.4em;
26}
27
28/* Markdown - code in paragraph */
29div#notebook p code, div#notebook li code {
30 font-family: "Consolas", "Microsoft YaHei";
31 font-size: 1em !important;
32 color: #111111;
33 border: 0.5px solid #cfcfcf;
34 border-radius: 2px;
35 background-color: #f7f7f7;
36 padding: .1em .2em;
37 margin: 0px 2px;
38}
39
40/* Markdown - code */
41div.text_cell_render pre {
42 border: 1px solid #cfcfcf;
43 border-radius: 2px;
44 background: #f7f7f7;
45 line-height: 1.21429em;
46 padding: 8.5px;
47 margin: 0.5em -0.5em 0.5em -0.4em;
48}
49div.text_cell_render code {
50 background: #f7f7f7;
51}
52
53/* Code */
54div.CodeMirror pre {
55 font-family: "Consolas";
56 font-size: 11pt;
57 line-height: 140%;
58 -webkit-font-smoothing: antialiased !important;
59}
60
61/* Code - output */
62div.output pre {
63 font-family: "Microsoft YaHei";
64 line-height: 20px;
65 -webkit-font-smoothing: antialiased !important;
66}
67
68/* Code - comment */
69span.cm-comment {
70 font-family: "Microsoft YaHei" !important;
71 font-style: italic !important;
72}
73
74/* Promts (In and Out) */
75div.prompt {
76 font-family: "Consolas";
77 font-size: 10pt;
78}
79
80/* Line numbers */
81div.CodeMirror-linenumber {
82 font-family: 'Microsoft YaHei';
83}
84
85
86/* Code - highlighting */
87.cm-s-ipython .CodeMirror-cursor {
88 border-left: 1px solid #ff711a !important;
89}
90.cm-s-ipython span.cm-comment {
91 color: #8d8d8d;
92 font-style: italic;
93}
94.cm-s-ipython span.cm-atom {
95 color: #055be0;
96}
97.cm-s-ipython span.cm-number {
98 color: #ff8132;
99}
100.cm-s-ipython span.cm-property {
101 color: #303030;
102}
103.cm-s-ipython span.cm-attribute {
104 color: #303030;
105}
106.cm-s-ipython span.cm-keyword {
107 color: #713bc5;
108 font-weight: bold;
109}
110.cm-s-ipython span.cm-string {
111 color: #009e07;
112}
113.cm-s-ipython span.cm-meta {
114 color: #aa22ff;
115}
116.cm-s-ipython span.cm-operator {
117 color: #055be0;
118}
119.cm-s-ipython span.cm-builtin {
120 color: #e22978;
121}
122.cm-s-ipython span.cm-variable {
123 color: #303030;
124}
125.cm-s-ipython span.cm-variable-2 {
126 color: #de143d;
127}
128.cm-s-ipython span.cm-variable-3 {
129 color: #aa22ff;
130}
131.cm-s-ipython span.cm-def {
132 color: #e22978;
133 font-weight: bold;
134}
135.cm-s-ipython span.cm-error {
136 background: rgba(191, 97, 106, .40);
137}
138.cm-s-ipython span.cm-tag {
139 color: #e22978;
140}
141.cm-s-ipython span.cm-link {
142 color: #ff8132;
143}
144.cm-s-ipython span.cm-storage {
145 color: #055be0;
146}
147.cm-s-ipython span.cm-entity {
148 color: #e22978;
149}
150.cm-s-ipython span.cm-quote {
151 color: #009e07;
152}
153div.CodeMirror span.CodeMirror-matchingbracket {
154 color: #1c1c1c;
155 background-color: rgba(30, 112, 199, .30);
156}
157div.CodeMirror span.CodeMirror-nonmatchingbracket {
158 color: #1c1c1c;
159 background: rgba(191, 97, 106, .40) !important;
160}
161.cm-s-default .cm-hr {
162 color: #055be0;
163}
然后 Jupyter 就会变得好看了。
#tech notes
本文总字数 621
本文阅读量
本站访客量