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:

Magic CSS

I’m a big fan of Chrome and its Chrome Extensions. I’ve been using Magic CSS for ages to prototype new CSS. It has a feature to pin the entered CSS, that applies the styles automatically when you visit that website.

Magic CSS with pinned CSS
The Magic CSS extension with pinned CSS.

Change the font

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.

Font ligatures in Fire Code
Font ligatures in Fire Code

The CSS

To uncomplicate things, I made heavy use of the !important construction. It is frowned upon by our 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';
    font-size: 13px;
    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;
}

Just copy the code into your Magic CSS editor, change it (to your own style), pin it & enjoy!