diff --git a/src/components/image-editor/extract-image-colors.ts b/src/components/image-editor/extract-image-colors.ts
new file mode 100644
index 00000000..b890121c
--- /dev/null
+++ b/src/components/image-editor/extract-image-colors.ts
@@ -0,0 +1,45 @@
+const extractImageColors = (base64Image: string) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = base64Image;
+
+    img.onload = function () {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d')!;
+
+      canvas.width = img.width;
+      canvas.height = img.height;
+      ctx.drawImage(img, 0, 0);
+
+      const imageData = ctx.getImageData(0, 0, img.width, img.height);
+      const pixels = imageData.data;
+
+      let blackPixels = [];
+      let whitePixels = [];
+
+      for (let i = 0; i < pixels.length; i += 4) {
+        let r = pixels[i],
+          g = pixels[i + 1],
+          b = pixels[i + 2];
+        let x = (i / 4) % img.width;
+        let y = Math.floor(i / 4 / img.width);
+
+        if (r === 0 && g === 0 && b === 0) {
+          blackPixels.push({ x, y });
+        } else if (r === 255 && g === 255 && b === 255) {
+          whitePixels.push({ x, y });
+        }
+      }
+
+      URL.revokeObjectURL(img.src);
+
+      resolve({ blackPixels, whitePixels });
+    };
+
+    img.onerror = function () {
+      reject(new Error('Image loading failed'));
+    };
+  });
+};
+
+export default extractImageColors;
diff --git a/src/components/markdown-viewer/index.less b/src/components/markdown-viewer/index.less
index d8b9a339..228181e1 100644
--- a/src/components/markdown-viewer/index.less
+++ b/src/components/markdown-viewer/index.less
@@ -1,6 +1,7 @@
 .markdown-viewer {
   font-family: var(--font-family) !important;
   word-break: break-word;
+  font-size: var(--font-size-base);
 
   .hr {
     border: none;
@@ -28,12 +29,28 @@
   h2,
   h3,
   h4 {
-    font-weight: 700;
     font-weight: var(--font-weight-bold);
-    font-size: var(--font-size-small);
     margin-top: 1em;
   }
 
+  h1 {
+    font-size: 20px;
+  }
+
+  h2 {
+    font-size: 18px;
+  }
+
+  h3 {
+    font-size: 16px;
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: 14px;
+  }
+
   .hj-wrapper {
     margin-top: 16px;
   }
diff --git a/src/pages/playground/style/content-item.less b/src/pages/playground/style/content-item.less
index c2215aad..b5d23520 100644
--- a/src/pages/playground/style/content-item.less
+++ b/src/pages/playground/style/content-item.less
@@ -2,14 +2,6 @@
   margin-bottom: 24px;
   position: relative;
 
-  .markdown-viewer {
-    h4 {
-      margin-top: 10px;
-      margin-bottom: 10px;
-      font-size: var(--font-size-middle);
-    }
-  }
-
   &-role {
     display: flex;
     align-items: center;
@@ -26,6 +18,7 @@
     position: absolute;
     top: 0;
     left: 0;
+    z-index: 101;
   }
 
   .role {