feat: rewrite code component

demo/src/components/demo.rs

@@ -42,7 +42,7 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
     let content_class = create_memo(move |_| {
         theme.with(|theme| {
             format!(
-                "thaw-demo__content color-scheme--{}",
+                "color-scheme--{}",
                 theme.common.color_scheme
             )
         })
@@ -66,21 +66,17 @@ pub fn Demo(demo_code: DemoCode, children: Children) -> impl IntoView {
         </Style>
         <div style=move || style.get()>{children()}</div>
         <div style=move || code_style.get() class=move || content_class.get()>
-            <Code>
                 {
                     if is_highlight {
                         view! {
-                            <pre style="margin: 0" inner_html=html></pre>
+                            <Code inner_html=html />
                         }
                     } else {
                         view! {
-                            <pre style="margin: 0">
+                            <Code text=html />
-                                {html}
-                            </pre>
                         }
                     }
                 }
-            </Code>
         </div>
     }
 }

demo/src/components/syntect-css.css

@@ -1,8 +1,3 @@
-.thaw-demo__content pre {
-    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
-        Liberation Mono, monospace;
-}
-
 /** https://github.com/AmjadHD/sublime_one_theme */
 
 /** light */

thaw/src/code/code.css

@@ -1,3 +1,12 @@
 .thaw-code {
     font-size: 14px;
-}
+    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+        Liberation Mono, monospace;
+}
+
+.thaw-code pre {
+    margin: 0;
+    line-height: inherit;
+    font-size: inherit;
+    font-family: inherit;
+}

thaw/src/code/mod.rs

@@ -1,8 +1,28 @@
-use crate::utils::mount_style;
+use crate::utils::{class_list::class_list, mount_style, OptionalProp};
 use leptos::*;
 
 #[component]
-pub fn Code(children: Children) -> impl IntoView {
+pub fn Code(
+    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
+    #[prop(optional, into)] text: Option<String>,
+    #[prop(optional, into)] inner_html: Option<String>,
+) -> impl IntoView {
     mount_style("code", include_str!("./code.css"));
-    view! { <code class="thaw-code">{children()}</code> }
+    view! {
+        <code class=class_list!["thaw-code", class.map(|c| move || c.get())]>
+            {
+                if let Some(inner_html) = inner_html {
+                    view! {
+                        <pre inner_html=inner_html></pre>
+                    }.into()
+                } else if let Some(text) = text {
+                    view! {
+                        <pre>{text}</pre>
+                    }.into()
+                } else {
+                    None
+                }
+            }
+        </code>
+    }
 }