Spaces:

broadfield-dev
/

markdown2png

Paused

App Files Files Community

broadfield-dev commited on Dec 22, 2025

Commit

1fb5157

verified ·

1 Parent(s): 9a1bdee

Update app.py

Browse files

Files changed (1) hide show

app.py +99 -30

app.py CHANGED Viewed

@@ -108,45 +108,60 @@ def parse_endpoint():
 def build_full_html(markdown_text, styles, include_fontawesome):
     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"]:
-        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")
         pygments_css = formatter.get_style_defs(f' {wrapper_id}')
     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} 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} h1, {wrapper_id} h2, {wrapper_id} h3 {{ border-bottom: 1px solid #eee; padding-bottom: 5px; margin-top: 1.5em; }}
-        {wrapper_id} :not(pre) > code {{ font-family: 'Courier New', monospace; background-color: #eef; padding: .2em .4em; border-radius: 3px; }}
-        {pygments_css} {styles.get('custom_css', '')}
     """
-    md_extensions = ['fenced_code', 'tables', 'codehilite']
-    html_content = markdown.markdown(markdown_text, extensions=md_extensions, extension_configs={'codehilite': {'css_class': 'codehilite'}})
-    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 ""
-    full_html = f"""<!DOCTYPE html>
-    <html><head><meta charset="UTF-8">{google_font_link}{fontawesome_link}<style>
-    #ouput-wrapper {{ background-color: {styles.get('background_color', '#fff')}; padding: 25px; display: inline-block;}}
-    {scoped_css}
-    </style></head><body>{final_html_body}</body></html>"""
-    return full_html
 @app.route('/convert', methods=['POST'])
 def convert_endpoint():
@@ -157,7 +172,7 @@ def convert_endpoint():
             styles=data.get('styles', {}),
             include_fontawesome=data.get('include_fontawesome', False)
         )
-        options = {"quiet": "", 'encoding': "UTF-8"}
         if data.get('download', False):
             download_type = data.get('download_type', 'png')
@@ -214,8 +229,62 @@ def index():
         <form id="main-form" onsubmit="return false;">
             <fieldset><legend>1. Load Content</legend><div id="info-box" class="info"></div><textarea id="markdown-text-input" name="markdown_text" rows="8"></textarea><div style="margin-top: 10px; display: flex; align-items: center; gap: 10px;"><label for="markdown-file-input">Or upload a file:</label><input type="file" id="markdown-file-input" name="markdown_file" accept=".md,.txt,text/markdown"></div><div style="margin-top: 15px;"><button type="button" id="load-btn" class="action-btn">Load & Analyze</button></div></fieldset>
             <fieldset id="components-fieldset" style="display:none;"><legend>2. Select Components</legend><div class="selection-controls"><button type="button" onclick="toggleAllComponents(true)">Select All</button><button type="button" onclick="toggleAllComponents(false)">Deselect All</button></div><div id="components-container" class="component-grid"></div></fieldset>
-            <fieldset><legend>3. Configure Styles</legend><div class="style-grid"><div><label>Font Family:</label><select id="font_family"><optgroup label="Sans-Serif"><option value="'Arial', sans-serif">Arial</option><option value="'Roboto', sans-serif">Roboto</option></optgroup><optgroup label="Serif"><option value="'Times New Roman', serif">Times New Roman</option><option value="'Georgia', serif">Georgia</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 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></fieldset>
-            <div class="main-actions"><button type="button" id="generate-btn" class="generate-btn">Generate Preview</button></div>
         </form>
         <div id="error-box" class="error"></div>
         <div id="preview-section" style="display:none;">

 def build_full_html(markdown_text, styles, include_fontawesome):
     wrapper_id = "#output-wrapper"
     font_family = styles.get('font_family', "'Arial', sans-serif")
+    # Extract clean font name for Google Fonts API
+    google_font_name = font_family.split(',')[0].strip("'\"")
+    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")
         pygments_css = formatter.get_style_defs(f' {wrapper_id}')
     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;
+            line-height: {styles.get('line_height', '1.6')};
+            color: {styles.get('text_color', '#333')};
+            background-color: {styles.get('background_color', '#fff')};
+            padding: {styles.get('page_padding', '40')}px;
+            max-width: 100%;
+        }}
+        {wrapper_id} h1, {wrapper_id} h2, {wrapper_id} h3 {{
+            margin-top: 1.2em;
+            margin-bottom: 0.6em;
+            font-weight: 700;
+        }}
+        {wrapper_id} pre {{
+            padding: {styles.get('code_padding', '15')}px;
+            border-radius: 8px;
+            overflow-x: auto;
         }}
+        {pygments_css}
+        /* User Custom CSS Injection */
+        {styles.get('custom_css', '')}
     """
+    md_extensions = ['fenced_code', 'tables', 'codehilite', 'nl2br']
+    html_body = markdown.markdown(markdown_text, extensions=md_extensions)
+    fontawesome = '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">' if include_fontawesome else ""
+    return f"""<!DOCTYPE html>
+    <html>
+    <head>
+        <meta charset="UTF-8">
+        {google_font_link}
+        {fontawesome}
+        <style>{scoped_css}</style>
+    </head>
+    <body>
+        <div id="output-wrapper">{html_body}</div>
+    </body>
+    </html>"""
 @app.route('/convert', methods=['POST'])
 def convert_endpoint():
             styles=data.get('styles', {}),
             include_fontawesome=data.get('include_fontawesome', False)
         )
+        options = {"quiet": "", 'encoding': "UTF-8", "width": 1200, "disable-smart-width":""}
         if data.get('download', False):
             download_type = data.get('download_type', 'png')
         <form id="main-form" onsubmit="return false;">
             <fieldset><legend>1. Load Content</legend><div id="info-box" class="info"></div><textarea id="markdown-text-input" name="markdown_text" rows="8"></textarea><div style="margin-top: 10px; display: flex; align-items: center; gap: 10px;"><label for="markdown-file-input">Or upload a file:</label><input type="file" id="markdown-file-input" name="markdown_file" accept=".md,.txt,text/markdown"></div><div style="margin-top: 15px;"><button type="button" id="load-btn" class="action-btn">Load & Analyze</button></div></fieldset>
             <fieldset id="components-fieldset" style="display:none;"><legend>2. Select Components</legend><div class="selection-controls"><button type="button" onclick="toggleAllComponents(true)">Select All</button><button type="button" onclick="toggleAllComponents(false)">Deselect All</button></div><div id="components-container" class="component-grid"></div></fieldset>
+<fieldset>
+    <legend>3. Visual & Layout Controls</legend>
+    <div class="style-grid">
+        <div>
+            <label>Font Family</label>
+            <select id="font_family">
+                <option value="'Inter', sans-serif">Inter (Modern)</option>
+                <option value="'Playfair Display', serif">Playfair (Elegant)</option>
+                <option value="'Fira Code', monospace">Fira Code (Dev)</option>
+                <option value="'Roboto', sans-serif">Roboto (Clean)</option>
+                <option value="'Lora', serif">Lora (Classic)</option>
+            </select>
+        </div>
+        <div>
+            <label>Font Size (px)</label>
+            <input type="number" id="font_size" value="16">
+        </div>
+        <div>
+            <label>Line Height</label>
+            <input type="number" id="line_height" value="1.6" step="0.1">
+        </div>
+        <div>
+            <label>Text Color</label>
+            <input type="color" id="text_color" value="#333333">
+        </div>
+        <div>
+            <label>Background</label>
+            <input type="color" id="background_color" value="#ffffff">
+        </div>
+        <div>
+            <label>Highlight Theme</label>
+            <select id="highlight_theme">
+                <option value="monokai">Monokai</option>
+                <option value="github-light">GitHub Light</option>
+                <option value="dracula">Dracula</option>
+            </select>
+        </div>
+        <div>
+            <label>Page Padding (px)</label>
+            <input type="number" id="page_padding" value="40">
+        </div>
+        <div>
+            <label>Code Padding (px)</label>
+            <input type="number" id="code_padding" value="15">
+        </div>
+    </div>
+    <div style="margin-top:15px;">
+        <label><b>Custom CSS Overrides:</b></label>
+        <textarea id="custom_css" rows="4" placeholder="#output-wrapper h1 { color: red; }"></textarea>
+    </div>
+</fieldset>
+<div class="main-actions"><button type="button" id="generate-btn" class="generate-btn">Generate Preview</button></div>
         </form>
         <div id="error-box" class="error"></div>
         <div id="preview-section" style="display:none;">