Add more color to the Python code of your Databricks notebook

As I'm doing more data processing with Databricks, I'm kind of getting annoyed with the syntax highlighting of the editor. The syntax highlighting is a bit off - there is not much distinction between variables, properties and functions. This can be partially attributed to the CodeMirror highlighter it uses, but Databricks could have used a different theme.

Anyway, we're engineers, so let's try to fix some of it.
I came up with this:

Databricks Power Tools Extension

Jesse Bouwman and me created the Databricks Power Tools Chrome extension to tweak the interface of Databricks. It renders a Table of contents that helps you to easier navigate your notebooks. It also contains an option to add CSS code to your Databricks environment, so you can basically tweak the entire interface.

Let's see what we can do with this.

A Better Font: Fire Code

I want to use the same font I use on my blog and Visual Studio Code: an open source font called Fira Code.

The font is crisp, mono-spaced and uses font ligatures to render common programming language constructs in a better way (as shown in the image).

Fortunately for us: it is a Google Font, so we can use it by importing it into our CSS.

The CSS

To uncomplicate things, I heavily used the !important construction. It is frowned upon by most front-enders, but it gets the job done.

/* replace font on all editors */
@import url('https://fonts.googleapis.com/css?family=Fira+Code&display=swap');

.codemirror-preview span,
.CodeMirror-code span {
    font-family: 'Fira Code', 'Droid Sans Mono', 'Consolas', 'Courier New', monospace;
    font-size: 13px;
    cursor:text;
    color: #777;
}
/* recolor @udf, method names and build in names */
.cm-builtin, .cm-meta, .cm-def {
    color: purple !important;
    font-weight: bold;
}
/* properties and function calls */
.cm-property {
    color: #ff0096 !important;
}
/* stuff like def, import, as */
.cm-keyword {
    color: #0096fa !important;
}
/* variables, parameters */
.cm-variable {
   box-shadow: inset 0 -3px 0 rgba(120, 120, 120, .076);
}
/* hovering over lines */
.CodeMirror-line:hover {
    background-color: rgba(200, 200, 200, 0.1)
}
.codemirror-preview span span:hover, 
.CodeMirror-code span span:hover {
    background-color: rgba(0, 150, 250, 0.076)
}
/* comments should not distract us from the code */
.cm-comment {
    color: #969696 !important;
}
/* green string */
.cm-string {
    color: green !important;
}
/* make bash scripts black */
.CodeMirror-line span {
    color:black;
}

Just copy the code into the Databricks Power Tools extension CSS field and you're good to go! Colors everywhere.

Magic CSS

In a previous version of this article I used Magic CSS with pinned styles. It loads a bit slower, but it is still a great tool for prototyping custom styling. The Databricks power tools will load your styles a bit faster.

Improvements

2020-06-25: Added the Databricks Powertools extension to load the stylesheets faster.
2020-06-14: Added a fallback font.
2019-12-09: Added support for bash scripts by coloring all lines black. The lines looked like they were commented out.