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.2rc3.tar.gz (30.2 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.2rc3-py3-none-any.whl (13.7 kB view details)

Uploaded Python 3

File details

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

File metadata

File hashes

Hashes for jupyter_export_html_style-0.0.2rc3.tar.gz
Algorithm Hash digest
SHA256 e146ec41afbdc09749a65b24e841c8304a6e0288ba84237b475ce993f26bd4cc
MD5 8b4c1a41187782fc6adb690bc0779fc4
BLAKE2b-256 38b9ca0fc62b078f266f632280af32289e3d80cdf7cf06638adacd666cbd7fc8

See more details on using hashes here.

File details

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

File metadata

File hashes

Hashes for jupyter_export_html_style-0.0.2rc3-py3-none-any.whl
Algorithm Hash digest
SHA256 ee2092b395dc604e762959d08a1169f682b4024ca7daa07e3acab6f801e96ba1
MD5 ab9811d1f8ea5f2ff16c6c9a6cccdc77
BLAKE2b-256 82bcd860924f027541240fe16d7ac3289fd3605a2aaf53cf3e775db6af70a3c1

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