Load codehilite.css faster (cache headers, file name hash cache-busting) (#5497)

### Motivation

While working on #5493 I also noticed that, full cached, NiceGUI
documentation reaches out to:

- `index.html` (obviously)
- `codehilite.css`

The latter we should be able to get rid of? 

### Implementation

- Filename may change so we do `${this.filename}` with the accompanying
props.
- Compute the file name and return the response using
`_generate_codehilite_css()`, which is shared.
- [ ] (Questionable) Apply `@lru_cache(maxsize=1)` to
`_generate_codehilite_css()` because it doesn't ever change in runtime
(an asusmption, is this right?)

### Progress

- [x] I chose a meaningful title that completes the sentence: "If
applied, this PR will..."
- [x] The implementation is complete.
- [x] Pytests have been added (or are not necessary).
- [x] Documentation has been added (or is not necessary).

### Results

Slow 4G no CPU throttling (because network is the bottleneck)

Before: 1.46s load
After: 1.00s load

---------

Co-authored-by: Falko Schindler <falko@zauberzeug.com>

Author: evnchn

nicegui/elements/markdown.js

@@ -4,7 +4,7 @@ export default {
   template: `<div></div>`,
   async mounted() {
     await this.$nextTick(); // NOTE: wait for window.path_prefix to be set
-    await loadResource(window.path_prefix + `${this.dynamic_resource_path}/codehilite.css`);
+    await loadResource(window.path_prefix + `${this.dynamic_resource_path}/${this.resource_name}`);
     if (this.use_mermaid) {
       this.mermaid = (await import("nicegui-mermaid")).mermaid;
       this.mermaid.initialize({ startOnLoad: false });
@@ -54,6 +54,7 @@ export default {
   },
   props: {
     dynamic_resource_path: String,
+    resource_name: String,
     use_mermaid: {
       required: false,
       default: false,

nicegui/elements/markdown.py

@@ -1,10 +1,12 @@
+import hashlib
 import os
 from functools import lru_cache
 
 import markdown2
 from fastapi.responses import PlainTextResponse
 from pygments.formatters import HtmlFormatter  # pylint: disable=no-name-in-module
 
+from .. import core
 from .mixins.content_element import ContentElement
 
 
@@ -27,15 +29,25 @@ def __init__(self,
         if 'mermaid' in extras:
             self._props['use_mermaid'] = True
 
+        codehilite = self._generate_codehilite_css()
+        self._props['resource_name'] = f'codehilite_{hashlib.sha256(codehilite.encode()).hexdigest()[:32]}.css'
         self.add_dynamic_resource(
-            'codehilite.css',
+            self._props['resource_name'],
             lambda: PlainTextResponse(
-                HtmlFormatter(nobackground=True).get_style_defs('.codehilite') +
-                HtmlFormatter(nobackground=True, style='github-dark').get_style_defs('.body--dark .codehilite'),
+                codehilite,
                 media_type='text/css',
+                headers={'Cache-Control': core.app.config.cache_control_directives},
             ),
         )
 
+    @staticmethod
+    @lru_cache(maxsize=1)
+    def _generate_codehilite_css() -> str:
+        return (
+            HtmlFormatter(nobackground=True).get_style_defs('.codehilite') +
+            HtmlFormatter(nobackground=True, style='github-dark').get_style_defs('.body--dark .codehilite')
+        )
+
     def _handle_content_change(self, content: str) -> None:
         html = prepare_content(content, extras=' '.join(self.extras))
         if self._props.get('innerHTML') != html:

tests/test_user_simulation.py

@@ -378,22 +378,23 @@ def page():
 
     await user.open('/')
     output = str(user.current_layout)
-    assert output == '''
-q-layout
- q-page-container
-  q-page
-   div
-    Label [markers=first, text=Hello]
-    Row
-     Column
-      Button [markers=second, label=World]
-      Icon [markers=third, name=thumbs-up]
-    Avatar [icon=star]
-    Input [value=typed, label=some input, for=c10, placeholder=type here, type=text]
-    Markdown [content=## Markdown...]
-    Card
-     Image [src=/image.jpg]
-'''.strip()
+    pattern = textwrap.dedent(r'''
+        q-layout
+         q-page-container
+          q-page
+           div
+            Label \[markers=first, text=Hello\]
+            Row
+             Column
+              Button \[markers=second, label=World\]
+              Icon \[markers=third, name=thumbs-up\]
+            Avatar \[icon=star\]
+            Input \[value=typed, label=some input, for=c10, placeholder=type here, type=text\]
+            Markdown \[content=\#\# Markdown..., resource_name=[^\]]+\]
+            Card
+             Image \[src=/image.jpg\]
+    ''').strip()
+    assert re.fullmatch(pattern, output) is not None
 
 
 async def test_combined_filter_parameters(user: User) -> None:
@@ -626,14 +627,14 @@ def page():
 
     await user.open('/')
     output = str(user.current_layout)
-    assert output == '''
-q-layout
- q-page-container
-  q-page
-   div
-    Label [text=Visible]
-    Label [text=Hidden, visible=False]
-'''.strip()
+    assert output == textwrap.dedent('''
+        q-layout
+         q-page-container
+          q-page
+           div
+            Label [text=Visible]
+            Label [text=Hidden, visible=False]
+    ''').strip()
 
 
 async def test_typing_to_disabled_element(user: User) -> None: