fix: optimize markdown style

src/components/ModelDescription.vue

@@ -16,7 +16,7 @@
     ></textarea>
 
     <div v-show="!active">
-      <div v-show="editable" class="flex items-center gap-2 text-gray-600">
+      <div v-show="editable" class="mb-4 flex items-center gap-2 text-gray-600">
         <i class="pi pi-info-circle"></i>
         <span>
           {{ $t('tapToChange') }}

src/style.css

@@ -82,26 +82,69 @@
 
 .markdown-it {
   font-family: theme('fontFamily.sans');
+  font-size: theme('fontSize.base');
   line-height: theme('lineHeight.relaxed');
   word-break: break-word;
   margin: 0;
 
+  &::before {
+    display: table;
+    content: '';
+  }
+
+  &::after {
+    display: table;
+    content: '';
+    clear: both;
+  }
+
+  > *:first-child {
+    margin-top: 0 !important;
+  }
+
+  > *:last-child {
+    margin-bottom: 0 !important;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 1.5em;
+    margin-bottom: 1em;
+    font-weight: 600;
+    line-height: 1.25;
+  }
+
   h1 {
-    font-size: theme('fontSize.2xl');
+    font-size: 2em;
-    font-weight: theme('fontWeight.bold');
+    padding-bottom: 0.3em;
-    border-bottom: 1px solid #ddd;
+    border-bottom: 1px solid var(--p-surface-700);
-    margin-top: theme('margin.4');
-    margin-bottom: theme('margin.4');
-    padding-bottom: theme('padding[2.5]');
   }
 
   h2 {
-    font-size: theme('fontSize.xl');
+    font-size: 1.5em;
-    font-weight: theme('fontWeight.bold');
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid var(--p-surface-700);
   }
 
   h3 {
-    font-size: theme('fontSize.lg');
+    font-size: 1.25em;
+  }
+
+  h4 {
+    font-size: 1em;
+  }
+
+  h5 {
+    font-size: 0.875em;
+  }
+
+  h6 {
+    font-size: 0.85em;
+    color: var(--p-surface-500);
   }
 
   a {
@@ -114,8 +157,16 @@
     text-decoration: underline;
   }
 
-  p {
+  p,
-    margin: 1em 0;
+  blockquote,
+  ul,
+  ol,
+  dl,
+  table,
+  pre,
+  details {
+    margin-top: 0;
+    margin-bottom: 1em;
   }
 
   p img {
@@ -126,7 +177,6 @@
 
   ul,
   ol {
-    margin: 1em 0;
     padding-left: 2em;
   }
 
@@ -135,23 +185,38 @@
   }
 
   blockquote {
-    border-left: 5px solid #ddd;
+    padding: 0px 1em;
-    padding: 10px 20px;
+    border-left: 0.25em solid var(--p-surface-500);
-    margin: 1.5em 0;
+    color: var(--p-surface-500);
-    background: #f9f9f9;
+    margin: 1em 0;
   }
 
-  code,
+  blockquote > *:first-child {
-  pre {
+    margin-top: 0;
-    background: #f9f9f9;
+  }
-    padding: 3px 5px;
+
-    border: 1px solid #ddd;
+  blockquote > *:last-child {
-    border-radius: 3px;
+    margin-bottom: 0;
-    font-family: 'Courier New', Courier, monospace;
   }
 
   pre {
-    padding: 10px;
+    font-size: 85%;
+    border-radius: 6px;
+    padding: 8px 16px;
     overflow-x: auto;
+    background: var(--p-dialog-background);
+    filter: invert(10%);
+  }
+
+  pre code,
+  pre tt {
+    display: inline;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    line-height: inherit;
+    word-wrap: normal;
+    background-color: transparent;
+    border: 0;
   }
 }