search

vlunot / nb2hugo

A Jupyter notebook to Hugo markdown converter
MIT License
44 stars 9 forks source link

Notebook Cells and Output seem to look the same #6

Open PhilipMay opened 3 years ago

PhilipMay commented 3 years ago

Hi, the code cells of jupyter notebooks and the outputs seem to look the same. See here: https://nb2hugo.netlify.app/post/blogging-with-jupyter-notebooks-and-hugo/ Maybe you could add an css class attribute to the output cells so they can be selected by css?

Thanks Philip

Etrama commented 6 days ago

I had the same issue so I wrote some CSS to handle it. I use hugo with the papermod theme. Here are links to my gists, they also have instructions on where to place them within your hugo theme:

  1. Dataframe Renderer
  2. Differentiate code cells and output cells

Once you add these files to the right location (under your hugo theme: theme/your-extra-folder-if-applicable/assets/css/extended/. You can copy and paste both the files above in that location, with the appropriate changes made for your folder.

You also need to add an extra line in your hugo config to make this. I use a config.yml file so I added: customCSS: ["themes/papermod-my-personal-version/assets/css/extended/df_render.css", "themes/papermod-my-personal-version/assets/css/extended/jupyter_cell_output_render.css"]

You'll need to adapt the path in the customCSS to reflect your folder as well, same as the initial one.