如何调整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本地导出(即确保代码内没有中文,否则导出时报错)
代码高亮
代码注释