Why are the code colours different for every line in my Jupyter (Ubuntu)?

Question

I was using Jupyter in Windows and just switched to Ubuntu. I found the colour of the code is very weird in the firefox browser. Eg it highlights the variables in every other line.

I tried to solve this problem by installing a custom theme and the effect should be like

Instead, it still highlights every other variable on my side, like

This just makes my eyes very tired when try to debug the code.

I also tried disabling all the add-ons in Firefox which didn't help. Is there any setting that I can change to restore to the default colour display?

Answer 1

I sometimes get this if I'm copying/pasting from a source that has a different indentation size than that of the jupyter notebook. In your screenshot it looks like a small indent size so this seems like the likely culprit. Try highlighting the full block of indented code and hitting ctrl+[ then ctrl+] (this unindents the selected lines of code, then reindents them using the jupyter indent size).

If this doesn't work, you might try checking to see if there are any custom indentation settings specified in either ".jupyter/nbconfig/notebook.json" or ".jupyter/custom/custom.js" (... or whatever the Windows equivalents are).

In ".jupyter/nbconfig/notebook.json", I have the indentUnit set to 4 spaces (and have also enabled linewrapping).

{
  "CodeCell": {
    "cm_config": {
      "indentUnit": 4,
      "lineWrapping":true
    }
  }
}

Most editors allow you to set your indent size (Atom, sublime text, etc.) so you can avoid this issue in the future by making sure you have the same indent size everywhere you're swapping code to/from (assuming this is what's causing the red highlighting). Python's default is 4 so def recommend sticking with that.