question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. Itย collects links to all the places you might be looking at while hunting down a tough bug.

And, if youโ€™re still stuck at the end, weโ€™re happy to hop on a call to see how we can help out.

[BUG] export_html leaks style into the page

See original GitHub issue

Describe the bug

Following discussion https://github.com/Textualize/rich/discussions/2640 Injecting HTML generated with Richโ€™s Console.export_html() method seems to leak some style into the page.

htmlstyleleak

The page is built with MkDocs + Material for MkDocs. The dark theme is activated. The light theme is less impacted, I just see extra โ€œbarsโ€ (like an empty code line) in-between block elements:

lighttheme

Code used to generate the HTML:

import os

from rich.console import Console

report = """$ griffe check griffe -ssrc -b0.24.0 -a0.23.0
[bold]src/griffe/loader.py[/]:156: GriffeLoader.resolve_aliases([blue]only_exported[/]): [yellow]Parameter kind was changed[/]: positional or keyword -> keyword-only
etc.
"""

with open(os.devnull, "w") as devnull:
    console = Console(record=True, width=150, file=devnull)
    console.print(report, markup=True, highlight=False)
print(console.export_html(inline_styles=True))

Both inline_styles=True and inline_styles=False give the same result.

Platform

Click to expand

Linux

$ python -m rich.diagnose
โ•ญโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ <class 'rich.console.Console'> โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฎ
โ”‚ A high level console interface.                                                  โ”‚
โ”‚                                                                                  โ”‚
โ”‚ โ•ญโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฎ โ”‚
โ”‚ โ”‚ <console width=239 ColorSystem.TRUECOLOR>                                    โ”‚ โ”‚
โ”‚ โ•ฐโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ โ”‚
โ”‚                                                                                  โ”‚
โ”‚     color_system = 'truecolor'                                                   โ”‚
โ”‚         encoding = 'utf-8'                                                       โ”‚
โ”‚             file = <_io.TextIOWrapper name='<stdout>' mode='w' encoding='utf-8'> โ”‚
โ”‚           height = 58                                                            โ”‚
โ”‚    is_alt_screen = False                                                         โ”‚
โ”‚ is_dumb_terminal = False                                                         โ”‚
โ”‚   is_interactive = True                                                          โ”‚
โ”‚       is_jupyter = False                                                         โ”‚
โ”‚      is_terminal = True                                                          โ”‚
โ”‚   legacy_windows = False                                                         โ”‚
โ”‚         no_color = False                                                         โ”‚
โ”‚          options = ConsoleOptions(                                               โ”‚
โ”‚                        size=ConsoleDimensions(width=239, height=58),             โ”‚
โ”‚                        legacy_windows=False,                                     โ”‚
โ”‚                        min_width=1,                                              โ”‚
โ”‚                        max_width=239,                                            โ”‚
โ”‚                        is_terminal=True,                                         โ”‚
โ”‚                        encoding='utf-8',                                         โ”‚
โ”‚                        max_height=58,                                            โ”‚
โ”‚                        justify=None,                                             โ”‚
โ”‚                        overflow=None,                                            โ”‚
โ”‚                        no_wrap=False,                                            โ”‚
โ”‚                        highlight=None,                                           โ”‚
โ”‚                        markup=None,                                              โ”‚
โ”‚                        height=None                                               โ”‚
โ”‚                    )                                                             โ”‚
โ”‚            quiet = False                                                         โ”‚
โ”‚           record = False                                                         โ”‚
โ”‚         safe_box = True                                                          โ”‚
โ”‚             size = ConsoleDimensions(width=239, height=58)                       โ”‚
โ”‚        soft_wrap = False                                                         โ”‚
โ”‚           stderr = False                                                         โ”‚
โ”‚            style = None                                                          โ”‚
โ”‚         tab_size = 8                                                             โ”‚
โ”‚            width = 239                                                           โ”‚
โ•ฐโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ
โ•ญโ”€โ”€โ”€ <class 'rich._windows.WindowsConsoleFeatures'> โ”€โ”€โ”€โ”€โ•ฎ
โ”‚ Windows features available.                           โ”‚
โ”‚                                                       โ”‚
โ”‚ โ•ญโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฎ โ”‚
โ”‚ โ”‚ WindowsConsoleFeatures(vt=False, truecolor=False) โ”‚ โ”‚
โ”‚ โ•ฐโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ โ”‚
โ”‚                                                       โ”‚
โ”‚ truecolor = False                                     โ”‚
โ”‚        vt = False                                     โ”‚
โ•ฐโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ
โ•ญโ”€โ”€โ”€โ”€โ”€โ”€ Environment Variables โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฎ
โ”‚ {                                  โ”‚
โ”‚     'TERM': 'xterm-256color',      โ”‚
โ”‚     'COLORTERM': 'truecolor',      โ”‚
โ”‚     'CLICOLOR': None,              โ”‚
โ”‚     'NO_COLOR': None,              โ”‚
โ”‚     'TERM_PROGRAM': None,          โ”‚
โ”‚     'COLUMNS': None,               โ”‚
โ”‚     'LINES': None,                 โ”‚
โ”‚     'JUPYTER_COLUMNS': None,       โ”‚
โ”‚     'JUPYTER_LINES': None,         โ”‚
โ”‚     'JPY_PARENT_PID': None,        โ”‚
โ”‚     'VSCODE_VERBOSE_LOGGING': None โ”‚
โ”‚ }                                  โ”‚
โ•ฐโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ
platform="Linux"
% pdm list --freeze | grep rich
rich==12.6.0

Issue Analytics

  • State:closed
  • Created 10 months ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
willmcgugancommented, Nov 12, 2022

Ah. Care to PR for that?

0reactions
pawamoycommented, Nov 12, 2022

Final code:

with open(os.devnull, "w") as devnull:
    console = Console(record=True, width=150, file=devnull)
    console.print(report, markup=True, highlight=False)
print(console.export_html(inline_styles=True, code_format="<pre><code>{code}</code></pre>"))

Colors used to look better on both light and dark themes:

  • #7faeff instead of blue
  • #afaf72 instead of yellow
Read more comments on GitHub >

github_iconTop Results From Across the Web

How to export HTML with all CSS inlined like the Browser ...
Small demo, press the button to copy the text. All the div style's will be inline, somewhere in that huge list will be...
Read more >
[Bug] Attention Please: Export to html with styles causes path ...
I converted a simple markdown file into html using Typora: # Test and I got ... Please: Export to html with styles causes...
Read more >
Fixed issues in InDesign - Adobe Support
Zooming in/out via Cmd+/- does not work when the cursor is above the page element in CPU mode. InDesign crashes while opening the...
Read more >
A bug that add several repeating css in content bottom
I am using TT1 blocks theme and gutenberg latest version in wordpress 5.8. I noticed that the pages are generating lots of style...
Read more >
HTML5 Canvas Export to High Quality Image Tutorial - Konva
How to export a high quality image from a stage?If you need to export a stage as an image or as base64 then...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found