Modify appearance of Jupyter notebook output cells

Description

I use mkdocs with this material theme and mknotebooks plugin to render notebook articles as a blog. Everything works good except the appearance of input and output cells are identical. This makes reading code and output hard.

Expected behavior

Notebook cells can be markdown or code input or code output. In a notebook, each appear differently as shown below:

Actual behavior

All types of cells appear alike. Code cells have code highlighting, however this is not sufficient to distinguish inputs and outputs

Package versions

• Python: python --version : Python 3.7.3
• MkDocs: mkdocs --version: mkdocs, version 1.0.4
• Material: pip show mkdocs-material | grep -E ^Version: Version: 4.2.0

Project configuration

site_name: Atma Mani's blog
nav:
  - Home: index.md
  - Talks: talks.md
  - Articles: articles/readme.md
  - Cheatsheets: cheatsheets/readme.md
  - Spatial Data Science: spatial-data-science/readme.md
  - Apps: apps.md
  - Resume: resume.md
extra_css: 
  - 'stylesheets/extra.css' # does not work
exta_javascript:
  - 'javascripts/extra.js' # does not work
theme:
  name: 'material'
  palette:
    primary: 'teal'
    accent: 'deep orange'
  logo:
    icon: 'blur_on'
  favicon: 'static/favicon.svg'
  highlightjs: true
  # hljs_languages:
  #   - python
  #   - r
  #   - yaml
copyright: 'Copyright © 2019 - 2020 Atma Mani'

# Plugins
plugins:
 - mknotebooks:
    execute: false
    preamble: ./preamble_script.py # does not work, remove.

# Extensions
markdown_extensions:
  - admonition
  - codehilite:
      guess_lang: false
      linenums: false
      noclasses: false
      use_pygments: true
  - toc:
      permalink: true

System information

• OS: Windows 10, MacOSX 10.14
• Browser: Firefox 66.0, Chrome 74.x

[facelessuser]

SuperFences recently added the ability to include additional classes when using the brace style. You could now target specific code block types and style them different. While I’m not going to attempt to go to great lengths to mimic the opening post’s style, I will at least demonstrate that you can target code blocks of different styles:

```{.py3 .in}
print('hello world')
```

```{.text .out}
hello world
```

Then using some CSS we group a parent input with a parent output by removing the margin in between, and give the output a slightly different color:

Could you add input and output labels with CSS? Sure. Working out alignment would take a bit of work, and you’d probably need to account for some corner cases where Material sizes code blocks different in some cases, but it is probably possible:

Anyways, just thought I’d make this ability known.

[squidfunk]

http://localhost:8000/articles/cheatsheets/pandas_cheat_sheet_1.html#Access-columns

This is a local URL, which we cannot view. However, I quickly inspected the code and the extension you use does not generate distinguishable containers, which means it’s not targetable by CSS:

Both containers only have the .codehilitetable class, which might originate from the fact that the extension generates Markdown which is then rendered by the CodeHilite extension. I think the only solution is to contact the author of the original extension and discuss whether it’s possible to integrate the preambles (In/Out) in the generated Markdown.

Closing this issue, as it’s out of scope.