diff --git a/demo/src/components/demo.css b/demo/src/components/demo.css
new file mode 100644
index 0000000..55a7608
--- /dev/null
+++ b/demo/src/components/demo.css
@@ -0,0 +1,47 @@
+.demo-demo {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--demo-border-color);
+    overflow: hidden;
+}
+
+.demo-demo__view {
+    background-image: url(/grid_dot.svg);
+    background-repeat: repeat;
+    background-size: 1.5rem;
+    padding: 1rem;
+}
+
+.demo-demo__toolbar {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0.4rem;
+    border-top: 1px dashed var(--demo-border-color);
+    border-bottom: 1px dashed var(--demo-border-color);
+}
+
+.demo-demo__toolbar--code {
+    border-bottom-width: 0;
+}
+
+.demo-demo__toolbar-btn {
+    display: flex;
+    cursor: pointer;
+    color: var(--demo-color);
+    transition: color .3s;
+}
+
+.demo-demo__toolbar-btn:hover {
+    color: var(--demo-color-hover);
+}
+
+.demo-demo__code {
+    font-weight: 400;
+    font-size: 0.875em;
+    line-height: 1.714;
+    padding: 1rem;
+    overflow: auto;
+    background-color: var(--demo-background-color);
+}
diff --git a/demo/src/components/demo.rs b/demo/src/components/demo.rs
index bce1da2..a65bd25 100644
--- a/demo/src/components/demo.rs
+++ b/demo/src/components/demo.rs
@@ -10,43 +10,38 @@ pub struct DemoCode {
 }
 
 #[component]
-pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
+pub fn Demo(demo_code: DemoCode, #[prop(optional)] children: Option<Children>) -> impl IntoView {
     let theme = use_theme(Theme::light);
-    let style = create_memo(move |_| {
-        let mut style = String::from("background-image: url(/grid_dot.svg); background-repeat: repeat; background-size: 1.5rem; margin-top: 1rem; padding: 1rem; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;");
+    let css_vars = Memo::new(move |_| {
+        let mut css_vars = String::new();
         theme.with(|theme| {
             if theme.common.color_scheme == "dark" {
-                style.push_str("border: 1px solid #383f52;");
+                css_vars.push_str("--demo-color: #ffffff60;");
+                css_vars.push_str("--demo-color-hover: #ffffffe0;");
+                css_vars.push_str("--demo-border-color: #383f52;");
+                css_vars.push_str("--demo-background-color: #242832;");
             } else {
-                style.push_str(&format!("border: 1px solid {};", theme.common.border_color));
-            }
-        });
-        style
-    });
-    let code_style = create_memo(move |_| {
-        let mut style = String::from("font-weight: 400; font-size: 0.875em; line-height: 1.7142857;margin-bottom: 1rem; padding: 1rem; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; overflow: auto;");
-        theme.with(|theme| {
-            if theme.common.color_scheme == "dark" {
-                style.push_str("border: 1px solid #383f52; border-top-width: 0;");
-                style.push_str("background-color: #242832;");
-            } else {
-                style.push_str(&format!(
-                    "border: 1px solid {}; border-top-width: 0;",
+                css_vars.push_str("--demo-color: #00000060;");
+                css_vars.push_str("--demo-color-hover: #000000e0;");
+                css_vars.push_str(&format!(
+                    "--demo-border-color: {};",
                     theme.common.border_color
                 ));
-                style.push_str("background-color: #f9fafb;");
+                css_vars.push_str("--demo-background-color: #f9fafb;");
             }
         });
-        style
+        css_vars
     });
-    let content_class = create_memo(move |_| {
+
+    let code_class = Memo::new(move |_| {
         theme.with(|theme| {
             format!(
-                "color-scheme--{}",
+                "demo-demo__code color-scheme--{}",
                 theme.common.color_scheme
             )
         })
     });
+    let is_show_code = RwSignal::new(children.is_none());
 
     let is_highlight = demo_code.is_highlight;
     let frag = (demo_code.children)();
@@ -64,8 +59,47 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
         <Style id="leptos-thaw-syntect-css">
             {include_str!("./syntect-css.css")}
         </Style>
-        <div style=move || style.get()>{children()}</div>
-        <div style=move || code_style.get() class=move || content_class.get()>
+        <Style id="demo-demo">
+            {include_str!("./demo.css")}
+        </Style>
+        <div class="demo-demo" style=move || css_vars.get()>
+            {
+                if let Some(children) = children {
+                    view! {
+                        <div class="demo-demo__view">{children()}</div>
+                        <div class="demo-demo__toolbar" class=("demo-demo__toolbar--code", move || !is_show_code.get())>
+                            <Popover>
+                                <PopoverTrigger slot>
+                                    <span on:click=move |_| is_show_code.update(|show| *show = !*show) class="demo-demo__toolbar-btn">
+                                        {
+                                            move || if is_show_code.get() {
+                                                view! {
+                                                    <Icon icon=icondata::LuCode2/>
+                                                }
+                                            } else {
+                                                view! {
+                                                    <Icon icon=icondata::LuCode/>
+                                                }
+                                            }
+                                        }
+                                    </span>
+                                </PopoverTrigger>
+                                {
+                                    move || if is_show_code.get() {
+                                        "Hide code"
+                                    } else {
+                                        "Show code"
+                                    }
+                                }
+                            </Popover>
+
+                        </div>
+                    }.into()
+                } else {
+                    None
+                }
+            }
+            <div class=move || code_class.get() style:display=move || (!is_show_code.get()).then_some("none")>
                 {
                     if is_highlight {
                         view! {
@@ -77,6 +111,7 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
                         }
                     }
                 }
+            </div>
         </div>
     }
 }
diff --git a/demo_markdown/src/lib.rs b/demo_markdown/src/lib.rs
index f4076af..30166d1 100644
--- a/demo_markdown/src/lib.rs
+++ b/demo_markdown/src/lib.rs
@@ -5,100 +5,70 @@ use proc_macro2::{Ident, Span};
 use quote::quote;
 use syn::ItemFn;
 
+macro_rules! file_path {
+    ($($key:expr => $value:expr),*) => {
+        {
+            let mut pairs = Vec::new();
+            $(
+                pairs.push(($key, include_str!($value)));
+            )*
+            pairs
+        }
+    }
+}
+
 #[proc_macro]
 pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenStream {
-    let file_list = vec![
-        (
-            "DevelopmentComponentsMdPage",
-            include_str!("../docs/_guide/development/components.md"),
-        ),
-        (
-            "DevelopmentGuideMdPage",
-            include_str!("../docs/_guide/development/guide.md"),
-        ),
-        (
-            "InstallationMdPage",
-            include_str!("../docs/_guide/installation.md"),
-        ),
-        (
-            "ServerSiderRenderingMdPage",
-            include_str!("../docs/_guide/server_sider_rendering.md"),
-        ),
-        ("UsageMdPage", include_str!("../docs/_guide/usage.md")),
-        (
-            "NavBarMdPage",
-            include_str!("../docs/_mobile/nav_bar/mod.md"),
-        ),
-        (
-            "TabbarMdPage",
-            include_str!("../docs/_mobile/tabbar/mod.md"),
-        ),
-        ("ToastMdPage", include_str!("../docs/_mobile/toast/mod.md")),
-        ("AlertMdPage", include_str!("../docs/alert/mod.md")),
-        (
-            "AutoCompleteMdPage",
-            include_str!("../docs/auto_complete/mod.md"),
-        ),
-        ("AvatarMdPage", include_str!("../docs/avatar/mod.md")),
-        ("BadgeMdPage", include_str!("../docs/badge/mod.md")),
-        (
-            "BreadcrumbMdPage",
-            include_str!("../docs/breadcrumb/mod.md"),
-        ),
-        ("ButtonMdPage", include_str!("../docs/button/mod.md")),
-        ("CalendarMdPage", include_str!("../docs/calendar/mod.md")),
-        ("CardMdPage", include_str!("../docs/card/mod.md")),
-        ("CheckboxMdPage", include_str!("../docs/checkbox/mod.md")),
-        ("CollapseMdPage", include_str!("../docs/collapse/mod.md")),
-        (
-            "ColorPickerMdPage",
-            include_str!("../docs/color_picker/mod.md"),
-        ),
-        (
-            "DatePickerMdPage",
-            include_str!("../docs/date_picker/mod.md"),
-        ),
-        ("DividerMdPage", include_str!("../docs/divider/mod.md")),
-        ("DrawerMdPage", include_str!("../docs/drawer/mod.md")),
-        ("GridMdPage", include_str!("../docs/grid/mod.md")),
-        ("IconMdPage", include_str!("../docs/icon/mod.md")),
-        ("ImageMdPage", include_str!("../docs/image/mod.md")),
-        ("InputMdPage", include_str!("../docs/input/mod.md")),
-        (
-            "InputNumberMdPage",
-            include_str!("../docs/input_number/mod.md"),
-        ),
-        ("LayoutMdPage", include_str!("../docs/layout/mod.md")),
-        (
-            "LoadingBarMdPage",
-            include_str!("../docs/loading_bar/mod.md"),
-        ),
-        ("MenuMdPage", include_str!("../docs/menu/mod.md")),
-        ("MessageMdPage", include_str!("../docs/message/mod.md")),
-        ("ModalMdPage", include_str!("../docs/modal/mod.md")),
-        ("PopoverMdPage", include_str!("../docs/popover/mod.md")),
-        ("ProgressMdPage", include_str!("../docs/progress/mod.md")),
-        ("RadioMdPage", include_str!("../docs/radio/mod.md")),
-        ("SelectMdPage", include_str!("../docs/select/mod.md")),
-        ("SkeletonMdPage", include_str!("../docs/skeleton/mod.md")),
-        ("SliderMdPage", include_str!("../docs/slider/mod.md")),
-        ("SpaceMdPage", include_str!("../docs/space/mod.md")),
-        ("SpinnerMdPage", include_str!("../docs/spinner/mod.md")),
-        ("SwitchMdPage", include_str!("../docs/switch/mod.md")),
-        ("TableMdPage", include_str!("../docs/table/mod.md")),
-        ("TabsMdPage", include_str!("../docs/tabs/mod.md")),
-        ("TagMdPage", include_str!("../docs/tag/mod.md")),
-        ("ThemeMdPage", include_str!("../docs/theme/mod.md")),
-        (
-            "TimePickerMdPage",
-            include_str!("../docs/time_picker/mod.md"),
-        ),
-        (
-            "TypographyMdPage",
-            include_str!("../docs/typography/mod.md"),
-        ),
-        ("UploadMdPage", include_str!("../docs/upload/mod.md")),
-    ];
+    let file_list = file_path! {
+        "DevelopmentComponentsMdPage" => "../docs/_guide/development/components.md",
+        "DevelopmentGuideMdPage" => "../docs/_guide/development/guide.md",
+        "InstallationMdPage" => "../docs/_guide/installation.md",
+        "ServerSiderRenderingMdPage" => "../docs/_guide/server_sider_rendering.md",
+        "UsageMdPage" => "../docs/_guide/usage.md",
+        "NavBarMdPage" => "../docs/_mobile/nav_bar/mod.md",
+        "TabbarMdPage" => "../docs/_mobile/tabbar/mod.md",
+        "ToastMdPage" => "../docs/_mobile/toast/mod.md",
+        "AlertMdPage" => "../docs/alert/mod.md",
+        "AutoCompleteMdPage" => "../docs/auto_complete/mod.md",
+        "AvatarMdPage" => "../docs/avatar/mod.md",
+        "BadgeMdPage" => "../docs/badge/mod.md",
+        "BreadcrumbMdPage" => "../docs/breadcrumb/mod.md",
+        "ButtonMdPage" => "../docs/button/mod.md",
+        "CalendarMdPage" => "../docs/calendar/mod.md",
+        "CardMdPage" => "../docs/card/mod.md",
+        "CheckboxMdPage" => "../docs/checkbox/mod.md",
+        "CollapseMdPage" => "../docs/collapse/mod.md",
+        "ColorPickerMdPage" => "../docs/color_picker/mod.md",
+        "DatePickerMdPage" => "../docs/date_picker/mod.md",
+        "DividerMdPage" => "../docs/divider/mod.md",
+        "DrawerMdPage" => "../docs/drawer/mod.md",
+        "GridMdPage" => "../docs/grid/mod.md",
+        "IconMdPage" => "../docs/icon/mod.md",
+        "ImageMdPage" => "../docs/image/mod.md",
+        "InputMdPage" => "../docs/input/mod.md",
+        "InputNumberMdPage" => "../docs/input_number/mod.md",
+        "LayoutMdPage" => "../docs/layout/mod.md",
+        "LoadingBarMdPage" => "../docs/loading_bar/mod.md",
+        "MenuMdPage" => "../docs/menu/mod.md",
+        "MessageMdPage" => "../docs/message/mod.md",
+        "ModalMdPage" => "../docs/modal/mod.md",
+        "PopoverMdPage" => "../docs/popover/mod.md",
+        "ProgressMdPage" => "../docs/progress/mod.md",
+        "RadioMdPage" => "../docs/radio/mod.md",
+        "SelectMdPage" => "../docs/select/mod.md",
+        "SkeletonMdPage" => "../docs/skeleton/mod.md",
+        "SliderMdPage" => "../docs/slider/mod.md",
+        "SpaceMdPage" => "../docs/space/mod.md",
+        "SpinnerMdPage" => "../docs/spinner/mod.md",
+        "SwitchMdPage" => "../docs/switch/mod.md",
+        "TableMdPage" => "../docs/table/mod.md",
+        "TabsMdPage" => "../docs/tabs/mod.md",
+        "TagMdPage" => "../docs/tag/mod.md",
+        "ThemeMdPage" => "../docs/theme/mod.md",
+        "TimePickerMdPage" => "../docs/time_picker/mod.md",
+        "TypographyMdPage" => "../docs/typography/mod.md",
+        "UploadMdPage" => "../docs/upload/mod.md"
+    };
 
     let mut fn_list = vec![];
 
diff --git a/demo_markdown/src/markdown/code_block.rs b/demo_markdown/src/markdown/code_block.rs
index ee5f348..92afdab 100644
--- a/demo_markdown/src/markdown/code_block.rs
+++ b/demo_markdown/src/markdown/code_block.rs
@@ -45,7 +45,6 @@ pub fn to_tokens(code_block: &NodeCodeBlock, demos: &mut Vec<String>) -> TokenSt
             });
         quote! {
             <Demo>
-                ""
                 <DemoCode slot is_highlight=#is_highlight>
                     #literal
                 </DemoCode>