python highlight

app.py

@@ -149,7 +149,21 @@ def render_article(article_path: str, component_inserts: dict[str, callable]):
             if index % 2 == 0:
                 # Render markdown content wrapped in article container
                 html_content = markdown_to_html(part)
-                gr.HTML(f'<div class="article">{html_content}</div>')
+                # Add syntax highlighting script
+                highlighted_html = f'''
+                <div class="article">{html_content}</div>
+                <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+                <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
+                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
+                <script>
+                    document.addEventListener('DOMContentLoaded', function() {{
+                        document.querySelectorAll('pre code').forEach((block) => {{
+                            hljs.highlightElement(block);
+                        }});
+                    }});
+                </script>
+                '''
+                gr.HTML(highlighted_html)
             else:
                 # Render interactive component or show error
                 component_builder = component_inserts.get(part)
@@ -571,10 +585,21 @@ html, body, .gradio-container { background: #fff !important; }
   font-size: 0.875rem !important;
 }
 
-/* Python syntax highlighting approximation */
+/* Python syntax highlighting with Highlight.js integration */
+.article pre code {
+  background: transparent !important;
+  color: #1e293b !important;
+  padding: 0 !important;
+  border-radius: 0 !important;
+  font-weight: 400 !important;
+  font-size: inherit !important;
+  line-height: inherit !important;
+}
+
+/* Highlight.js Python syntax highlighting */
 .article pre code .hljs-keyword,
 .article pre code .hljs-built_in {
-  color: #7c3aed !important; /* Purple for keywords */
+  color: #7c3aed !important; /* Purple for keywords like def, class, import */
   font-weight: 600 !important;
 }
 
@@ -597,6 +622,18 @@ html, body, .gradio-container { background: #fff !important; }
   font-weight: 600 !important;
 }
 
+.article pre code .hljs-params {
+  color: #1e293b !important;
+}
+
+.article pre code .hljs-attr {
+  color: #0d9488 !important; /* Teal for attributes */
+}
+
+.article pre code .hljs-type {
+  color: #7c3aed !important; /* Purple for types */
+}
+
 /* Blockquotes, images, rules */
 .article blockquote { border-left: 4px solid var(--link-text-color); padding-left: 1rem; margin: 1.25rem 0; color: #334155 !important; font-style: italic; }
 .article img { display: block; max-width: 100%; height: auto; margin: 1.25rem auto; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.08); }