Thanks for reporting this issue, @platinops!

I just mentioned a related observation a few hours ago: #4539 (review). For whatever reason codehilite.css is served under an unusual route which seems to be handled by the @ui.page('/{_:path}') decorator.

Hmm interesting.

I have to ask: Why was codehilite CSS dynamically generated on-the-fly for every NiceGUI app launch?

It has always been like this since 6d67e9c

I'd imagine we can pre-generate the CSS and then toss it to lib/codehilite/codehilite.css in the distribution, and use the normal self.add_resource method for serving the CSS?

@evnchn I can't remember the exact reasoning behind 6d67e9c, but dynamic generation

• is cheap,
• doesn't require an extra utility script, and
• avoids a potential mismatch of NiceGUI's static codehilite.css and the markdown2 (or pygments) version installed on the user's machine. Imagine updating markdown2 and suddenly the static CSS doesn't match class names used in the generated HTML.

Therefore I would keep generating the CSS dynamically, but serve it via add_resource. Simply writing the file to lib/codehilite/codehilite.css at runtime should work, shouldn't it?

Simply writing the file to lib/codehilite/codehilite.css at runtime should work, shouldn't it?

I was contemplating that too, but it isn't a perfect solution. Check if you agree:

1. Simply writing the file to lib/codehilite/codehilite.css (what you mentioned)
   • Pros: Dead simple
   • Cons: May have conflict between server instances (different styling? Simultaneous write collision?)
     • Also self-writing to the NiceGUI install may not be recommended behaviour.
2. Utility script to generate the CSS once
   • Pros: Drop pygments as a runtime dependency
   • Cons: User cannot customize
3. Introduce class ResourceFromCallable and register_resource_from_callable, where def _get_resource(key: str, path: str) -> FileResponse: route will call the callable to get the result on every access
   • Pros: Faithful to the original code execution intent
   • Cons: Add complexity to NiceGUI core code
4. Write the CSS to some random temporary directory
   • Pros: Simple and avoid conflict too
   • Cons: We have to clean it up on server shutdown, which may not occur if the server was takkilled...

I mostly agree. Some more thoughts:

Option 1: Writing to lib/codehilite/codehilite.css at runtime could also be difficult due to missing permissions.
Option 2: I think dropping pygments does not work, because markdown2 uses it internally to generate the HTML. This is how HTML and CSS match: By generating the HTML with the same pygments version like the CSS, both are guaranteed to match. If we decouple HTML and CSS generation, we risk conflicts.
Option 3: I'd like to do it in memory, but it indeed adds some complexity.
Option 4: Is it always possible to create temporary files? Probably yes.

Thinking about codehilite.css more broadly: I just noticed it defines a line height for <pre> tags globally:

ui.add_css('pre { line-height: 5.0; }')

ui.html('''
<pre>
Foo
Bar
</pre>
''')

ui.markdown('Hello')  # Removing this line has impact on the distance between "Foo" and "Bar".

I wonder if we could convert markdown.js into a SFC markdown.vue inlining codehilite.css and scoping its style defitions. But as outlined above, it would be better to generate the CSS at runtime to guarantee compatibility with the HTML code.

I guess we can agree that we eliinate option 1 and 2, and establish that the HTML is best to be generated dynamically to avoid any mismatch possibilities (since it cheap anyways)

I think ResourceFromCallable is easiest to implement so far. Not sure about the temporary file, since:

• If we generate 1 single temporary file and use that across all serves, then we would miss runtime customizations to pygments if the user applies any, deviating from the original intent
• If we generate a separate temporary file per serve, then we need to call some code eventually per serve so as to populate the temporary file, and at that point the ResourceFromCallable makes much more sense

@falkoschindler https://github.com/evnchn/nicegui/tree/dynamic-resources

Works on my machine. PR coming later. Supermarket 5pm has discount, let me grab that first!

Actually, this issue boils down to the match-all @ui.page("/{_:path}").

single_page_app example used it, but it itself isn't the root-cause of the bug.

This code breaks on main but works on #4778

@ui.page("/")
@ui.page("/{_:path}")
def main():
    ui.markdown("""```python
print("hello world")
```""")