diff --git a/gh-pages/Cargo.toml b/gh-pages/Cargo.toml
index 8c08097..33ec338 100644
--- a/gh-pages/Cargo.toml
+++ b/gh-pages/Cargo.toml
@@ -13,9 +13,9 @@ icondata = { version = "0.0.7", features = [
     "AiCheckOutlined",
 ] }
 leptos_router = { version = "0.5.0", features = ["csr"] }
-indoc = "2.0.1"
 regex = "1.8.2"
 leptos_devtools = "0.0.1"
+prisms = { git = "https://github.com/luoxiaozero/prisms" }
 
 [features]
 tracing = ["leptos/tracing"]
diff --git a/gh-pages/src/components/demo.rs b/gh-pages/src/components/demo.rs
index 2d32f3c..0620126 100644
--- a/gh-pages/src/components/demo.rs
+++ b/gh-pages/src/components/demo.rs
@@ -1,20 +1,23 @@
 use leptos::*;
-use melt_ui::Code;
+use melt_ui::{mount_style, Code};
 
 #[slot]
 pub struct DemoCode {
+    #[prop(optional)]
+    html: &'static str,
     children: Children,
 }
 
 #[component]
 pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
+    mount_style("demo", || ("", prisms::prism_css!()));
     view! {
        <div style="background-image: url(/melt-ui/grid_dot.svg); background-repeat: repeat; background-size: 1.5rem; margin-top: 1rem; padding: 1rem; border: 1px solid #e5e8eb; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;">
             { children() }
        </div>
        <div style="font-weight: 400; font-size: 0.875em; line-height: 1.7142857;margin-bottom: 1rem; padding: 1rem; background-color: #f9fafb; border: 1px solid #e5e8eb; border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem; border-top-width: 0;">
             <Code>
-                <pre style="margin: 0">
+                <pre style="margin: 0" inner_html=demo_code.html>
                     { (demo_code.children)() }
                 </pre>
             </Code>
diff --git a/gh-pages/src/pages/button/mod.rs b/gh-pages/src/pages/button/mod.rs
index fba046a..3d3c606 100644
--- a/gh-pages/src/pages/button/mod.rs
+++ b/gh-pages/src/pages/button/mod.rs
@@ -1,7 +1,7 @@
 use crate::components::{Demo, DemoCode};
-use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
+use prisms::highlight_str;
 
 #[component]
 pub fn ButtonPage() -> impl IntoView {
@@ -21,23 +21,21 @@ pub fn ButtonPage() -> impl IntoView {
                 <Button type_=ButtonType::LINK>
                     "LINK"
                 </Button>
-                <DemoCode slot>
-                    {
-                        indoc!(r#"
-                            <Button type_=ButtonType::PRIMARY>
-                                "PRIMARY"
-                            </Button>
-                            <Button type_=ButtonType::SOLID>
-                                "SOLID"
-                            </Button>
-                            <Button type_=ButtonType::TEXT>
-                                "TEXT"
-                            </Button>
-                            <Button type_=ButtonType::LINK>
-                                "LINK"
-                            </Button>
-                        "#)
-                    }
+                <DemoCode slot html=highlight_str!(r#"
+                    <Button type_=ButtonType::PRIMARY>
+                        "PRIMARY"
+                    </Button>
+                    <Button type_=ButtonType::SOLID>
+                        "SOLID"
+                    </Button>
+                    <Button type_=ButtonType::TEXT>
+                        "TEXT"
+                    </Button>
+                    <Button type_=ButtonType::LINK>
+                        "LINK"
+                    </Button>
+                "#, "rust")>
+                    ""
                 </DemoCode>
             </Demo>
             <h3>"color"</h3>
@@ -54,23 +52,21 @@ pub fn ButtonPage() -> impl IntoView {
                 <Button color=ButtonColor::ERROR>
                     "ERROR Color"
                 </Button>
-                <DemoCode slot>
-                    {
-                        indoc!(r#"
-                            <Button color=ButtonColor::PRIMARY>
-                                "PRIMARY Color"
-                            </Button>
-                            <Button color=ButtonColor::SUCCESS>
-                                "SUCCESS Color"
-                            </Button>
-                            <Button color=ButtonColor::WARNING>
-                                "WARNING Color"
-                            </Button>
-                            <Button color=ButtonColor::ERROR>
-                                "ERROR Color"
-                            </Button>
-                        "#)
-                    }
+                <DemoCode slot html=highlight_str!(r#"
+                    <Button color=ButtonColor::PRIMARY>
+                        "PRIMARY Color"
+                    </Button>
+                    <Button color=ButtonColor::SUCCESS>
+                        "SUCCESS Color"
+                    </Button>
+                    <Button color=ButtonColor::WARNING>
+                        "WARNING Color"
+                    </Button>
+                    <Button color=ButtonColor::ERROR>
+                        "ERROR Color"
+                    </Button>
+                "#, "rust")>
+                    ""
                 </DemoCode>
             </Demo>
             <h3>"icon"</h3>
@@ -80,29 +76,25 @@ pub fn ButtonPage() -> impl IntoView {
                 </Button>
                 <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
                 </Button>
-                <DemoCode slot>
-                    {
-                        indoc! {r#"
-                            <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
-                                "ERROR Color Icon"
-                            </Button>
-                            <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
-                            </Button>
-                        "#}
-                    }
+                <DemoCode slot html=highlight_str!(r#"
+                    <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined>
+                        "ERROR Color Icon"
+                    </Button>
+                    <Button color=ButtonColor::ERROR icon=icondata::AiIcon::AiCloseOutlined round=true>
+                    </Button>
+                "#, "rust")>
+                    ""
                 </DemoCode>
             </Demo>
             <h3>"style"</h3>
             <Demo>
                 <Button style="background: blue;">"style blue"</Button>
                 <Button style="width: 40px; height: 20px">"size"</Button>
-                <DemoCode slot>
-                    {
-                        indoc! {r#"
-                            <Button style="background: blue;">"style blue"</Button>
-                            <Button style="width: 40px; height: 20px">"size"</Button>
-                        "#}
-                    }
+                <DemoCode slot html=highlight_str!(r#"
+                    <Button style="background: blue;">"style blue"</Button>
+                    <Button style="width: 40px; height: 20px">"size"</Button>
+                "#, "rust")>
+                    ""
                 </DemoCode>
             </Demo>
         </div>
diff --git a/gh-pages/src/pages/checkbox/mod.rs b/gh-pages/src/pages/checkbox/mod.rs
index a0f8765..a497fd6 100644
--- a/gh-pages/src/pages/checkbox/mod.rs
+++ b/gh-pages/src/pages/checkbox/mod.rs
@@ -1,9 +1,9 @@
 use std::collections::HashSet;
 
 use crate::components::{Demo, DemoCode};
-use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
+use prisms::highlight_str;
 
 #[component]
 pub fn CheckboxPage() -> impl IntoView {
@@ -16,16 +16,14 @@ pub fn CheckboxPage() -> impl IntoView {
                 <Checkbox checked>
                     "Click"
                 </Checkbox>
-                <DemoCode slot>
-                    {
-                        indoc! {r#"
-                            let checked = create_rw_signal(false);
+                <DemoCode slot html=highlight_str!(r#"
+                    let checked = create_rw_signal(false);
 
-                            <Checkbox checked>
-                                "Click"
-                            </Checkbox>
-                        "#}
-                    }
+                    <Checkbox checked>
+                        "Click"
+                    </Checkbox>
+                "#, "rust")>
+                    ""
                 </DemoCode>
             </Demo>
             <h3>"group"</h3>
@@ -38,18 +36,16 @@ pub fn CheckboxPage() -> impl IntoView {
                 <div style="margin-top: 1rem">
                     "value: " { move || format!("{:?}", value.get()) }
                 </div>
-                <DemoCode slot>
-                    {
-                        indoc! {r#"
-                            let value = create_rw_signal(HashSet::new());
+                <DemoCode slot html=highlight_str!(r#"
+                    let value = create_rw_signal(HashSet::new());
 
-                            <CheckboxGroup value>
-                                <CheckboxItem label="apple" value="a" />
-                                <CheckboxItem label="b" value="b" />
-                                <CheckboxItem label="c" value="c" />
-                            </CheckboxGroup>
-                        "#}
-                    }
+                    <CheckboxGroup value>
+                        <CheckboxItem label="apple" value="a" />
+                        <CheckboxItem label="b" value="b" />
+                        <CheckboxItem label="c" value="c" />
+                    </CheckboxGroup>
+                "#, "rust")>
+                    ""
                 </DemoCode>
             </Demo>
         </div>
diff --git a/gh-pages/src/pages/image/mod.rs b/gh-pages/src/pages/image/mod.rs
index 831daa3..30cd0bc 100644
--- a/gh-pages/src/pages/image/mod.rs
+++ b/gh-pages/src/pages/image/mod.rs
@@ -1,7 +1,7 @@
 use crate::components::{Demo, DemoCode};
-use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
+use prisms::highlight_str;
 
 #[component]
 pub fn ImagePage() -> impl IntoView {
@@ -9,15 +9,13 @@ pub fn ImagePage() -> impl IntoView {
         <div style="width: 896px; margin: 0 auto;">
             <h1>"Image"</h1>
             <Demo>
-            <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
-            <Image width="200px" height="200px"/>
-                <DemoCode slot>
-                    {
-                        indoc! {r#"
-                            <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
-                            <Image width="200px" height="200px"/>
-                        "#}
-                    }
+                <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
+                <Image width="200px" height="200px"/>
+                <DemoCode slot html=highlight_str!(r#"
+                    <Image src="https://s3.bmp.ovh/imgs/2021/10/2c3b013418d55659.jpg" width="500px"/>
+                    <Image width="200px" height="200px"/>
+                "#, "rust")>
+                    ""
                 </DemoCode>
             </Demo>
         </div>
diff --git a/gh-pages/src/pages/input/mod.rs b/gh-pages/src/pages/input/mod.rs
index 8fa7427..2656311 100644
--- a/gh-pages/src/pages/input/mod.rs
+++ b/gh-pages/src/pages/input/mod.rs
@@ -1,7 +1,7 @@
 use crate::components::{Demo, DemoCode};
-use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
+use prisms::highlight_str;
 
 #[component]
 pub fn InputPage() -> impl IntoView {
@@ -12,15 +12,14 @@ pub fn InputPage() -> impl IntoView {
             <Demo>
                 <Input value/>
                 <Input value type_=InputType::PASSWORD />
-                <DemoCode slot>
-                    {
-                        indoc! {r#"
-                            let value = create_rw_signal(String::from("o"));
+                <DemoCode slot html=highlight_str!(r#"
+                    let value = create_rw_signal(String::from("o"));
 
-                            <Input value/>
-                            <Input value type_=InputType::PASSWORD />
-                        "#}
-                    }
+                    <Input value/>
+                    <Input value type_=InputType::PASSWORD />
+                "#, "rust")>
+                ""
+                    ""
                 </DemoCode>
             </Demo>
         </div>
diff --git a/gh-pages/src/pages/menu/mod.rs b/gh-pages/src/pages/menu/mod.rs
index e714cab..3aa1129 100644
--- a/gh-pages/src/pages/menu/mod.rs
+++ b/gh-pages/src/pages/menu/mod.rs
@@ -1,7 +1,7 @@
 use crate::components::{Demo, DemoCode};
-use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
+use prisms::highlight_str;
 
 #[component]
 pub fn MenuPage() -> impl IntoView {
@@ -14,17 +14,15 @@ pub fn MenuPage() -> impl IntoView {
                     <MenuItem key="a" label="and"/>
                     <MenuItem key="o" label="or"/>
                 </Menu>
-                <DemoCode slot>
-                    {
-                        indoc!(r#"
-                        let selected = create_rw_signal(String::from("o"));
-                        
-                        <Menu selected>
-                            <MenuItem key="a" label="and"/>
-                            <MenuItem key="o" label="or"/>
-                        </Menu>
-                        "#)
-                    }
+                <DemoCode slot html=highlight_str!(r#"
+                    let selected = create_rw_signal(String::from("o"));
+                            
+                    <Menu selected>
+                        <MenuItem key="a" label="and"/>
+                        <MenuItem key="o" label="or"/>
+                    </Menu>
+                "#, "rust")>
+                    ""
                 </DemoCode>
             </Demo>
         </div>
diff --git a/gh-pages/src/pages/modal/mod.rs b/gh-pages/src/pages/modal/mod.rs
index 38d7244..5f9e906 100644
--- a/gh-pages/src/pages/modal/mod.rs
+++ b/gh-pages/src/pages/modal/mod.rs
@@ -1,7 +1,7 @@
 use crate::components::{Demo, DemoCode};
-use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
+use prisms::highlight_str;
 
 #[component]
 pub fn ModalPage() -> impl IntoView {
@@ -16,19 +16,17 @@ pub fn ModalPage() -> impl IntoView {
                 <Modal title="title" show>
                     "hello"
                 </Modal>
-                <DemoCode slot>
-                    {
-                        indoc! {r#"
-                        let show = create_rw_signal(false);
+                <DemoCode slot html=highlight_str!(r#"
+                    let show = create_rw_signal(false);
 
-                        <Button on:click=move |_| show.set(true)>
-                            "open modal"
-                        </Button>
-                        <Modal title="title" show>
-                            "hello"
-                        </Modal>
-                        "#}
-                    }
+                    <Button on:click=move |_| show.set(true)>
+                        "open modal"
+                    </Button>
+                    <Modal title="title" show>
+                        "hello"
+                    </Modal>
+                "#, "rust")>
+                    ""
                 </DemoCode>
             </Demo>
         </div>
diff --git a/gh-pages/src/pages/nav_bar/mod.rs b/gh-pages/src/pages/nav_bar/mod.rs
index c9e30b5..67b457f 100644
--- a/gh-pages/src/pages/nav_bar/mod.rs
+++ b/gh-pages/src/pages/nav_bar/mod.rs
@@ -2,9 +2,9 @@ use crate::{
     components::{Demo, DemoCode},
     pages::MobilePage,
 };
-use indoc::indoc;
 use leptos::*;
 use melt_ui::mobile::NavBar;
+use prisms::highlight_str;
 
 #[component]
 pub fn NavBarPage() -> impl IntoView {
@@ -14,19 +14,17 @@ pub fn NavBarPage() -> impl IntoView {
                 <h1>"Navbar"</h1>
                 <Demo>
                     ""
-                    <DemoCode slot>
-                        {
-                            indoc!(r#"
-                                <NavBar 
-                                    title="Home" 
-                                    left_arrow=true 
-                                    left_text="back" 
-                                    right_text="add" 
-                                    click_left=click_left 
-                                    click_right=click_right
-                                />
-                            "#)
-                        }
+                    <DemoCode slot html=highlight_str!(r#"
+                        <NavBar 
+                            title="Home" 
+                            left_arrow=true 
+                            left_text="back" 
+                            right_text="add" 
+                            click_left=click_left 
+                            click_right=click_right
+                        />
+                    "#, "rust")>
+                        ""
                     </DemoCode>
                 </Demo>
             </div>
diff --git a/gh-pages/src/pages/select/mod.rs b/gh-pages/src/pages/select/mod.rs
index c6e85d3..5cade38 100644
--- a/gh-pages/src/pages/select/mod.rs
+++ b/gh-pages/src/pages/select/mod.rs
@@ -1,7 +1,7 @@
 use crate::components::{Demo, DemoCode};
-use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
+use prisms::highlight_str;
 
 #[component]
 pub fn SelectPage() -> impl IntoView {
@@ -16,18 +16,16 @@ pub fn SelectPage() -> impl IntoView {
             <h1>"Select"</h1>
             <Demo>
                 <Select value=selected_value options/>
-                <DemoCode slot>
-                    {
-                        indoc! {r#"
-                        let selected_value = create_rw_signal(Some(String::from("apple")));
-                        let options = vec![SelectOption {
-                            label: String::from("apple"),
-                            value: String::from("apple"),
-                        }];
+                <DemoCode slot html=highlight_str!(r#"
+                    let selected_value = create_rw_signal(Some(String::from("apple")));
+                    let options = vec![SelectOption {
+                        label: String::from("apple"),
+                        value: String::from("apple"),
+                    }];
 
-                        <Select value=selected_value options/>
-                        "#}
-                    }
+                    <Select value=selected_value options/>
+                "#, "rust")>
+                    ""
                 </DemoCode>
             </Demo>
         </div>
diff --git a/gh-pages/src/pages/slider/mod.rs b/gh-pages/src/pages/slider/mod.rs
index 625de3c..c8d1b35 100644
--- a/gh-pages/src/pages/slider/mod.rs
+++ b/gh-pages/src/pages/slider/mod.rs
@@ -1,7 +1,7 @@
 use crate::components::{Demo, DemoCode};
-use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
+use prisms::highlight_str;
 
 #[component]
 pub fn SliderPage() -> impl IntoView {
@@ -12,14 +12,12 @@ pub fn SliderPage() -> impl IntoView {
             <h1>"Slider"</h1>
             <Demo>
                 <Slider value/>
-                <DemoCode slot>
-                    {
-                        indoc!(r#"
-                        let value = create_rw_signal(0.0);
+                <DemoCode slot html=highlight_str!(r#"
+                    let value = create_rw_signal(0.0);
                         
-                        <Slider value/>
-                        "#)
-                    }
+                    <Slider value/>
+                "#, "rust")>
+                    ""
                 </DemoCode>
             </Demo>
         </div>
diff --git a/gh-pages/src/pages/space/mod.rs b/gh-pages/src/pages/space/mod.rs
index 969fe82..2e7adec 100644
--- a/gh-pages/src/pages/space/mod.rs
+++ b/gh-pages/src/pages/space/mod.rs
@@ -1,7 +1,7 @@
 use crate::components::{Demo, DemoCode};
-use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
+use prisms::highlight_str;
 
 #[component]
 pub fn SpacePage() -> impl IntoView {
@@ -14,16 +14,14 @@ pub fn SpacePage() -> impl IntoView {
                     <Button>"2"</Button>
                     <Button>"3"</Button>
                 </Space>
-                <DemoCode slot>
-                    {
-                        indoc!(r#"
-                        <Space>
-                            <Button>"1"</Button>
-                            <Button>"2"</Button>
-                            <Button>"3"</Button>
-                        </Space>
-                        "#)
-                    }
+                <DemoCode slot html=highlight_str!(r#"
+                    <Space>
+                        <Button>"1"</Button>
+                        <Button>"2"</Button>
+                        <Button>"3"</Button>
+                    </Space>
+                "#, "rust")>
+                    ""
                 </DemoCode>
             </Demo>
             <h3>"gap"</h3>
@@ -38,21 +36,19 @@ pub fn SpacePage() -> impl IntoView {
                     <Button>"2"</Button>
                     <Button>"3"</Button>
                 </Space>
-                <DemoCode slot>
-                    {
-                        indoc!(r#"
-                        <Space gap=SpaceGap::LARGE>
-                            <Button>"1"</Button>
-                            <Button>"2"</Button>
-                            <Button>"3"</Button>
-                        </Space>
-                        <Space gap=SpaceGap::TUPLE(36, 36)>
-                            <Button>"1"</Button>
-                            <Button>"2"</Button>
-                            <Button>"3"</Button>
-                        </Space>
-                        "#)
-                    }
+                <DemoCode slot html=highlight_str!(r#"
+                    <Space gap=SpaceGap::LARGE>
+                        <Button>"1"</Button>
+                        <Button>"2"</Button>
+                        <Button>"3"</Button>
+                    </Space>
+                    <Space gap=SpaceGap::TUPLE(36, 36)>
+                        <Button>"1"</Button>
+                        <Button>"2"</Button>
+                        <Button>"3"</Button>
+                    </Space>
+                "#, "rust")>
+                    ""
                 </DemoCode>
             </Demo>
         </div>
diff --git a/gh-pages/src/pages/tabbar/mod.rs b/gh-pages/src/pages/tabbar/mod.rs
index 8d7e495..3af079b 100644
--- a/gh-pages/src/pages/tabbar/mod.rs
+++ b/gh-pages/src/pages/tabbar/mod.rs
@@ -2,9 +2,9 @@ use crate::{
     components::{Demo, DemoCode},
     pages::MobilePage,
 };
-use indoc::indoc;
 use leptos::*;
 use melt_ui::mobile::*;
+use prisms::highlight_str;
 
 #[component]
 pub fn TabbarPage() -> impl IntoView {
@@ -14,24 +14,22 @@ pub fn TabbarPage() -> impl IntoView {
                 <h1>"Tabbar"</h1>
                 <Demo>
                     ""
-                    <DemoCode slot>
-                        {
-                            indoc!(r#"
-                            let selected = create_rw_signal(String::from("o"));
-                            
-                            <Tabbar selected>
-                                <TabbarItem name="a">
-                                    "and"
-                                </TabbarItem>
-                                <TabbarItem name="i">
-                                    "if"
-                                </TabbarItem>
-                                <TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
-                                    "or"
-                                </TabbarItem>
-                            </Tabbar>
-                            "#)
-                        }
+                    <DemoCode slot html=highlight_str!(r#"
+                        let selected = create_rw_signal(String::from("o"));
+                                
+                        <Tabbar selected>
+                            <TabbarItem name="a">
+                                "and"
+                            </TabbarItem>
+                            <TabbarItem name="i">
+                                "if"
+                            </TabbarItem>
+                            <TabbarItem name="o" icon=icondata::AiIcon::AiCloseOutlined>
+                                "or"
+                            </TabbarItem>
+                        </Tabbar>
+                    "#, "rust")>
+                        ""
                     </DemoCode>
                 </Demo>
             </div>
diff --git a/gh-pages/src/pages/tabs/mod.rs b/gh-pages/src/pages/tabs/mod.rs
index 623d982..039abbf 100644
--- a/gh-pages/src/pages/tabs/mod.rs
+++ b/gh-pages/src/pages/tabs/mod.rs
@@ -1,7 +1,7 @@
 use crate::components::{Demo, DemoCode};
-use indoc::indoc;
 use leptos::*;
 use melt_ui::*;
+use prisms::highlight_str;
 
 #[component]
 pub fn TabsPage() -> impl IntoView {
@@ -18,20 +18,18 @@ pub fn TabsPage() -> impl IntoView {
                         "pear"
                     </Tab>
                 </Tabs>
-                <DemoCode slot>
-                    {
-                        indoc! {r#"
-                        let active_key = create_rw_signal("apple");
-                        <Tabs active_key>
-                            <Tab key="apple" label="Apple">
-                                "apple"
-                            </Tab>
-                            <Tab key="pear" label="Pear">
-                                "pear"
-                            </Tab>
-                        </Tabs>
-                        "#}
-                    }
+                <DemoCode slot html=highlight_str!(r#"
+                    let active_key = create_rw_signal("apple");
+                    <Tabs active_key>
+                        <Tab key="apple" label="Apple">
+                            "apple"
+                        </Tab>
+                        <Tab key="pear" label="Pear">
+                            "pear"
+                        </Tab>
+                    </Tabs>
+                "#, "rust")>
+                    ""
                 </DemoCode>
             </Demo>
         </div>
diff --git a/gh-pages/src/pages/toast/mod.rs b/gh-pages/src/pages/toast/mod.rs
index c2f6aef..1680a89 100644
--- a/gh-pages/src/pages/toast/mod.rs
+++ b/gh-pages/src/pages/toast/mod.rs
@@ -2,10 +2,10 @@ use crate::{
     components::{Demo, DemoCode},
     pages::MobilePage,
 };
-use indoc::indoc;
 use leptos::*;
 use melt_ui::mobile::*;
 use melt_ui::*;
+use prisms::highlight_str;
 use std::time::Duration;
 
 #[component]
@@ -16,19 +16,17 @@ pub fn ToastPage() -> impl IntoView {
                 <h1>"Toast"</h1>
                 <Demo>
                     ""
-                    <DemoCode slot>
-                        {
-                            indoc!(r#"
-                            let count = create_rw_signal(0u32);
-                            let onclick = move |_| {
-                                show_toast(ToastOptions {
-                                    message: format!("Hello {}", count.get_untracked()),
-                                    duration: Duration::from_millis(2000),
-                                });
-                                count.set(count.get_untracked() + 1);
-                            };
-                            "#)
-                        }
+                    <DemoCode slot html=highlight_str!(r#"
+                        let count = create_rw_signal(0u32);
+                        let onclick = move |_| {
+                            show_toast(ToastOptions {
+                                message: format!("Hello {}", count.get_untracked()),
+                                duration: Duration::from_millis(2000),
+                            });
+                            count.set(count.get_untracked() + 1);
+                        };
+                    "#, "rust")>
+                        ""
                     </DemoCode>
                 </Demo>
             </div>
diff --git a/src/lib.rs b/src/lib.rs
index e59b885..13a7480 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -38,4 +38,5 @@ pub use space::*;
 pub use table::*;
 pub use tabs::*;
 pub use theme::Theme;
+pub use utils::mount_style::mount_style;
 pub use wave::*;
diff --git a/src/utils/mod.rs b/src/utils/mod.rs
index f8a5cd4..f21060a 100644
--- a/src/utils/mod.rs
+++ b/src/utils/mod.rs
@@ -1 +1 @@
-pub(crate) mod mount_style;
+pub mod mount_style;