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