Linux-030-Python jupyter notebook 修改樣式和字體調整

jupyter notebook 頁面編輯器使用時，發現頁面寬度較窄、亮度較高，同時字體等樣式也不符合個人習慣，因而將其頁面樣式和字體進行了修改調整。

修改 jupyter notebook 的頁面樣式和字體，可通過安裝皮膚實現，我的實現方式是通過其自帶的 custom.css 定制。主要參考了官網以及各位小伙伴的文章，同時針對個人習慣進行了修改。

custom.css 樣式文件在 jupyter notebook 安裝的 site-packages 目錄，依據上文中 Anaconda 3 的安裝路徑，我虛擬機中的樣式文件路徑為：

/apps/anaconda3/lib/python3.9/site-packages/notebook/static/custom/custom.css

 

在 windows 中的安裝路徑通常是

C:\ProgramData\Anaconda3\Lib\site-packages\notebook\static\custom\

 

我個人修改后 custom.css 樣式文件內容如下所示，各位小伙伴可直接復制使用，修改后重啟服務即可生效。

/* 設置編碼頁寬度 */
.container {
    width: 98% !important;
}

#notebook-container {
    background-color: #89f198 !important;
}

.CodeMirror-lines {
    background-color: #e6f6e6 !important;
    line-height: 1.3em;
}

* {
    font-family: "Courier New", "Microsoft YaHei Mono", "Microsoft YaHei";
    font-size: 12pt;
}


div.output_area pre {
    font-family: "Courier New", "Microsoft YaHei Mono", "Microsoft YaHei";
    font-size: 12pt;
}

div.input_prompt {
    font-family: "Courier New", "Microsoft YaHei Mono", "Microsoft YaHei";
    font-size: 12pt;
}

div.out_prompt_overlay {
    font-family: "Courier New", "Microsoft YaHei Mono", "Microsoft YaHei";
    font-size: 12pt;
}

div.prompt {
    font-family: "Courier New", "Microsoft YaHei Mono", "Microsoft YaHei";
    font-size: 12pt;
}

span.cm-comment {
    font-family: "Courier New", "Microsoft YaHei Mono", "Microsoft YaHei" !important;
    font-style: normal !important;
    color: #FFAE3C !important;
}

code {
    font-family: "Courier New", "Microsoft YaHei Mono", "Microsoft YaHei";
    font-size: 12pt;
}

.CodeMirror pre {
    font-family: "Courier New", "Microsoft YaHei Mono", "Microsoft YaHei";
    font-size: 12pt;
    margin: 0.5em 0 0 0;
}

.rendered_html code {
    border: 0;
    padding: 2px 4px;
    color: #c7254e;
    background-color: #f2f2f2;
    font-size: 100%;
}

/* Markdown - 設置 */
div#notebook {
    font-family: "Courier New", "Microsoft YaHei Mono", "Microsoft YaHei";
    line-height: 20px;
    -webkit-font-smoothing: antialiased !important;
}

/* Markdown -h1, h2, h3 */
div#notebook h1, div#notebook h2, div#notebook h3 {
    color: #00f !important;
    margin: 0.75em 0 0 0;
}

/* 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: "Courier New", "Microsoft YaHei Mono", "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 - 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;
}

 

重啟服務后的 jupyter notebook 頁面及字體樣式如下所示：

 

可以根據個人使用習慣進行修改樣式。