diff --git a/src/components/md-deck/CardPreview.tsx b/src/components/md-deck/CardPreview.tsx
index 3edc37a..3480083 100644
--- a/src/components/md-deck/CardPreview.tsx
+++ b/src/components/md-deck/CardPreview.tsx
@@ -36,11 +36,11 @@ export function CardPreview(props: CardPreviewProps) {
   let cardRef: HTMLDivElement | undefined;
 
   return (
-    <div class="flex justify-center overflow-hidden">
+    <div class="flex justify-center">
       <Show when={store.state.activeTab < store.state.cards.length}>
         <div
           ref={cardRef}
-          class="relative bg-white border border-gray-300 shadow-lg"
+          class="relative bg-white border border-gray-300 shadow-lg overflow-hidden"
           style={{
             width: `${store.state.dimensions?.cardWidth}mm`,
             height: `${store.state.dimensions?.cardHeight}mm`
diff --git a/src/markdown/index.ts b/src/markdown/index.ts
index a6c08df..d3944f4 100644
--- a/src/markdown/index.ts
+++ b/src/markdown/index.ts
@@ -1,8 +1,29 @@
 import { Marked } from 'marked';
-import { createDirectives } from 'marked-directive';
+import {createDirectives, presetDirectiveConfigs} from 'marked-directive';
 
 // 使用 marked-directive 来支持指令语法
-const marked = new Marked().use(createDirectives());
+const marked = new Marked().use(createDirectives([
+    ...presetDirectiveConfigs,
+    {
+        marker: '::::',
+        level: 'container'
+    },
+    {
+        marker: ':::::',
+        level: 'container'
+    },
+    {
+        level: 'inline',
+        marker: ':',
+        // :[blah] becomes <i class="icon icon-blah"></i>
+        renderer(token) {
+            if (!token.meta.name) {
+                return `<icon class="icon-${token.text}"></icon>`;
+            }
+            return false;
+        }
+    },
+]));
 
 export function parseMarkdown(content: string): string {
   return marked.parse(content.trimStart()) as string;