CODEWITHSUNDEEP
pythonjupyter-notebooksyntax-highlighting
Andres F Suarez J
Andres F Suarez J

Reputation: 141

How to change syntax highlighting in Jupyter Notebook?

a = np.array([1,4,3]) 
b = np.array([2,-1,5]) 
a@b

df['A'].fillna(value=df['A'].mean())
df.fillna(value=df.mean())

For teaching purposes: I need to apply a special color in Jupyter Notebook for coding to differentiate them from variables:

Upvotes: 14

Views: 5330

Answers (1)

LoneWanderer
LoneWanderer

Reputation: 3341

As far as I can tell, the Jupyter rendering of python code formatting within a python code cell relies on specific CSS styles.

so:

pd.DataFrame(...)

pd has a CSS style cm.variable (cmstands for codemirror) DataFrame has a CSS style cm.property

So the Jupyter notebook sees pd.DataFrame, it only sees variable.property.

see picture: enter image description here

python: 3.10.7 (tags/v3.10.7:6cc6b13, Sep  5 2022, 14:08:36) [MSC v.1933 64 bit (AMD64)]
jupyterlab==3.5.0
ipython==8.6.0

This seems to indicate there is no distinction between class attributes, class methods, class properties, module attributes etc...

I think it is because the python code is parsed and styled within the HTML rendering.

Here is where the magic occurs <server>/static/notebook/js/notebook/js/codemirror-ipython.js

and here: <server>/static/notebook/js/components/codemirror/ (and child dir/files (<server>/static/notebook/js/components/codemirror/mode/python/python.js ))

You will find all the parsing code there, which seem to only treat the code present inside an (HTML) cell. From what I see, there is little to no indication that the JS code is able to go down the imports/callgraphs to determine the precise nature of code tokens like an IDE would (say PyCharm).

sample:

  var wordOperators = wordRegexp(["and", "or", "not", "is"]);
  var commonKeywords = ["as", "assert", "break", "class", "continue",
                        "def", "del", "elif", "else", "except", "finally",
                        "for", "from", "global", "if", "import",
                        "lambda", "pass", "raise", "return",
                        "try", "while", "with", "yield", "in"];
  var commonBuiltins = ["abs", "all", "any", "bin", "bool", "bytearray", "callable", "chr",
                        "classmethod", "compile", "complex", "delattr", "dict", "dir", "divmod",
                        "enumerate", "eval",
//...

Maybe we can see things this way : a Jupyter notebook is not really an IDE, it may be better seen as an HTTP page that sends string to a python console : page sends print('foo'), (interactive) console does something roughly equivalent of python -c "print('foo')" and some glue gets the results and sends it back to HTML.

Unless:

  1. someone points to the precise configuration parameter for Jupyter server pages that I could not find
  2. and/or Jupyter dev teams add a better parsing capability for HTML rendering,

OP desire seems impossible to achieve. You may be able to change color styles to a custom one, but not enhance the parsing capability on the HTML notebook rendering side to be more precise.

But, within a specialized IDE that has supports for notebooks (say PyCharm pro (see https://www.jetbrains.com/help/pycharm/jupyter-notebook-support.html#tool-windows which shows advanced debugging capability, which makes me think I'm right :)) or VS code (ref needed)), maybe things can be different since the IDE can have a visibility on the whole python install/modules codebase and has access to its specialized code parsing and rendering engine (which in this case basically replaces what the Jupyter JavaScript code does !).

For teaching purposes

I think an actual specialized IDE is the go-to tool for such precise syntax highlighting for emphasis on the nature of each code tokens. see PyCharm config for function calls: enter image description here where the style is inherited from: enter image description here (of course you can set your own global defaults or language specific defaults ... that depends on the IDE)

Upvotes: 2

Related Questions