Improved code highlighter

custom/custom.css

@@ -9,7 +9,7 @@ html {
 
 div#notebook {
     background: #1e1e1e;
-    font-size: 20px;
+    font-size: 25px;
     line-height: 1.3;
 }
 
@@ -26,6 +26,7 @@ div#notebook {
 #notebook-container {
     background: #191919;
     color: white;
+    width: 80%;
 }
 
 div.cell.selected::before, div.cell.selected.jupyter-soft-selected::before {
@@ -55,15 +56,13 @@ h1, h2, h3, strong {
 }
 
 div.cell {
-    margin: 35px 0;
+    margin: 60px 0;
 }
 
-.cm-s-ipython span.cm-variable {
-    color: white;
-}
 
 .rendered_html code {
-    background: #322931;
+    background: #2d2f2f;
+    font-family: monospace;
 }
 
 .rendered_html pre, .rendered_html code {
@@ -79,16 +78,255 @@ div.out_prompt_overlay:hover {
     background: initial;
 }
 
-.cell {
-    visibility: hidden;
+/* remove title paragraph symbol */
+
+.cell:first-of-type h1 a, .cell:first-of-type h2 a, .cell:first-of-type h3 a, .cell:last-of-type h1 a {
+    display: none;
 }
 
-.cell.shown, .cell:first-of-type {
-    visibility: initial;
+/* coding */
+
+.cm-s-ipython.CodeMirror, .rendered_html pre, .rendered_html pre code {
+    font-family: monospace, monospace;
+    background: #2d2f2f;
+    color: #cdd2e9;
+    border-radius: 2px;
+    font-style: normal;
+    font-weight: normal;
+
+    line-height: 1.3;
 }
 
+.cm-s-ipython div.CodeMirror-selected {
+    background: #334050;
+}
 
-/* remove title paragraph symbol */
-.cell:first-of-type h1 a, .cell:first-of-type h2 a, .cell:first-of-type h3 a, .cell:last-of-type h1 a {
-    display: none;
+.CodeMirror-gutters {
+    border: none;
+    border-right: 1px solid #334050 !important;
+    background-color: #334050 !important;
+    background: #334050 !important;
+    border-radius: 0px;
+    white-space: nowrap;
+}
+
+.cm-s-ipython .CodeMirror-gutters {
+    background: #334050;
+    border: none;
+    border-radius: 0px;
+    width: 36px;
+}
+
+.cm-s-ipython .CodeMirror-linenumber {
+    color: #546386;
+}
+
+.CodeMirror-sizer {
+    margin-left: 40px;
+}
+
+.CodeMirror-linenumber, div.CodeMirror-linenumber, .CodeMirror-gutter.CodeMirror-linenumberdiv.CodeMirror-gutter.CodeMirror-linenumber {
+    padding-right: 1px;
+    margin-left: 0px;
+    margin: 0px;
+    width: 26px !important;
+    padding: 0px;
+    text-align: right;
+}
+
+.CodeMirror-linenumber {
+    color: #546386;
+}
+
+.cm-s-ipython .CodeMirror-cursor {
+    border-left: 2px solid #0095ff !important;
+}
+
+.cm-s-ipython span.cm-comment {
+    color: #667fb1;
+    font-style: italic;
+}
+
+.cm-s-ipython span.cm-atom {
+    color: #be86e3;
+}
+
+.cm-s-ipython span.cm-number {
+    color: #51c0ef;
+}
+
+.cm-s-ipython span.cm-property {
+    color: #cdd2e9;
+}
+
+.cm-s-ipython span.cm-attribute {
+    color: #cdd2e9;
+}
+
+.cm-s-ipython span.cm-keyword {
+    color: #4cb2ff;
+    font-weight: normal;
+}
+
+.cm-s-ipython span.cm-string {
+    color: #61ba86;
+}
+
+.cm-s-ipython span.cm-meta {
+    color: #ffec8e;
+}
+
+.cm-s-ipython span.cm-operator {
+    color: #00b4ff;
+}
+
+.cm-s-ipython span.cm-builtin {
+    color: #e17e85;
+}
+
+.cm-s-ipython span.cm-variable {
+    color: #cdd2e9;
+}
+
+.cm-s-ipython span.cm-variable-2 {
+    color: #e17e85;
+}
+
+.cm-s-ipython span.cm-variable-3 {
+    color: #ffec8e;
+}
+
+.cm-s-ipython span.cm-def {
+    color: #ffec8e;
+    font-weight: normal;
+}
+
+.cm-s-ipython span.cm-error {
+    background: rgba(191, 97, 106, .4);
+}
+
+.cm-s-ipython span.cm-tag {
+    color: #be86e3;
+}
+
+.cm-s-ipython span.cm-link {
+    color: #51c0ef;
+}
+
+.cm-s-ipython span.cm-storage {
+    color: #be86e3;
+}
+
+.cm-s-ipython span.cm-entity {
+    color: #be86e3;
+}
+
+.cm-s-ipython span.cm-quote {
+    color: #61ba86;
+}
+
+div.CodeMirror span.CodeMirror-matchingbracket {
+    color: #ffffff;
+    font-weight: bold;
+    background-color: #4c8be2;
+}
+
+div.CodeMirror span.CodeMirror-nonmatchingbracket {
+    color: #ffffff;
+    font-weight: bold;
+    background: rgba(191, 97, 106, .4) !important;
+}
+
+.cm-header-1 {
+    font-size: 215%;
+}
+
+.cm-header-2 {
+    font-size: 180%;
+}
+
+.cm-header-3 {
+    font-size: 150%;
+}
+
+.cm-header-4 {
+    font-size: 120%;
+}
+
+.cm-header-5 {
+    font-size: 100%;
+}
+
+.cm-s-default .cm-hr {
+    color: #00b4ff;
+}
+
+div.cell.text_cell .cm-s-default .cm-header {
+    font-family: sans-serif;
+    font-weight: normal;
+    color: #0b98c8 !important;
+    margin-top: 0.3em !important;
+    margin-bottom: 0.3em !important;
+}
+
+div.cell.text_cell .cm-s-default span.cm-variable-2 {
+    color: #b0bdd7 !important;
+}
+
+div.cell.text_cell .cm-s-default span.cm-variable-3 {
+    color: #ffec8e !important;
+}
+
+.cm-s-default span.cm-comment {
+    color: #667fb1 !important;
+}
+
+.cm-s-default .cm-tag {
+    color: #8fb36a;
+}
+
+.cm-s-default .cm-builtin {
+    color: #e17e85;
+}
+
+.cm-s-default .cm-string {
+    color: #61ba86;
+}
+
+.cm-s-default .cm-keyword {
+    color: #4cb2ff;
+}
+
+.cm-s-default .cm-number {
+    color: #51c0ef;
+}
+
+.cm-s-default .cm-error {
+    color: #be86e3;
+}
+
+.cm-s-default .cm-link {
+    color: #51c0ef;
+}
+
+.cm-s-default .cm-atom {
+    color: #51c0ef;
+}
+
+.cm-s-default .cm-def {
+    color: #ffec8e;
+}
+
+.CodeMirror-cursor {
+    border-left: 2px solid #0095ff !important;
+    border-right: none;
+    width: 0;
+}
+
+.cm-s-default div.CodeMirror-selected {
+    background: #334050;
+}
+
+.cm-s-default .cm-selected {
+    background: #334050;
 }
\ No newline at end of file