Decent markdown source (#205)

pynecone/components/typography/markdown.py

@@ -1,10 +1,10 @@
-"""Table components."""
+"""Markdown component."""
 
+import textwrap
 from typing import List
 
-from pynecone import utils
 from pynecone.components.component import Component
-from pynecone.var import BaseVar, Var
+from pynecone.var import BaseVar
 
 
 class Markdown(Component):
@@ -14,8 +14,22 @@ class Markdown(Component):
 
     tag = "ReactMarkdown"
 
-    # The source of the markdown.
-    src: Var[str]
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create a markdown component.
+
+        Args:
+            children: The children of the component.
+            props: The properties of the component.
+
+        Returns:
+            The markdown component.
+        """
+        assert (
+            len(children) == 1
+        ), "Markdown component must have exactly one child containing the markdown source."
+        src = textwrap.dedent(children[0])
+        return super().create(src, **props)
 
     def _get_imports(self):
         imports = super()._get_imports()
@@ -37,9 +51,10 @@ class Markdown(Component):
         return imports
 
     def _render(self):
-        tag = super()._render()
-        return tag.add_props(
-            children=utils.wrap(str(self.src).strip(), "`"),
+        return (
+            super()
+            ._render()
+            .add_props(
                 components={
                     "h1": "{({node, ...props}) => <Heading size='2xl' {...props} />}",
                     "h2": "{({node, ...props}) => <Heading size='xl' {...props} />}",
@@ -68,6 +83,8 @@ class Markdown(Component):
                     ),
                 },
                 remark_plugins=BaseVar(name="[remarkMath, remarkGfm]", type_=List[str]),
-            rehype_plugins=BaseVar(name="[rehypeKatex, rehypeRaw]", type_=List[str]),
-            src="",
+                rehype_plugins=BaseVar(
+                    name="[rehypeKatex, rehypeRaw]", type_=List[str]
+                ),
+            )
         )