Skip to main content

A JupyterLab extension and nbconvert preprocessor/exporter for HTML export with cell style metadata overrides

Project description

Jupyter Export HTML Style

Test Documentation PyPI version Conda Version License: MIT

A JupyterLab extension and nbconvert preprocessor/exporter that allows custom cell-level styling when exporting notebooks to HTML.

Features

  • ๐ŸŽจ Custom Cell Styling: Apply CSS styles to individual cells via metadata
  • ๐ŸŽฏ Input/Output Styling: Separate styles for cell inputs and outputs
  • ๐Ÿ“ Notebook-Level Styling: Add custom styles and stylesheets to the entire notebook
  • ๐Ÿ”ง nbconvert Integration: Seamlessly integrates with nbconvert's export pipeline
  • ๐Ÿš€ Easy to Use: Simple metadata-based configuration
  • ๐Ÿ“ฆ Multiple Distribution Channels: Available via pip and conda
  • ๐Ÿ”Œ Extensible: Built on nbconvert's preprocessor architecture

Installation

Using pip

pip install jupyter-export-html-style

Using conda

conda install -c phygbu jupyter-export-html-style

From source

git clone https://github.com/gb119/jupyter_export_html_style.git
cd jupyter_export_html_style
pip install -e .

Quick Start

1. Add Style Metadata to Cells

In your Jupyter notebook, add style metadata to cells:

{
  "metadata": {
    "style": {
      "background-color": "#f0f0f0",
      "border": "2px solid #333",
      "padding": "10px"
    }
  }
}

2. Export with Custom Styles

From the command line:

jupyter nbconvert --to styled_html notebook.ipynb

Or using Python:

from jupyter_export_html_style import StyledHTMLExporter

exporter = StyledHTMLExporter()
(body, resources) = exporter.from_filename('notebook.ipynb')

Usage Examples

Cell-Level Styling

Highlighting Important Cells

{
  "style": {
    "background-color": "#fff9c4",
    "border": "2px dashed #fbc02d"
  }
}

Error/Warning Styling

{
  "style": {
    "background-color": "#ffebee",
    "border-left": "5px solid #f44336"
  }
}

Custom CSS Strings

{
  "style": "background: linear-gradient(to right, #667eea 0%, #764ba2 100%); color: white; padding: 15px;"
}

Input and Output Styling

Style the input and output areas of cells separately:

Input Styling

{
  "input-style": {
    "background-color": "#f5f5f5",
    "border-left": "4px solid #2196f3",
    "padding": "10px"
  }
}

Output Styling

{
  "output-style": {
    "background-color": "#e8f5e9",
    "border": "1px solid #4caf50",
    "font-family": "monospace"
  }
}

Combined Cell, Input, and Output Styles

{
  "style": {
    "margin": "20px 0",
    "border-radius": "8px"
  },
  "input-style": {
    "background-color": "#fce4ec",
    "color": "#880e4f"
  },
  "output-style": {
    "background-color": "#e8f5e9",
    "font-family": "monospace"
  }
}

Notebook-Level Styling

Add custom styles and stylesheets that apply to the entire notebook. Add these to the notebook metadata (not cell metadata):

Custom Inline Styles

{
  "metadata": {
    "style": ".jp-Cell { box-shadow: 0 2px 4px rgba(0,0,0,0.1); } body { font-family: Arial, sans-serif; }"
  }
}

External Stylesheets

Single stylesheet:

{
  "metadata": {
    "stylesheet": "https://example.com/custom-theme.css"
  }
}

Multiple stylesheets:

{
  "metadata": {
    "stylesheet": [
      "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
      "https://example.com/custom-theme.css"
    ]
  }
}

Combined Notebook Styles

{
  "metadata": {
    "style": "body { max-width: 1200px; margin: 0 auto; }",
    "stylesheet": ["https://fonts.googleapis.com/css2?family=Inter&display=swap"]
  }
}

Building from Source

Building Python Wheels

pip install build
python -m build

The wheel and source distribution will be created in the dist/ directory.

Building Conda Packages

conda install conda-build
conda build conda.recipe

The conda package will be built in your conda-bld directory.

Documentation

Full documentation is available at https://gb119.github.io/jupyter_export_html_style/

Development

Setting Up Development Environment

# Clone the repository
git clone https://github.com/gb119/jupyter_export_html_style.git
cd jupyter_export_html_style

# Create virtual environment
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install in development mode
pip install -e ".[dev,docs]"

Running Tests

pytest

Code Quality

# Format code
black jupyter_export_html_style

# Lint code
ruff check jupyter_export_html_style

# Type check
mypy jupyter_export_html_style

Project Structure

jupyter_export_html_style/
โ”œโ”€โ”€ jupyter_export_html_style/    # Main Python package
โ”‚   โ”œโ”€โ”€ __init__.py              # Package initialization
โ”‚   โ”œโ”€โ”€ preprocessor.py          # nbconvert preprocessor
โ”‚   โ””โ”€โ”€ exporter.py              # Custom HTML exporter
โ”œโ”€โ”€ docs/                        # Documentation
โ”‚   โ”œโ”€โ”€ source/                  # Sphinx documentation source
โ”‚   โ”‚   โ”œโ”€โ”€ index.md
โ”‚   โ”‚   โ”œโ”€โ”€ installation.md
โ”‚   โ”‚   โ”œโ”€โ”€ usage.md
โ”‚   โ”‚   โ”œโ”€โ”€ api.md
โ”‚   โ”‚   โ””โ”€โ”€ contributing.md
โ”‚   โ”œโ”€โ”€ Makefile                # Documentation build (Unix)
โ”‚   โ””โ”€โ”€ make.bat                # Documentation build (Windows)
โ”œโ”€โ”€ conda.recipe/               # Conda build recipe
โ”‚   โ””โ”€โ”€ meta.yaml              # Conda package metadata
โ”œโ”€โ”€ .github/                   # GitHub configuration
โ”‚   โ””โ”€โ”€ workflows/            # CI/CD workflows
โ”‚       โ”œโ”€โ”€ build.yml         # Build and test workflow
โ”‚       โ””โ”€โ”€ docs.yml          # Documentation build workflow
โ”œโ”€โ”€ pyproject.toml            # Project metadata and build configuration
โ”œโ”€โ”€ README.md                 # This file
โ”œโ”€โ”€ LICENSE                   # MIT License
โ””โ”€โ”€ .gitignore               # Git ignore patterns

Contributing

Contributions are welcome! Please see CONTRIBUTING.md for details.

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

Support

Citation

If you use this project in your research, please cite:

@software{jupyter_export_html_style,
  author = {Burnell, Gavin},
  title = {Jupyter Export HTML Style},
  year = {2026},
  url = {https://github.com/gb119/jupyter_export_html_style}
}

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

jupyter_export_html_style-0.0.1rc4.tar.gz (23.4 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

jupyter_export_html_style-0.0.1rc4-py3-none-any.whl (10.1 kB view details)

Uploaded Python 3

File details

Details for the file jupyter_export_html_style-0.0.1rc4.tar.gz.

File metadata

File hashes

Hashes for jupyter_export_html_style-0.0.1rc4.tar.gz
Algorithm Hash digest
SHA256 b4593459cdce9ed220361f0c67aca9a75c4c600c0b0bcb2f7e91e8706d90a778
MD5 942a565d8a495c4e99c6797c684d2705
BLAKE2b-256 1b131e6186cc34755858dc6650499a72b96862c7f7023a9807ad72336c5944f6

See more details on using hashes here.

File details

Details for the file jupyter_export_html_style-0.0.1rc4-py3-none-any.whl.

File metadata

File hashes

Hashes for jupyter_export_html_style-0.0.1rc4-py3-none-any.whl
Algorithm Hash digest
SHA256 6eeeada0fc2776998b0a9d636f476b97d5ebf41925d1dc9a13af35d65033308a
MD5 7835c0551ceeb633a8cb989ddd6c6305
BLAKE2b-256 9dc5c583f7d204dc92bc31166001c6f62565ac2d08b5f00e64f756b2bc118416

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page