Preserve font and style exporting to HTML

[lucainnocenti]

trafficstars

Here is a section of how I see the code when using the onedork extension:

and here is the same block as it appears in the exported HTML:

The style is obviously completely different. How can we fix it?

I see this with Chrome under Windows 10, jupyter installation provided by anaconda on ubuntu on windows.

[lucainnocenti]

This seems to be due to a different class used in the html exported version.

Taking for example the numpy word above, the style used in the notebook is cm-keyword, while the class of the same span in the output html is nn, and the custom.css file gives very different style specifications for these two classes.

Is this intended? Is there some setting I'm missing?

[dylanking42]

I would like to second this being an issue. It is a shame that the very nice and well thought out built in themes get lost when trying to share via .html.

As @lucainnocenti mentioned, is there a simple fix?

[stefanuddenberg]

I'd also like to see this bug fixed if possible!

[bdelepine]

Seems related to #66.

As a workaround, I temporarily revert back to the default theme and export to HTML with it:

jt -r
jupyter nbconvert --to html --template full notebook.ipynb
jt -t onedork

[rachelbasse]

The problem is that notebook/nbconvert highlights the code using Pygments CSS classes instead of CodeMIrror. Two options to fix this:

1. Add the necessary Pygments selectors to the jupyter-themes less files so that they are included in ~/.jupyter/custom/custom.css. These rules will override the rules created by nbconvert. This can probably be done automatically for all themes with a single map between CodeMirror and Pygments classes.
2. The Pygments style used by nbconvert's preprocessors can be configured. Create and register new Pygments styles for all jupyter-themes themes. Configure the desired style by adding config files with the following content:

c = get_config()

c.CSSHTMLHeaderPreprocessor.style = 'oceans16' # current jt theme
c.LatexPreprocessor.style = 'oceans16'

I think two config files are needed for command-line vs. notebook's Download as... options :

~/.jupyter/jupyter_nbconvert_config.py ~/.jupyter/jupyter_notebook_config.py

The first option is the simplest. The second would create Pygments styles that can potentially used elsewhere. I'll volunteer to help on option 1 if @dunovank wants to add this.

[tnilanon]

I know that @dunovank didn't comment with his thoughts on this issue, but I still want to see this gets resolved. Any chance you can share your jupyter-themes less files, @rachelbasse?