fix syntax highlighting

nicegui/elements/markdown.py

@@ -16,8 +16,8 @@ def apply_tailwind(html: str) -> str:
         '<a': '<a class="underline text-blue-600 hover:text-blue-800 visited:text-purple-600"',
         '<ul': '<ul class="list-disc ml-6"',
         '<p>': '<p class="mb-2">',
-        '<div\ class="codehilite">': '<div class=" codehilite mb-2 p-2" style="overflow: scroll">',
-        '<code': '<code style="background-color: #f8f8f8"',
+        '<div\ class="codehilite">': '<div class="codehilite mb-2 p-2">',
+        '<code': '<code style="background-color: transparent"',
     }
     pattern = re.compile('|'.join(rep.keys()))
     return pattern.sub(lambda m: rep[re.escape(m.group(0))], html)

website/example.py

@@ -62,7 +62,7 @@ class example:
             code = '\n'.join(code)
             with ui.card() \
                     .classes(self.source_classes) \
-                    .style('box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); background: #e3eafd'):
+                    .style('box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); background: #ebf0fe'):
                 self._add_dots()
                 ui.markdown(code)
         return f

website/main.py

@@ -2,6 +2,7 @@
 from pathlib import Path
 
 import docutils.core
+from pygments.formatters import HtmlFormatter
 
 import website.api_docs_and_examples as api_docs_and_examples
 from nicegui import Client, ui
@@ -14,6 +15,7 @@ HEADER_HEIGHT = '70px'
 async def index(client: Client):
     ui.add_head_html('<meta name="viewport" content="width=device-width, initial-scale=1" />')
     ui.add_head_html(docutils.core.publish_parts('', writer_name='html')['stylesheet'])
+    ui.add_head_html(f'<style>{HtmlFormatter(nobackground=True).get_style_defs(".codehilite")}</style>')
     client.content.classes(remove='q-pa-md gap-4').style('background: #f8f8f8')
 
     with ui.header() \