search

dunovank / jupyter-themes

Custom Jupyter Notebook Themes
MIT License
9.76k stars 1.06k forks source link

Preserve font and style exporting to HTML #164

Open lucainnocenti opened 7 years ago

lucainnocenti commented 7 years ago

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

image 1

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

image 2

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 commented 7 years ago

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 commented 6 years ago

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 commented 6 years ago

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

bdelepine commented 6 years ago

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 commented 5 years ago

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 commented 4 years ago

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?