如何调整Jupyter Notebook样式？

1. 安装网页插件Stylus

该方法与许大森的回答相同，即安装Chrome插件Stylish(此插件已经下架，请使用同作者的替代插件Stylus)，然后新建自己的Jupyter样式~优点：应用和取消样式比较方便，同步和更新可以借助Stylish。

缺点：从Jupyter导出html时，会恢复到原来的丑样式。

2. 在本地新建自定义样式文件custom.css

在本地jupyter的cumtom.css文件中粘贴文件内容。

文件路径:

# Windows

C:\Users\user\.jupyter\custom\custom.css

# Mac

~/.jupyter/custom/custom.css优点：从Jupyter导出html时，新样式会保留(自定义代码高亮无法保留，暂时还没有找到解决方案)

缺点：每次调整样式都需要到特定路径，多端同步麻烦

3. 不推荐

试过赞同最多的回答，即安装插件jupyter-themes，但会造成目录页面比较丑陋，代码字体变小等问题，不推荐使用。

最终效果修改前 - Win修改后 - Win修改前 - Mac修改后 - Mac

我的自定义样式

这部分只提供了基本样式修改代码，代码高亮部分请继续往下看~

1. Win

/* Body */

/* #notebook-container {width: 90%} */

/* Markdown */

div#notebook {

font-family: san francisco, "PingFangSC-Medium", "Microsoft YaHei";

line-height: 20px;

-webkit-font-smoothing: antialiased !important;

}

/* Markdown - h2 */

div#notebook h2 {

color: #007aff;

}

/* Markdown - quote */

div#notebook blockquote{

background-color: #f8f8f8;

color: #505050;

padding: 8.5px;

margin: 0.5em -0.5em 0.5em -0.4em;

}

/* Markdown - code in paragraph */

div#notebook p code, div#notebook li code {

font-family: Consolas, "PingFangSC-Medium", "Microsoft YaHei";

font-size: 1em !important;

color: #111111;

border: 0.5px solid #cfcfcf;

border-radius: 2px;

background-color: #f7f7f7;

padding: .1em .2em;

margin: 0px 2px;

}

/* Markdown - code */

div.text_cell_render pre {

border: 1px solid #cfcfcf;

border-radius: 2px;

background: #f7f7f7;

line-height: 1.21429em;

padding: 8.5px;

margin: 0.5em -0.5em 0.5em -0.4em;

}

div.text_cell_render code {

background: #f7f7f7;

}

/* Code */

div.CodeMirror pre {

font-family: Consolas, "PingFangSC-Medium", "Microsoft YaHei";

font-size: 11pt;

line-height: 140%;

-webkit-font-smoothing: antialiased !important;

}

/* Code - output */

div.output pre {

font-family: Consolas, "PingFangSC-Medium", "Microsoft YaHei";

line-height: 20px;

-webkit-font-smoothing: antialiased !important;

}

/* Code - comment */

span.cm-comment {

font-family: san francisco, "PingFangSC-Medium", "Microsoft YaHei" !important;

font-style: normal !important;

}

2. Mac

/* Body */

/* #notebook-container {width: 90%} */

/* Markdown - h2 */

div#notebook h2 {

color: #007aff;

}

/* Markdown - quote */

div#notebook blockquote{

background-color: #f8f8f8;

color: #505050;

padding: 8.5px;

margin: 0.5em -0.5em 0.5em -0.4em;

}

/* Markdown - code in paragraph */

div#notebook p code, div#notebook li code {

font-size: 1em !important;

color: #111111;

border: 0.5px solid #cfcfcf;

border-radius: 2px;

background-color: #f7f7f7;

padding: .1em .2em;

margin: 0px 2px;

}

/* Markdown - code */

div.text_cell_render pre {

border: 1px solid #cfcfcf;

border-radius: 2px;

background: #f7f7f7;

line-height: 1.21429em;

padding: 8.5px;

margin: 0.5em -0.5em 0.5em -0.4em;

}

div.text_cell_render code {

background: #f7f7f7;

}

/* Code */

div.CodeMirror pre {

line-height: 140%;

}

/* Code - comment */

span.cm-comment, span.c1 {

font-style: normal !important;

}

对于Stylish，如何只在Jupyter Notebook网页应用这一css样式？

Stylish应用对象选择【网址前缀】，填写：

1. Win

http://localhost:8888/notebooks/

2. Mac

http://127.0.0.1:8888/notebooks/

代码高亮

从jupyter-themes源码中找了一段代码高亮，使用的是grade3的高亮方案。使用方法同上。

/* Code - highlighting */

.cm-s-ipython .CodeMirror-cursor {

border-left: 1px solid #ff711a !important;

}

.cm-s-ipython span.cm-comment, span.c1 {

color: #8d8d8d !important;

}

.cm-s-ipython span.cm-atom {

color: #055be0 !important;

}

.cm-s-ipython span.cm-number, span.mi {

color: #ff8132 !important;

}

.cm-s-ipython span.cm-property {

color: #303030 !important;

}

.cm-s-ipython span.cm-attribute {

color: #303030 !important;

}

.cm-s-ipython span.cm-keyword, span.kn, span.k, span.ow, span.kc, span.bp {

color: #713bc5 !important;

font-weight: 520 !important;

}

.cm-s-ipython span.cm-string, span.s1, span.s2 {

color: #009e07 !important;

}

span.se, span.si {

color: #59c08d !important;

font-weight: normal !important;

}

.cm-s-ipython span.cm-meta {

color: #aa22ff !important;

}

.cm-s-ipython span.cm-operator, span.o {

color: #055be0 !important;

font-weight: bold !important;

}

.cm-s-ipython span.cm-builtin, span.nb {

color: #e22978 !important;

}

.cm-s-ipython span.cm-variable, span.nn, span.n {

color: #303030 !important;

font-weight: normal !important;

}

.cm-s-ipython span.cm-variable-2 {

color: #de143d !important;

}

.cm-s-ipython span.cm-variable-3 {

color: #aa22ff !important;

}

.cm-s-ipython span.cm-def {

color: #e22978 !important;

font-weight: normal !important;

}

.cm-s-ipython span.cm-error {

background: rgba(191, 97, 106, .40) !important;

}

.cm-s-ipython span.cm-tag {

color: #e22978;

}

.cm-s-ipython span.cm-link {

color: #ff8132 !important;

}

.cm-s-ipython span.cm-storage {

color: #055be0 !important;

}

.cm-s-ipython span.cm-entity {

color: #e22978 !important;

}

.cm-s-ipython span.cm-quote {

color: #009e07 !important;

}

div.CodeMirror span.CodeMirror-matchingbracket {

color: #1c1c1c !important;

background-color: rgba(30, 112, 199, .30) !important;

}

div.CodeMirror span.CodeMirror-nonmatchingbracket {

color: #1c1c1c !important;

background: rgba(191, 97, 106, .40) !important;

}

.cm-s-default .cm-hr {

color: #055be0 !important;

}

更新记录倒叙，最上面的是最新更新。懒得写日期orz

使导出后的html文件具备代码高亮

增加Mac端的自定义样式文件路径

引用框样式修改

对Mac的支持

支持Jupyter本地导出(即确保代码内没有中文，否则导出时报错)

代码高亮

代码注释