exported jupyter notebook has different syntax highlighting

When I have this Python code in a Jupyter notebook:

df = pd.read_csv("data.csv", index_col=0)
print(df.shape)

The read_csv and shape are blue, the "data.csv" is red, and the 0 and print are green.

When I export the notebook to HTML, the read_csv, shape, and print no longer have syntax highlighting.

Also, in my jupyter notebook:

for v in my_values:
    something

has both the for and the in as green, but when I export it to HTML, the for is green and the in is purple.

My question: is there some simple fix to this, to make the exported HTML the same as the notebook?

I would like the highlighting to be the same, but I don’t have time to code up a solution to this.

More Information

I tried exporting from Jupyter notebook and Jupyter Lab. Both gave the same results.

I also installed pandoc so that I could export as LaTeX. That has the same issue.

I inspected the HTML, and found that the highlighting is done with span tags and CSS styles. Here is the HTML for the two code chunks:

<div class="highlight hl-ipython3"><pre><span></span><span class="n">df</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">read_csv</span><span class="p">(</span><span class="s2">"data.csv"</span><span class="p">,</span> <span class="n">index_col</span><span class="o">=</span><span class="mi">0</span><span class="p">)</span>
<span class="nb">print</span><span class="p">(</span><span class="n">df</span><span class="o">.</span><span class="n">shape</span><span class="p">)</span>
</pre></div>

and

<div class="highlight hl-ipython3"><pre><span></span><span class="k">for</span> <span class="n">v</span> <span class="ow">in</span> <span class="n">my_values</span><span class="p">:</span>
<span class="n">something</span>
</pre></div>

I found the span tags in the CSS:

.highlight .s2 { color: var(--jp-mirror-editor-string-color) } /* Literal.String.Double */
.highlight .mi { color: var(--jp-mirror-editor-number-color) } /* Literal.Number.Integer */
.highlight .k { color: var(--jp-mirror-editor-keyword-color); font-weight: bold } /* Keyword */
.highlight .ow { color: var(--jp-mirror-editor-operator-color); font-weight: bold } /* Operator.Word */

I did not find any highlighting for spans "n" or "nb", which is presumably why they were not highlighted in the HTML document.

I added one for "nb", using the same color as for "k". I also changed the color for "ow" to match the color for "k". That solved half of the highlighting issues.

However, I cannot just change the color for "n", since some of the "n" are just user defined names (i.e. variables) whereas others are methods that I would like to be blue.

You need to sign in to view this answers