# Add more color to the Python code of your Databricks notebook [retired]

**Date:** 2019-11-08  
**Author:** Kees C. Bakker  
**Categories:** Databricks / Spark  
**Original:** https://keestalkstech.com/add-more-color-to-the-python-code-of-your-databricks-notebook/

![Add more color to the Python code of your Databricks notebook [retired]](https://keestalkstech.com/wp-content/uploads/2019/11/anna-kolosyuk-D5nh6mCW52c-unsplash.jpg)

---

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](https://codemirror.net/) highlighter it uses, but Databricks could have used a [different theme](https://codemirror.net/demo/theme.html).

Anyway, we're engineers, so let's try to fix some of it.

We've phased out the extension. This blogs is still up for history reasons.

## Databricks Power Tools Extension

[Jesse Bouwman](https://www.linkedin.com/in/jesse-bouwman-610b49a5/) and me created the [Databricks Power Tools Chrome extension](https://chrome.google.com/webstore/detail/databricks-power-tools/mpffpmajkdieodggkakklfkghdiafhpo) 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.

![A screenshot of the options provided by the Databricks Power Tools (June 2020).](https://keestalkstech.com/wp-content/uploads/2020/06/screenshot-detail.jpg)
*The options provided by the Databricks Power Tools extension (June 2020).*

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](https://github.com/tonsky/FiraCode/wiki/VS-Code-Instructions): an [open source font called Fira Code](https://github.com/tonsky/FiraCode).

The font is crisp, mono-spaced and uses [font ligatures](https://www.wikiwand.com/en/Orthographic_ligature) to render common programming language constructs in a better way (as shown in the image).

Fortunately for us: it is a [Google Font](https://fonts.google.com/selection?query=fira+cod&selection.family=Fira+Code), so we can use it by importing it into our CSS.

![Font ligatures in Fire Code](https://keestalkstech.com/wp-content/uploads/2019/11/all_ligatures.png)
*Font ligatures in Fire Code*

## 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.

```css
/* 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](https://chrome.google.com/webstore/detail/live-editor-for-css-less/ifhikkcafabcgolfjegfcgloomalapol?hl=en) 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.

![Screenshot of the Magic CSS extension with pinned CSS](https://keestalkstech.com/wp-content/uploads/2019/11/2019-11-08_1813.png)
*The Magic CSS extension with pinned CSS.*

## 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.