Harmonize themes between live code and dead code

[patrickmineault]

Description / Summary

Right now, statically syntax highlighted code with the default jupyterbook theme uses a different theme (colors, bolding, etc.) than live code with CodeMirror. It would be nice if the themes were similar.

Value / benefit

It would look a little more polished if the themes were similar. Right now it feels like the code changes when you press the live code button, because the colors of the code change. In addition, if line spacing was the same, things would stay in place when switching to live code.

Implementation details

Creating a custom codemirror theme would probably be the easiest route. It's not clear to me, however, reading the docs and comments, whether the codemirror theme config option currently works. Some guidance would be

Tasks to complete

• [ ] #17
• [ ] Decide on the code cell style we'd like
• [ ] See if specifying a different default codemirror theme would help

[choldgraf]

Hmm - I think the challenge here is that we don't want to special-case this package just for Jupyter Book, but make it more generally useful. I do also think there's some value in making it explicit via visual style when a code block is now "executable".

Perhaps one approach would be to adopt a style that is just a bit more polished in general, and behaves similarly to the Jupyter Notebook style? Then it could at least clash a bit less?

[patrickmineault]

I think that the code is executable is fairly clear given the run button is there - it could also be visually emphasized with line numbers appearing once code is live or putting a green line around the code box.

It's unclear to me right now whether the static syntax highlighting is compatible with the CodeMirror syntax highlighting, but if we agree in principle that it's a desirable enhancement I could take a stab at it.

If there's a better place to introduce harmonized themes - for instance, in the jupyterbook sphinx theme - that would also work.

[choldgraf]

So I think there are 3 places to consider, and maybe 2 of them would be good candidates to try some improvements:

1. thebe(https://github.com/executablebooks/thebe). The basic style that code cells have when thebe is activated could use improvements. For example, we could try to ensure that the new code cells have the same padding, line height, etc...and that the "run cell" button is appended below the code, but doesn't "push up" the code when it arrives.
2. sphinx-thebe - I think here we should try to make minimal extra changes on top of thebe itself (we want the upstream to have as much good base functionality as possible!). That said, if the thebe blocks are looking weird because of sphinx-thebe then we can definitely change the CSS in this package.
3. sphinx-book-theme - here I'd be +1 if we could define some thebe-specific CSS that made the resulting code cell look more similar to the "static" code blocks in the theme.

Does that make sense to you? I'd be happy to take a look at PRs if you like!

[fcarvalhopacheco]

Hi,

Is there any chance someone could take a look at https://github.com/executablebooks/thebe/issues/548.

In summary: The code block color from my furo dark theme is not matching with the pygments_dark_style, even after changing the following:

thebe_config = {
    "codemirror-theme": "monokai",
    "always_load": True,
}

To reproduce click here and click on Run code

This is my conf.py

import os
import sys

sys.path.insert(0, os.path.abspath('.'))

# -- Project information -----------------------------------------------------

project = 'oop-python-learning'
copyright = '2022, Fernando Carvalho Pacheco'
author = 'Fernando Carvalho Pacheco'

# The full version, including alpha/beta/rc tags
release = '0.0.1'

# -- General configuration ---------------------------------------------------

# Add any Sphinx extension module names here, as strings. They can be
# extensions coming with Sphinx (named 'sphinx.ext.*') or your custom
# ones.

extensions = [
    "myst_nb",
    "sphinx.ext.autodoc",
    "sphinx.ext.napoleon",
    "sphinx_autodoc_typehints",
    "sphinx.ext.intersphinx",
    "sphinx.ext.autosectionlabel",
    "sphinx_design",
    "sphinx_thebe",
]

myst_enable_extensions = [
    "colon_fence",
]

# Make sure the explicity target is unique
autosectionlabel_prefix_document = True
autosectionlabel_maxdepth = 3

myst_heading_anchors = 3

source_suffix = {
    '.ipynb': 'myst-nb',
    '.myst': 'myst-nb',
    '.md': 'myst-nb',
}

autosectionlabel_prefix_document = True

# Add any paths that contain templates here, relative to this directory.
templates_path = ['_templates']

# List of patterns, relative to source directory, that match files and
# directories to ignore when looking for source files.
# This pattern also affects html_static_path and html_extra_path.
exclude_patterns = ['_build', 'build', 'Thumbs.db', '.DS_Store', '.env', '**.ipynb_checkpoints']

pygments_style = 'sphinx'
pygments_dark_style = "monokai"
# -- Options for HTML output -------------------------------------------------

# The theme to use for HTML and HTML Help pages.  See the documentation for
# a list of builtin themes.
#
html_theme = 'furo'

# Add any paths that contain custom static files (such as style sheets) here,
# relative to this directory. They are copied after the builtin static files,
# so a file named "default.css" will overwrite the builtin "default.css".
html_static_path = ['_static']

html_theme_options = {
    "navigation_with_keys": True,
}

html_title = "OOP Python"

# -- Jupyter options ---------------------------------------------------------
jupyter_execute_notebooks = "auto"

thebe_config = {
    "codemirror-theme": "monokai",
    "always_load": True,
}