CSS Class Consistency Demo¶

This notebook demonstrates the consistent CSS classes used for Jupyter notebook integration in MkDocs. The styling follows the jp-* convention for compatibility with Jupyter's standard classes.

Basic Cell Types¶

Code Cells¶

Code cells use the following CSS classes:

• .jp-Cell - Base cell container
• .jp-CodeCell - Code cell specific styling
• .jp-InputArea - Input area container
• .jp-OutputArea - Output area container

In [ ]:

# This is a standard code cell
# It will have the jp-InputArea class for the code section
# And jp-OutputArea for any outputs
print("Hello from a code cell!")
print("Notice the consistent styling with prompt numbers")

# This is a standard code cell # It will have the jp-InputArea class for the code section # And jp-OutputArea for any outputs print("Hello from a code cell!") print("Notice the consistent styling with prompt numbers")

Markdown Cells¶

Markdown cells use:

• .jp-Cell - Base cell container
• .jp-MarkdownCell - Markdown specific styling
• .jp-RenderedMarkdown - Rendered markdown content

Output Types¶

Different output types have their own CSS classes for consistent styling:

In [ ]:

# Text output - uses jp-RenderedText
for i in range(3):
    print(f"Line {i+1}: This is plain text output")

# Text output - uses jp-RenderedText for i in range(3): print(f"Line {i+1}: This is plain text output")

In [ ]:

# HTML output - uses jp-RenderedHTMLCommon
from IPython.display import HTML

HTML(
    """
<div style="background: #f0f0f0; padding: 10px; border-radius: 5px;">
    <h3>HTML Output</h3>
    <p>This content uses the <code>jp-RenderedHTMLCommon</code> class.</p>
    <ul>
        <li>Styled consistently with the theme</li>
        <li>Respects color schemes</li>
        <li>Maintains readability</li>
    </ul>
</div>
"""
)

# HTML output - uses jp-RenderedHTMLCommon from IPython.display import HTML HTML( """

HTML Output

This content uses the jp-RenderedHTMLCommon class.

• Styled consistently with the theme
• Respects color schemes
• Maintains readability

""" )

In [ ]:

# Mathematical output - uses jp-RenderedLatex
from IPython.display import Latex, Math

Math(r"\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}")

# Mathematical output - uses jp-RenderedLatex from IPython.display import Latex, Math Math(r"\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}")

In [ ]:

# Image output - uses jp-RenderedImage
import matplotlib.pyplot as plt
import numpy as np

# Create a simple plot
x = np.linspace(0, 2 * np.pi, 100)
y = np.sin(x)

plt.figure(figsize=(8, 4))
plt.plot(x, y, "b-", linewidth=2)
plt.title("Sine Wave - jp-RenderedImage class")
plt.xlabel("x")
plt.ylabel("sin(x)")
plt.grid(True, alpha=0.3)
plt.show()

# Image output - uses jp-RenderedImage import matplotlib.pyplot as plt import numpy as np # Create a simple plot x = np.linspace(0, 2 * np.pi, 100) y = np.sin(x) plt.figure(figsize=(8, 4)) plt.plot(x, y, "b-", linewidth=2) plt.title("Sine Wave - jp-RenderedImage class") plt.xlabel("x") plt.ylabel("sin(x)") plt.grid(True, alpha=0.3) plt.show()

Error Handling¶

Error outputs have special styling with the jp-OutputArea-error class:

In [ ]:

raises-exception

# This will generate an error to show error styling
# The error output will use jp-OutputArea-stderr
undefined_variable

# This will generate an error to show error styling # The error output will use jp-OutputArea-stderr undefined_variable

Cell Visibility Control¶

Cells can be hidden using tags that map to CSS classes:

In [ ]:

hide-output

# This cell has the "hide-output" tag
# Only the code will be visible, not the output
print("This output is hidden!")
print("Uses the jp-mod-hide-output class")

# This cell has the "hide-output" tag # Only the code will be visible, not the output print("This output is hidden!") print("Uses the jp-mod-hide-output class")

Interactive Widgets¶

Interactive elements use the jupyter-widgets class:

In [ ]:

# Example with interactive widgets (if ipywidgets is available)
try:
    import ipywidgets as widgets
    from IPython.display import display

    # Create a simple slider widget
    slider = widgets.IntSlider(
        value=50,
        min=0,
        max=100,
        step=1,
        description="Value:",
        disabled=False,
        continuous_update=False,
        orientation="horizontal",
        readout=True,
        readout_format="d",
    )

    # Create output widget
    output = widgets.Output()

    def on_value_change(change):
        with output:
            output.clear_output()
            print(f"Slider value: {change['new']}")

    slider.observe(on_value_change, names="value")

    # Display widgets
    display(widgets.VBox([slider, output]))

except ImportError:
    print("ipywidgets not available - widget styling uses .jupyter-widgets class")

# Example with interactive widgets (if ipywidgets is available) try: import ipywidgets as widgets from IPython.display import display # Create a simple slider widget slider = widgets.IntSlider( value=50, min=0, max=100, step=1, description="Value:", disabled=False, continuous_update=False, orientation="horizontal", readout=True, readout_format="d", ) # Create output widget output = widgets.Output() def on_value_change(change): with output: output.clear_output() print(f"Slider value: {change['new']}") slider.observe(on_value_change, names="value") # Display widgets display(widgets.VBox([slider, output])) except ImportError: print("ipywidgets not available - widget styling uses .jupyter-widgets class")

Multiple Outputs¶

Cells can have multiple outputs, each styled consistently:

In [ ]:

# Multiple output types in one cell
print("1. Text output")

display(HTML("<strong>2. HTML output</strong>"))

display(Math(r"3. \text{Math output: } E = mc^2"))

# Small plot
plt.figure(figsize=(4, 2))
plt.plot([1, 2, 3, 4], [1, 4, 2, 3], "r-")
plt.title("4. Plot output")
plt.show()

# Multiple output types in one cell print("1. Text output") display(HTML("2. HTML output")) display(Math(r"3. \text{Math output: } E = mc^2")) # Small plot plt.figure(figsize=(4, 2)) plt.plot([1, 2, 3, 4], [1, 4, 2, 3], "r-") plt.title("4. Plot output") plt.show()

Responsive Design¶

The CSS classes include responsive design considerations:

• Desktop: Full prompt display with side-by-side layout
• Tablet: Reduced prompt width, smaller fonts
• Mobile: Stacked layout, minimal prompts

Try resizing your browser to see the responsive behavior!

In [ ]:

# Long output to test responsive wrapping
long_text = (
    "This is a very long line of text that should wrap properly on smaller screens. "
    * 5
)
print(long_text)

# Long output to test responsive wrapping long_text = ( "This is a very long line of text that should wrap properly on smaller screens. " * 5 ) print(long_text)

Accessibility Features¶

The CSS classes include accessibility enhancements:

1. Focus indicators for keyboard navigation
2. Screen reader text for prompts
3. High contrast mode support
4. Reduced motion preferences

These ensure the notebooks are usable by everyone.

Custom Styling Examples¶

The CSS framework supports utility classes for customization:

In [ ]:

highlight

# This cell could be highlighted with jp-Cell--highlighted class
print("Important code that needs attention!")
print("Uses special highlighting to stand out")

# This cell could be highlighted with jp-Cell--highlighted class print("Important code that needs attention!") print("Uses special highlighting to stand out")

Summary¶

This notebook demonstrated the comprehensive CSS class system for Jupyter notebooks in MkDocs:

Core Classes¶

• .jupyter-notebook - Main container
• .jp-Cell - Cell containers
• .jp-InputArea - Code input areas
• .jp-OutputArea - Output areas

Content Classes¶

• .jp-RenderedText - Plain text
• .jp-RenderedHTMLCommon - HTML content
• .jp-RenderedLatex - Mathematical content
• .jp-RenderedImage - Images and plots
• .jp-RenderedMarkdown - Markdown content

Modifier Classes¶

• .jp-mod-hide-input - Hide input cells
• .jp-mod-hide-output - Hide outputs
• .jp-mod-hide - Hide entire cells
• .jp-mod-collapsed - Collapsed cells

All classes work together to provide a consistent, accessible, and responsive notebook experience!