Update app.py

app.py

@@ -9,7 +9,7 @@ import base64
 from pygments import highlight
 from pygments.lexers import get_lexer_by_name
 from pygments.formatters import HtmlFormatter
-from pygments.styles import get_all_styles
+from pygments.styles import get_all_styles, get_style_by_name
 
 app = Flask(__name__)
 TEMP_DIR = "/tmp/markdown_temp"
@@ -69,28 +69,37 @@ def parse_agent_action(text):
 
 def build_full_html(markdown_text, styles, for_image=False):
     wrapper_id = "#output-wrapper"
-    # Default to sans-serif if missing
     font_family = styles.get('font_family', "sans-serif")
     
-    # Only include Google Fonts link for the Web Preview. 
-    # Wkhtmltopdf (Image gen) often fails on HTTPS font links in Docker.
+    # --- Fonts ---
     google_font_link = ""
     if not for_image and "sans-serif" not in font_family and "monospace" not in font_family:
         clean_font_name = font_family.split(',')[0].strip("'\"")
         google_font_link = f'<link href="https://fonts.googleapis.com/css2?family={clean_font_name.replace(" ", "+")}:wght@400;700&display=swap" rel="stylesheet">'
     
-    # Syntax Highlighting
+    # --- Syntax Highlighting & Code Box Styling ---
     highlight_theme = styles.get('highlight_theme', 'monokai')
+    
+    # We explicitly determine the background color of the theme to style the "Box"
+    try:
+        style_obj = get_style_by_name(highlight_theme)
+        bg_color = style_obj.background_color
+    except:
+        bg_color = "#272822" if highlight_theme == 'monokai' else "#f6f8fa"
+
+    # Generate the CSS for syntax highlighting
     pygments_css = ""
     if highlight_theme != 'none':
         try:
+            # We use 'codehilite' class which Markdown adds by default
             formatter = HtmlFormatter(style=highlight_theme, cssclass="codehilite")
-            pygments_css = formatter.get_style_defs(f' {wrapper_id}')
+            pygments_css = formatter.get_style_defs('.codehilite')
         except Exception:
-            pygments_css = "" # Fallback if theme fails
+            pygments_css = "" 
 
     scoped_css = f"""
         body {{ background-color: {styles.get('background_color', '#ffffff')}; margin: 0; padding: 0; }}
+        
         {wrapper_id} {{
             font-family: {font_family};
             font-size: {styles.get('font_size', '16')}px;
@@ -99,17 +108,57 @@ def build_full_html(markdown_text, styles, for_image=False):
             background-color: {styles.get('background_color', '#fff')};
             padding: {styles.get('page_padding', '40')}px;
         }}
+        
+        /* Tables */
         {wrapper_id} table {{ border-collapse: collapse; width: 100%; margin-bottom: 1em; }}
         {wrapper_id} th, {wrapper_id} td {{ border: 1px solid #ddd; padding: 12px; text-align: left; }}
-        {wrapper_id} pre {{ padding: {styles.get('code_padding', '15')}px; border-radius: 8px; overflow-x: auto; background: #222; color: #fff; }}
-        {wrapper_id} code {{ font-family: 'Fira Code', monospace; }}
-        {wrapper_id} h1, {wrapper_id} h2, {wrapper_id} h3 {{ border-bottom: 1px solid #eee; padding-bottom: 5px; }}
+        
+        /* Headers */
+        {wrapper_id} h1, {wrapper_id} h2, {wrapper_id} h3 {{ border-bottom: 1px solid #eee; padding-bottom: 5px; margin-top: 1.5em; }}
+        
+        /* --- CODE BOX STYLING (CRITICAL) --- */
+        
+        /* 1. The wrapper div generated by Pygments */
+        {wrapper_id} .codehilite {{
+            background: {bg_color};
+            padding: {styles.get('code_padding', '15')}px;
+            border-radius: 8px;
+            margin: 1em 0;
+            overflow-x: auto;
+            border: 1px solid rgba(0,0,0,0.1);
+        }}
+        
+        /* 2. The pre tag inside the wrapper */
+        {wrapper_id} .codehilite pre {{
+            margin: 0;
+            padding: 0;
+            background: transparent; /* inherit from .codehilite */
+            color: inherit;
+            font-family: 'Fira Code', 'Consolas', monospace;
+            line-height: 1.4;
+        }}
+        
+        /* 3. Fallback for plain code blocks not caught by Pygments */
+        {wrapper_id} pre:not([class]) {{
+            background: #f4f4f4;
+            padding: 15px;
+            border-radius: 8px;
+            overflow-x: auto;
+            font-family: monospace;
+        }}
+
+        /* Syntax Highlighting CSS */
         {pygments_css}
+        
+        /* User Custom Overrides */
         {styles.get('custom_css', '')}
     """
     
-    # Convert Markdown to HTML
-    html_content = markdown.markdown(markdown_text, extensions=['fenced_code', 'tables', 'codehilite', 'nl2br'])
+    # Convert Markdown to HTML with the 'codehilite' extension
+    html_content = markdown.markdown(
+        markdown_text, 
+        extensions=['fenced_code', 'tables', 'codehilite', 'nl2br']
+    )
     
     return f"""
     <!DOCTYPE html>
@@ -158,14 +207,14 @@ def convert_endpoint():
         # Build HTML for Image Generation (Cleaner, no external fonts)
         image_html = build_full_html(data.get('markdown_text', ''), data.get('styles', {}), for_image=True)
         
-        # Wkhtmltopdf Options - SAFEST MODE
+        # Wkhtmltopdf Options
         options = {
             "quiet": "",
             "encoding": "UTF-8",
             "width": 1024,
             "disable-smart-width": "",
-            "enable-local-file-access": "", # Crucial for some docker envs
-            "disable-javascript": "",       # Prevents JS hangs
+            "enable-local-file-access": "",
+            "disable-javascript": "",
             "load-error-handling": "ignore",
             "load-media-error-handling": "ignore"
         }
@@ -194,11 +243,10 @@ def convert_endpoint():
             b64_img = base64.b64encode(png_bytes).decode('utf-8')
         except Exception as img_error:
             print(f"Image generation failed: {img_error}")
-            # Return HTML at least, but warn about image
             return jsonify({
                 'preview_html': preview_html, 
                 'preview_png_base64': None,
-                'warning': 'Image generation failed on server, but HTML is valid.'
+                'warning': 'Image generation failed on server.'
             })
 
         return jsonify({
@@ -265,8 +313,8 @@ def index():
             <legend>3. Styles</legend>
             <div class="style-grid">
                 <div><label>Font</label><select id="f_family">
-                    <option value="sans-serif">Sans-Serif (Standard)</option>
-                    <option value="'Inter', sans-serif">Inter (Web Only)</option>
+                    <option value="sans-serif">Sans-Serif</option>
+                    <option value="'Inter', sans-serif">Inter</option>
                     <option value="monospace">Monospace</option>
                     <option value="serif">Serif</option>
                 </select></div>
@@ -278,7 +326,7 @@ def index():
                     {% for s in styles %}<option value="{{s}}" {% if s == 'monokai' %}selected{% endif %}>{{s}}</option>{% endfor %}
                 </select></div>
             </div>
-            <textarea id="c_css" rows="2" style="margin-top:15px;" placeholder="Custom CSS (e.g. #output-wrapper h1 { color: red; })"></textarea>
+            <textarea id="c_css" rows="2" style="margin-top:15px;" placeholder="Custom CSS..."></textarea>
         </fieldset>
 
         <button onclick="process('preview')" class="btn-primary" id="gen-btn" style="width:100%; height:50px; font-size:18px;">GENERATE PREVIEW</button>
@@ -297,17 +345,16 @@ def index():
                         PNG Preview 
                         <button class="btn-download" onclick="process('download', 'png')">Download PNG</button>
                     </div>
-                    <div id="png-prev" class="preview-content" style="background:#f0f0f0; display:flex; align-items:center; justify-content:center; text-align:center; color:#666;"></div>
+                    <div id="png-prev" class="preview-content" style="background:#f0f0f0; display:flex; align-items:center; justify-content:center; text-align:center;"></div>
                 </div>
             </div>
         </div>
 
         <script>
-            // --- 1. ANALYSIS FUNCTION ---
             async function analyze() {
                 const btn = document.getElementById('load-btn');
                 const text = document.getElementById('md-input').value;
-                if(!text) return alert("Please enter markdown text first.");
+                if(!text) return alert("Please enter text.");
                 
                 btn.innerText = "Analyzing...";
                 const fd = new FormData(); 
@@ -317,17 +364,13 @@ def index():
                     const res = await fetch('/parse', {method:'POST', body:fd});
                     const data = await res.json();
                     
-                    if(data.error) {
-                        alert("Error parsing: " + data.error);
-                        return;
-                    }
+                    if(data.error) { alert(data.error); return; }
 
                     document.getElementById('detected-format').innerText = "Detected: " + data.format;
                     const list = document.getElementById('comp-list'); 
                     list.innerHTML = '';
                     
                     data.components.forEach(c => {
-                        // Safe encoding of content for HTML attribute
                         const safe = btoa(unescape(encodeURIComponent(c.content)));
                         list.innerHTML += `
                             <div class="comp-card">
@@ -339,18 +382,12 @@ def index():
                             </div>`;
                     });
                     document.getElementById('comp-section').style.display = 'block';
-                } catch(e) {
-                    alert("Network/Server Error: " + e);
-                } finally {
-                    btn.innerText = "Analyze Content";
-                }
+                } catch(e) { alert(e); } 
+                finally { btn.innerText = "Analyze Content"; }
             }
 
-            // --- 2. GENERATE / DOWNLOAD FUNCTION ---
             async function process(action, type = null) {
                 const btn = document.getElementById('gen-btn');
-                
-                // Reconstruct Markdown from checked components
                 let md = "";
                 const checks = document.querySelectorAll('.c-check');
                 let hasSelection = false;
@@ -359,15 +396,13 @@ def index():
                     if(c.checked) {
                         hasSelection = true;
                         const content = decodeURIComponent(escape(atob(c.dataset.content)));
-                        // Add headers for file types, skip for intros
-                        if(!c.dataset.name.includes("Intro") && !c.dataset.name.includes("Structure") && !c.dataset.name.includes("Header")) {
+                        if(!c.dataset.name.includes("Intro") && !c.dataset.name.includes("Structure")) {
                             md += "### File: " + c.dataset.name + "\\n";
                         }
                         md += content + "\\n\\n";
                     }
                 });
                 
-                // Fallback to raw input if no components selected
                 if(!hasSelection) md = document.getElementById('md-input').value;
 
                 const payload = {
@@ -382,8 +417,7 @@ def index():
                         background_color: document.getElementById('b_color').value,
                         highlight_theme: document.getElementById('h_theme').value,
                         custom_css: document.getElementById('c_css').value,
-                        page_padding: 40, 
-                        code_padding: 15
+                        page_padding: 40, code_padding: 15
                     }
                 };
 
@@ -397,47 +431,30 @@ def index():
                     });
                     
                     if(action === 'download') {
-                        if(!res.ok) {
-                            const errData = await res.json();
-                            throw new Error(errData.error || "Download failed");
-                        }
+                        if(!res.ok) throw new Error("Download failed");
                         const blob = await res.blob();
-                        const url = window.URL.createObjectURL(blob);
                         const a = document.createElement('a'); 
-                        a.href = url; 
+                        a.href = URL.createObjectURL(blob); 
                         a.download = `export.${type}`; 
                         a.click();
                     } else {
                         const data = await res.json();
-                        
-                        // CRITICAL: Check for server-side errors before trying to read data
-                        if(data.error) {
-                            throw new Error(data.error);
-                        }
+                        if(data.error) throw new Error(data.error);
 
                         document.getElementById('preview-area').style.display = 'block';
+                        document.getElementById('html-prev').innerHTML = data.preview_html;
                         
-                        // Set HTML
-                        document.getElementById('html-prev').innerHTML = data.preview_html || "No HTML generated.";
-                        
-                        // Set PNG
                         const pngContainer = document.getElementById('png-prev');
                         if (data.preview_png_base64) {
-                            pngContainer.innerHTML = `<img src="data:image/png;base64,${data.preview_png_base64}" alt="Preview">`;
-                        } else if (data.warning) {
-                            pngContainer.innerHTML = `<p style="color:orange">⚠️ ${data.warning}</p>`;
+                            pngContainer.innerHTML = `<img src="data:image/png;base64,${data.preview_png_base64}">`;
                         } else {
-                            pngContainer.innerHTML = "<p>No image generated.</p>";
+                            pngContainer.innerHTML = `<p style="color:red">${data.warning || "Error generating image"}</p>`;
                         }
                         
-                        // Scroll to preview
                         document.getElementById('preview-area').scrollIntoView({behavior: 'smooth'});
                     }
-                } catch(e) {
-                    alert("Error: " + e.message);
-                } finally {
-                    if(action === 'preview') btn.innerText = "GENERATE PREVIEW";
-                }
+                } catch(e) { alert("Error: " + e.message); } 
+                finally { if(action === 'preview') btn.innerText = "GENERATE PREVIEW"; }
             }
         </script>
     </body></html>