Update app.py

app.py

@@ -6,6 +6,12 @@ import traceback
 from io import BytesIO
 import re
 
+# New imports for syntax highlighting
+from pygments import highlight
+from pygments.lexers import get_lexer_by_name
+from pygments.formatters import HtmlFormatter
+from pygments.styles import get_all_styles
+
 app = Flask(__name__)
 
 # Configure a temporary directory for file operations
@@ -21,47 +27,25 @@ def is_repo2markdown_format(text):
 def parse_repo2markdown(text):
     """Parses Repo2Markdown text, extracts files, and prepares them for the UI."""
     components = []
-    # Regex to find sections starting with '### File:'
     pattern = re.compile(r'### File: (.*?)\n([\s\S]*?)(?=\n### File:|\Z)', re.MULTILINE)
     
     first_match = pattern.search(text)
     if first_match:
         intro_text = text[:first_match.start()].strip()
         if intro_text:
-            components.append({
-                'type': 'intro', 
-                'filename': 'Introduction', 
-                'content': intro_text, 
-                'is_code_block': False, 
-                'language': ''
-            })
+            components.append({'type': 'intro', 'filename': 'Introduction', 'content': intro_text, 'is_code_block': False, 'language': ''})
 
     for match in pattern.finditer(text):
         filename = match.group(1).strip()
         raw_content = match.group(2).strip()
-        
-        # Check if the content is a single fenced code block and extract its parts
         code_match = re.search(r'^```(\w*)\s*\n([\s\S]*?)\s*```$', raw_content, re.DOTALL)
         
         if code_match:
             language = code_match.group(1)
             inner_content = code_match.group(2).strip()
-            components.append({
-                'type': 'file', 
-                'filename': filename, 
-                'content': inner_content, 
-                'is_code_block': True, 
-                'language': language
-            })
+            components.append({'type': 'file', 'filename': filename, 'content': inner_content, 'is_code_block': True, 'language': language})
         else:
-            # It's plain text (e.g., binary file notification)
-            components.append({
-                'type': 'file', 
-                'filename': filename, 
-                'content': raw_content, 
-                'is_code_block': False, 
-                'language': ''
-            })
+            components.append({'type': 'file', 'filename': filename, 'content': raw_content, 'is_code_block': False, 'language': ''})
             
     return components
 
@@ -81,12 +65,10 @@ def parse_endpoint():
 
     if is_repo2markdown_format(text):
         try:
-            components = parse_repo2markdown(text)
-            return jsonify(components)
+            return jsonify(parse_repo2markdown(text))
         except Exception as e:
             return jsonify({'error': f'Failed to parse Repo2Markdown: {str(e)}'}), 500
     else:
-        # If not the special format, return it as a single "text" component
         return jsonify([{'type': 'text', 'filename': 'Full Text', 'content': text}])
 
 @app.route('/convert', methods=['POST'])
@@ -98,27 +80,69 @@ def convert_endpoint():
     include_fontawesome = data.get('include_fontawesome', False)
     download_type = data.get('download_type', 'png')
     is_download_request = data.get('download', False)
-
-    if not markdown_text:
-        return jsonify({'error': 'No markdown content to convert.'}), 400
-
+    
     try:
-        html_content = markdown.markdown(markdown_text, extensions=['fenced_code', 'tables'])
+        # --- CSS & Font Generation (Scoped) ---
+        wrapper_id = "#output-wrapper"
+        font_family = styles.get('font_family', "'Arial', sans-serif")
+        google_font_name = font_family.split(',')[0].strip("'\"")
+        google_font_link = ""
+        if " " in google_font_name and google_font_name not in ["Times New Roman", "Courier New"]: # Simple check for Google Font
+            google_font_link = f'<link href="https://fonts.googleapis.com/css2?family={google_font_name.replace(" ", "+")}:wght@400;700&display=swap" rel="stylesheet">'
+
+        highlight_theme = styles.get('highlight_theme', 'default')
+        pygments_css = ""
+        if highlight_theme != 'none':
+            formatter = HtmlFormatter(style=highlight_theme, cssclass="codehilite")
+            # Get the CSS definitions for the chosen theme.
+            pygments_css = formatter.get_style_defs()
+
+        # All styles are now prefixed with the wrapper_id for isolation.
+        scoped_css = f"""
+            {wrapper_id} {{
+                font-family: {font_family};
+                font-size: {styles.get('font_size', '16')}px;
+                color: {styles.get('text_color', '#333')};
+                background-color: {styles.get('background_color', '#fff')};
+            }}
+            {wrapper_id} h3 {{ border-bottom: 1px solid #ccc; padding-bottom: 5px; margin-top: 2em; }}
+            {wrapper_id} table {{ border-collapse: collapse; width: 100%; }}
+            {wrapper_id} th, {wrapper_id} td {{ border: 1px solid #ddd; padding: 8px; text-align: left; }}
+            {wrapper_id} th {{ background-color: #f2f2f2; }}
+            {wrapper_id} img {{ max-width: 100%; height: auto; }}
+            {wrapper_id} pre {{ padding: {styles.get('code_padding', '15')}px; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; }}
+            {wrapper_id} code {{ font-family: 'Courier New', monospace; padding: 0.2em 0.4em; margin: 0; font-size: 85%; }}
+            {wrapper_id} pre code {{ padding: 0; margin: 0; font-size: inherit; background: transparent; border-radius: 0; }}
+            {pygments_css}
+            {styles.get('custom_css', '')}
+        """
+
+        # --- HTML Conversion ---
+        # The 'codehilite' extension enables the CSS classes that Pygments uses.
+        md_extensions = ['fenced_code', 'tables', 'codehilite']
+        html_content = markdown.markdown(markdown_text, extensions=md_extensions, extension_configs={'codehilite': {'css_class': 'codehilite'}})
         
+        # Wrap final HTML content in the isolated div
+        final_html_body = f'<div id="output-wrapper">{html_content}</div>'
+
         fontawesome_link = '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">' if include_fontawesome else ""
-        style_block = f"""<style>
-            body {{ font-family: {styles.get('font_family', 'Arial, sans-serif')}; font-size: {styles.get('font_size', '16')}px; color: {styles.get('text_color', '#333')}; background-color: {styles.get('background_color', '#fff')}; padding: 25px; display: inline-block; }}
-            h3 {{ border-bottom: 1px solid #ccc; padding-bottom: 5px; margin-top: 2em; }}
-            table {{ border-collapse: collapse; width: 100%; }}
-            th, td {{ border: 1px solid #ddd; padding: 8px; text-align: left; }}
-            th {{ background-color: #f2f2f2; }}
-            img {{ max-width: 100%; height: auto; }}
-            pre {{ background: {styles.get('code_bg_color', '#f4f4f4')}; padding: {styles.get('code_padding', '15')}px; border-radius: 5px; white-space: pre-wrap; word-wrap: break-word; }}
-            code {{ background: {styles.get('code_bg_color', '#f4f4f4')}; padding: 0.2em 0.4em; margin: 0; font-size: 85%; border-radius: 3px; }}
-            pre > code {{ padding: 0; margin: 0; font-size: inherit; background: transparent; border-radius: 0; }}
-            {styles.get('custom_css', '')}
-        </style>"""
-        full_html = f'<!DOCTYPE html><html><head><meta charset="UTF-8">{fontawesome_link}{style_block}</head><body>{html_content}</body></html>'
+        
+        full_html = f"""<!DOCTYPE html>
+        <html>
+        <head>
+            <meta charset="UTF-8">
+            {google_font_link}
+            {fontawesome_link}
+            <style>
+                /* For PNG generation, give the body the background color */
+                body {{ background-color: {styles.get('background_color', '#fff')}; padding: 25px; display: inline-block;}}
+                {scoped_css}
+            </style>
+        </head>
+        <body>
+            {final_html_body}
+        </body>
+        </html>"""
 
         if is_download_request:
             if download_type == 'html':
@@ -128,18 +152,19 @@ def convert_endpoint():
                 imgkit.from_string(full_html, png_path, options={"quiet": "", 'encoding': "UTF-8"})
                 return send_file(png_path, as_attachment=True, download_name="output.png", mimetype="image/png")
         else:
-            # Return HTML for preview
             return jsonify({'preview_html': full_html})
 
     except Exception as e:
         traceback.print_exc()
         return jsonify({'error': f'Failed to convert content: {str(e)}'}), 500
 
+
 # --- MAIN PAGE (Front-end) ---
 
 @app.route('/')
 def index():
     """Serves the main HTML page with all the client-side JavaScript."""
+    highlight_styles = sorted(list(get_all_styles()))
     return render_template_string("""
     <!DOCTYPE html>
     <html lang="en">
@@ -154,19 +179,20 @@ def index():
             textarea { width: 100%; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; padding: 10px; font-family: monospace; }
             fieldset { border: 1px solid #ddd; padding: 15px; border-radius: 5px; margin-top: 20px; }
             legend { font-weight: bold; color: #555; padding: 0 10px; }
+            select, input[type="number"], input[type="color"] { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;}
             button { padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background-color 0.2s; }
             .action-btn { background-color: #007BFF; color: white; font-size: 16px; padding: 12px 20px;}
             .action-btn:hover { background-color: #0056b3; }
             .generate-btn { background-color: #5a32a3; color: white; font-size: 16px; padding: 12px 20px; }
             .generate-btn:hover { background-color: #4a298a; }
-            .download-btn { background-color: #28a745; color: white; display: none; } /* Hidden by default */
+            .download-btn { background-color: #28a745; color: white; display: none; }
             .download-btn:hover { background-color: #218838; }
             .controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: 20px; }
             .main-actions { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
-            .preview-container { border: 1px solid #ddd; padding: 20px; margin-top: 20px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); min-height: 100px; }
+            .preview-container { border: 1px solid #ddd; padding: 10px; margin-top: 20px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); min-height: 100px; }
             .error { color: #D8000C; background-color: #FFD2D2; padding: 10px; border-radius: 5px; margin-top: 15px; display: none; }
             .info { color: #00529B; background-color: #BDE5F8; padding: 10px; border-radius: 5px; margin: 10px 0; }
-            /* Component Selection Styles */
+            .style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; align-items: end; }
             .component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 15px; }
             .component-container { border: 1px solid #e0e0e0; border-radius: 5px; background: #fafafa; }
             .component-header { background: #f1f1f1; padding: 8px 12px; border-bottom: 1px solid #e0e0e0; display: flex; align-items: center; gap: 10px; }
@@ -179,7 +205,7 @@ def index():
     </head>
     <body>
         <h1>Advanced Markdown Converter & Composer</h1>
-        <form id="main-form">
+        <form id="main-form" onsubmit="return false;">
             <fieldset>
                 <legend>1. Load Content</legend>
                 <div class="info">Paste content or upload a file, then click "Load & Analyze".</div>
@@ -205,15 +231,60 @@ def index():
             <fieldset>
                 <legend>3. Configure Styles</legend>
                 <div class="style-grid">
-                    <div><label>Font Family:</label><select id="font_family"><option value="'Arial', sans-serif">Arial</option><option value="'Georgia', serif">Georgia</option><option value="'Times New Roman', serif">Times New Roman</option></select></div>
+                    <div>
+                        <label>Font Family:</label>
+                        <select id="font_family">
+                            <optgroup label="Sans-Serif">
+                                <option value="'Arial', sans-serif">Arial</option>
+                                <option value="'Helvetica', sans-serif">Helvetica</option>
+                                <option value="'Verdana', sans-serif">Verdana</option>
+                                <option value="'Roboto', sans-serif">Roboto</option>
+                                <option value="'Open Sans', sans-serif">Open Sans</option>
+                                <option value="'Lato', sans-serif">Lato</option>
+                                <option value="'Montserrat', sans-serif">Montserrat</option>
+                            </optgroup>
+                            <optgroup label="Serif">
+                                <option value="'Times New Roman', serif">Times New Roman</option>
+                                <option value="'Georgia', serif">Georgia</option>
+                                <option value="'Garamond', serif">Garamond</option>
+                                <option value="'Playfair Display', serif">Playfair Display</option>
+                                <option value="'Merriweather', serif">Merriweather</option>
+                            </optgroup>
+                            <optgroup label="Monospace">
+                                <option value="'Courier New', monospace">Courier New</option>
+                                <option value="'Lucida Console', monospace">Lucida Console</option>
+                                <option value="'Roboto Mono', monospace">Roboto Mono</option>
+                                <option value="'Source Code Pro', monospace">Source Code Pro</option>
+                                <option value="'Inconsolata', monospace">Inconsolata</option>
+                            </optgroup>
+                             <optgroup label="Display">
+                                <option value="'Oswald', sans-serif">Oswald</option>
+                                <option value="'Raleway', sans-serif">Raleway</option>
+                                <option value="'Lobster', cursive">Lobster</option>
+                            </optgroup>
+                            <optgroup label="Handwriting">
+                                <option value="'Dancing Script', cursive">Dancing Script</option>
+                                <option value="'Pacifico', cursive">Pacifico</option>
+                                <option value="'Caveat', cursive">Caveat</option>
+                            </optgroup>
+                        </select>
+                    </div>
                     <div><label>Font Size (px):</label><input type="number" id="font_size" value="16"></div>
+                    <div>
+                        <label>Highlight Theme:</label>
+                        <select id="highlight_theme">
+                            <option value="none">None</option>
+                            {% for style in highlight_styles %}
+                                <option value="{{ style }}" {% if style == 'default' %}selected{% endif %}>{{ style }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
                     <div><label>Text Color:</label><input type="color" id="text_color" value="#333333"></div>
                     <div><label>Background Color:</label><input type="color" id="background_color" value="#ffffff"></div>
-                    <div><label>Code BG Color:</label><input type="color" id="code_bg_color" value="#f4f4f4"></div>
                     <div><label>Code Padding (px):</label><input type="number" id="code_padding" value="15"></div>
                 </div>
                 <div><input type="checkbox" id="include_fontawesome"><label for="include_fontawesome">Include Font Awesome</label></div>
-                <div><label for="custom_css">Custom CSS:</label><textarea id="custom_css" rows="3"></textarea></div>
+                <div><label for="custom_css">Custom CSS:</label><textarea id="custom_css" rows="3" placeholder="Styles will be scoped to the output. e.g. h1 { text-decoration: underline; }"></textarea></div>
             </fieldset>
 
             <div class="controls">
@@ -231,7 +302,6 @@ def index():
         <div id="preview-container" class="preview-container"></div>
 
         <script>
-            // --- DOM Elements ---
             const loadBtn = document.getElementById('load-btn');
             const generateBtn = document.getElementById('generate-btn');
             const downloadBtn = document.getElementById('download-btn');
@@ -242,7 +312,6 @@ def index():
             const previewContainer = document.getElementById('preview-container');
             const errorBox = document.getElementById('error-box');
 
-            // --- Client-Side Functions ---
             function toggleAllComponents(checked) {
                 componentsContainer.querySelectorAll('.component-checkbox').forEach(cb => cb.checked = checked);
             }
@@ -253,10 +322,12 @@ def index():
                 previewContainer.innerHTML = '';
             }
 
-            // --- Event Listeners ---
             loadBtn.addEventListener('click', async () => {
                 loadBtn.textContent = 'Loading...';
                 errorBox.style.display = 'none';
+                componentsFieldset.style.display = 'none';
+                componentsContainer.innerHTML = '';
+
 
                 const formData = new FormData();
                 if (markdownFileInput.files.length > 0) {
@@ -269,14 +340,9 @@ def index():
                     const response = await fetch('/parse', { method: 'POST', body: formData });
                     const components = await response.json();
 
-                    if (components.error) {
-                        throw new Error(components.error);
-                    }
+                    if (components.error) throw new Error(components.error);
                     
-                    // Clear previous components
-                    componentsContainer.innerHTML = '';
-
-                    if (components.length > 1 || components[0]?.type !== 'text') {
+                    if (components.length > 1 || (components.length > 0 && components[0]?.type !== 'text')) {
                         componentsFieldset.style.display = 'block';
                         components.forEach((comp, index) => {
                             const div = document.createElement('div');
@@ -285,7 +351,7 @@ def index():
                             div.dataset.type = comp.type;
                             div.dataset.isCodeBlock = comp.is_code_block;
                             div.dataset.language = comp.language;
-                            // Store content in a hidden div to avoid issues with textarea rendering
+                            
                             const contentHolder = document.createElement('div');
                             contentHolder.style.display = 'none';
                             contentHolder.textContent = comp.content;
@@ -296,21 +362,13 @@ def index():
                                     <input type="checkbox" id="comp-check-${index}" class="component-checkbox" checked>
                                     <label for="comp-check-${index}">${comp.filename}</label>
                                 </div>
-                                <div class="component-content">
-                                    <textarea readonly>${comp.content}</textarea>
-                                </div>`;
+                                <div class="component-content"><textarea readonly>${comp.content}</textarea></div>`;
                             componentsContainer.appendChild(div);
                         });
-                    } else {
-                        // Not Repo2Markdown format, hide the component selector
-                        componentsFieldset.style.display = 'none';
                     }
-                    // Populate the text area if a file was uploaded
                     if(markdownFileInput.files.length > 0) {
                          markdownTextInput.value = await markdownFileInput.files[0].text();
                     }
-
-
                 } catch (err) {
                     displayError('Error parsing content: ' + err.message);
                 } finally {
@@ -321,16 +379,16 @@ def index():
             async function handleGeneration(isDownload = false) {
                 const buttonToUpdate = isDownload ? downloadBtn : generateBtn;
                 buttonToUpdate.textContent = 'Generating...';
+                buttonToUpdate.disabled = true;
                 errorBox.style.display = 'none';
                 
                 let finalMarkdown = "";
-                // If components are visible, compose from them. Otherwise, use the text area.
                 if (componentsFieldset.style.display === 'block') {
                     const parts = [];
                     const componentDivs = componentsContainer.querySelectorAll('.component-container');
                     componentDivs.forEach(div => {
                         if (div.querySelector('.component-checkbox').checked) {
-                            const content = div.querySelector('div').textContent; // Get content from hidden holder
+                            const content = div.querySelector('div').textContent;
                             let partContent = content;
                             if (div.dataset.isCodeBlock === 'true') {
                                 partContent = "```" + div.dataset.language + "\\n" + content + "\\n```";
@@ -355,8 +413,8 @@ def index():
                         font_size: document.getElementById('font_size').value,
                         text_color: document.getElementById('text_color').value,
                         background_color: document.getElementById('background_color').value,
-                        code_bg_color: document.getElementById('code_bg_color').value,
                         code_padding: document.getElementById('code_padding').value,
+                        highlight_theme: document.getElementById('highlight_theme').value,
                         custom_css: document.getElementById('custom_css').value
                     },
                     include_fontawesome: document.getElementById('include_fontawesome').checked,
@@ -387,24 +445,23 @@ def index():
                         const result = await response.json();
                         if (result.error) throw new Error(result.error);
                         previewContainer.innerHTML = result.preview_html;
-                        downloadBtn.style.display = 'inline-block'; // Show download button after a successful preview
+                        downloadBtn.style.display = 'inline-block';
                     }
-
                 } catch (err) {
                     displayError('Error generating output: ' + err.message);
                 } finally {
                     generateBtn.textContent = 'Generate Preview';
                     downloadBtn.textContent = 'Download';
+                    buttonToUpdate.disabled = false;
                 }
             }
 
             generateBtn.addEventListener('click', () => handleGeneration(false));
             downloadBtn.addEventListener('click', () => handleGeneration(true));
-
         </script>
     </body>
     </html>
-    """)
+    """, highlight_styles=highlight_styles)
 
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=int(os.environ.get("PORT", 7860)))