✨ feat(wip): Add code syntax highlighting

app/markdown.css

@@ -1,22 +1,9 @@
 .markdown {
-  all: unset;
-  display: block;
-  box-sizing: border-box;
-
   color: #333;
-  line-height: 1.6;
+  line-height: 1.2;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }
 
-.markdown ul,
-.markdown ol {
-  list-style: none;
-}
-.markdown li {
-  display: list-item; /* Возвращаем поведение списка */
-}
-
-
 .markdown > *:first-child {
   margin-top: 0;
 }
@@ -24,6 +11,7 @@
 .markdown > *:last-child {
   margin-bottom: 0;
 }
+
 .markdown h1,
 .markdown h2,
 .markdown h3,
@@ -92,48 +80,82 @@
   color: #5a32a3;
 }
 
+/* Lists - ФИКС ДЛЯ ЧЕКБОКСОВ */
 .markdown ul,
 .markdown ol {
   padding-left: 2em;
-  margin-bottom: 1em;
+  margin-top: 0.5em;
+  margin-bottom: 0.75em;
 }
 
 .markdown li {
   margin-bottom: 0.5em;
+  list-style: inherit;
+  display: list-item;
 }
 
-.markdown li > ul,
-.markdown li > ol {
-  margin-top: 0.5em;
+/* Особые стили для списков задач */
+.markdown ul:has(input[type="checkbox"]) {
+  list-style: none;
+  padding-left: 0;
 }
 
-.markdown ul {
+.markdown ul:has(input[type="checkbox"]) li {
+  list-style: none;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 0.75em;
+  padding-left: 0;
+  position: relative;
+}
+
+/* Чекбоксы */
+.markdown input[type="checkbox"] {
+  margin: 0;
+  margin-top: 0.25em;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  accent-color: #0366d6;
+}
+
+/* Если браузер не поддерживает :has() */
+.markdown .contains-task-list {
+  list-style: none;
+  padding-left: 0;
+}
+
+.markdown .task-list-item {
+  list-style: none;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 0.75em;
+  padding-left: 0;
+}
+
+/* Обычные списки (без чекбоксов) */
+.markdown ul:not(:has(input[type="checkbox"])) {
   list-style-type: disc;
 }
 
-.markdown ul ul {
+.markdown ul ul:not(:has(input[type="checkbox"])) {
   list-style-type: circle;
 }
 
-.markdown ul ul ul {
-  list-style-type: square;
-}
-
-.markdown ol {
+.markdown ol:not(:has(input[type="checkbox"])) {
   list-style-type: decimal;
 }
 
-.markdown li > p {
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
+/* Код - ИЗМЕНЕНИЯ ЗДЕСЬ: JetBrains Mono и уменьшенный размер */
 .markdown code {
   background-color: #f6f8fa;
   padding: 0.2em 0.4em;
   border-radius: 3px;
-  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
-  font-size: 0.9em;
+  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
+  font-size: 0.85em;
   color: #e74c3c;
 }
 
@@ -150,8 +172,9 @@
   background-color: transparent;
   padding: 0;
   color: inherit;
-  font-size: 0.9em;
-  line-height: 1.5;
+  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
+  font-size: 0.85em;
+  line-height: 1.2;
 }
 
 .markdown blockquote {
@@ -205,11 +228,6 @@
   margin-top: 0.5em;
 }
 
-.markdown input[type="checkbox"] {
-  margin-right: 0.5em;
-  margin-left: -1.5em;
-}
-
 @media (prefers-color-scheme: dark) {
   .markdown {
     color: #e0e0e0;

app/post/[slug]/page.tsx

@@ -1,7 +1,7 @@
 import { getPostData, getAllPostSlugs } from '@/lib/posts';
 import { notFound } from 'next/navigation';
 import Link from 'next/link';
-import "@/app/markdown.css"
+import "@/app/markdown.css";
 
 interface PostPageProps {
   params: Promise<{ slug: string }>;