fix check box ☑

Author: SajjadTalks

blog/Hello-World.md

@@ -10,4 +10,5 @@ summary: "Made with love"
 To-Do:
 
 - [x] Fix Search
-- [ ] Better UI
+- [x] Fix check box
+- [ ] Better UI

generate.py

@@ -19,14 +19,29 @@
 # PYGMENTS_STYLE = 'friendly' # Or 'monokai', 'friendly', etc.
 
 # --- Setup ---
-md_extensions = ['fenced_code', 'codehilite', 'tables', 'meta', 'extra', 'smarty', 'md_in_html']
-md = markdown.Markdown(extensions=md_extensions, extension_configs={
-    'codehilite': {
-        'css_class': 'highlight',
-        'guess_lang': True,
-        'linenums': True
+md_extensions = [
+    'fenced_code',
+    'codehilite',
+    'tables',
+    'meta',
+    'extra',
+    'smarty',
+    'md_in_html',
+    'pymdownx.tasklist',
+]
+md = markdown.Markdown(
+    extensions=md_extensions,
+    extension_configs={
+        'codehilite': {
+            'css_class': 'highlight',
+            'guess_lang': False,
+            'linenums': False
+        },
+        'pymdownx.tasklist': {
+            'custom_checkbox': False,
         }
-})
+    }
+)
 env = jinja2.Environment(
     loader=jinja2.FileSystemLoader(TEMPLATES_DIR),
     autoescape=jinja2.select_autoescape(['html', 'xml'])

static/style.css

@@ -364,4 +364,31 @@ div.highlight:hover .code-copy-button {
         font-size: 0.6rem;
         padding: 0.1rem 0.3rem;
     }
+}
+
+ul.task-list {
+    list-style-type: none;
+    padding-left: 0.5em;
+}
+
+
+li.task-list-item {
+    margin-bottom: 0.3em;
+    display: flex;
+    align-items: flex-start;
+}
+
+
+li.task-list-item > input[type="checkbox"] {
+    margin-right: 0.6em;
+    margin-left: 0.1em;
+    margin-top: 0.2em; 
+    cursor: default;
+    vertical-align: middle;
+}
+
+
+li.task-list-item.task-list-item-checked {
+     text-decoration: line-through; 
+     color: var(--muted-text-color);
 }