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.2rc1.tar.gz (27.9 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.2rc1-py3-none-any.whl (12.3 kB view details)

Uploaded Python 3

File details

Details for the file jupyter_export_html_style-0.0.2rc1.tar.gz.

File metadata

File hashes

Hashes for jupyter_export_html_style-0.0.2rc1.tar.gz
Algorithm Hash digest
SHA256 24f97e1c562b33b7d738baf17307bfdcc36118b9bc1f57bc099442ea0c0383b1
MD5 2db7f27574530ddf20adcc21c7546065
BLAKE2b-256 d6bee2e5ec9f1c6af147e2d9fdb71b8bbf3f759b0d7d10518311f535419dd7fe

See more details on using hashes here.

File details

Details for the file jupyter_export_html_style-0.0.2rc1-py3-none-any.whl.

File metadata

File hashes

Hashes for jupyter_export_html_style-0.0.2rc1-py3-none-any.whl
Algorithm Hash digest
SHA256 c609681992375b251f433328d0bb8dd14c24fbf68607270d230bc38bb36da089
MD5 a97e75e3d9ab8db32b852b26d8621283
BLAKE2b-256 04da818daf851f63f35f0d319f3f9a670c5567751dac38776463bc17990ecb12

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