Update app.py

app.py

@@ -25,6 +25,7 @@ DEFAULT_STYLES = {
     "text_color": "#333333",
     "background_color": "#ffffff",
     "code_bg_color": "#f4f4f4",
+    "code_padding": "15", # Default padding for code blocks
     "custom_css": ""
 }
 
@@ -49,6 +50,7 @@ def index():
             "text_color": request.form.get("text_color", DEFAULT_STYLES["text_color"]),
             "background_color": request.form.get("background_color", DEFAULT_STYLES["background_color"]),
             "code_bg_color": request.form.get("code_bg_color", DEFAULT_STYLES["code_bg_color"]),
+            "code_padding": request.form.get("code_padding", DEFAULT_STYLES["code_padding"]),
             "custom_css": request.form.get("custom_css", DEFAULT_STYLES["custom_css"])
         }
         include_fontawesome = "include_fontawesome" in request.form
@@ -82,11 +84,6 @@ def index():
                     padding: 25px;
                     display: inline-block; /* Helps imgkit to crop correctly */
                 }}
-                pre, code {{
-                    background: {styles['code_bg_color']};
-                    padding: 10px;
-                    border-radius: 5px;
-                }}
                 table {{
                     border-collapse: collapse;
                     width: 100%;
@@ -103,6 +100,36 @@ def index():
                     max-width: 100%;
                     height: auto;
                 }}
+
+                /* --- Enhanced Code Block Styling --- */
+
+                /* Style for the code block container */
+                pre {{
+                    background: {styles['code_bg_color']};
+                    padding: {styles['code_padding']}px;
+                    border-radius: 5px;
+                    white-space: pre-wrap;   /* Wrap long lines of code */
+                    word-wrap: break-word;   /* Break long words if necessary */
+                }}
+
+                /* Style for inline `code` snippets */
+                code {{
+                    background: {styles['code_bg_color']};
+                    padding: 0.2em 0.4em;
+                    margin: 0;
+                    font-size: 85%;
+                    border-radius: 3px;
+                }}
+
+                /* Reset styling for <code> inside <pre> to avoid double-styling */
+                pre > code {{
+                    padding: 0;
+                    margin: 0;
+                    font-size: inherit;
+                    background: transparent;
+                    border-radius: 0;
+                }}
+                
                 /* User-defined custom CSS */
                 {styles['custom_css']}
             </style>
@@ -167,15 +194,15 @@ def index():
             h1 { text-align: center; color: #333; }
             form { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
             textarea { width: 100%; height: 300px; margin-bottom: 10px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; padding: 10px; }
-            .controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
-            .main-actions, .style-options { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; }
+            .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; }
             fieldset { border: 1px solid #ddd; padding: 15px; border-radius: 5px; margin-top: 20px; }
-            legend { font-weight: bold; color: #555; }
+            legend { font-weight: bold; color: #555; padding: 0 10px; }
             .style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
             .style-grid > div { display: flex; flex-direction: column; }
-            label { margin-bottom: 5px; color: #666; }
+            label { margin-bottom: 5px; color: #666; font-size: 14px; }
             select, input[type="number"], input[type="color"], input[type="text"] { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
-            button { padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
+            button { padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.2s; }
             .generate-btn { background-color: #007BFF; color: white; }
             .generate-btn:hover { background-color: #0056b3; }
             .download-btn { background-color: #28a745; color: white; }
@@ -188,7 +215,7 @@ def index():
     <body>
         <h1>Advanced Markdown to PNG/HTML Converter</h1>
         <form method="post">
-            <textarea name="markdown_text" placeholder="Paste your Markdown here...">{{ styles.get('markdown_text', '') }}</textarea>
+            <textarea name="markdown_text" placeholder="Paste your Markdown here...">{{ markdown_text }}</textarea>
             <div class="info">
                 <b>Tip:</b> To include images, use full public URLs (e.g., `https://.../image.png`).
                 To use icons, check "Include Font Awesome" below and use tags like `<i class="fa-solid fa-star"></i>`.
@@ -223,6 +250,10 @@ def index():
                         <label for="code_bg_color">Code BG Color:</label>
                         <input type="color" id="code_bg_color" name="code_bg_color" value="{{ styles.code_bg_color }}">
                     </div>
+                    <div>
+                        <label for="code_padding">Code Padding (px):</label>
+                        <input type="number" id="code_padding" name="code_padding" value="{{ styles.code_padding }}">
+                    </div>
                 </div>
                  <div>
                     <input type="checkbox" id="include_fontawesome" name="include_fontawesome" {% if include_fontawesome %}checked{% endif %}>