feat(markdown): introduce some padding

apps/client/src/widgets/type_widgets/code/Markdown.css

@@ -0,0 +1,10 @@
+.note-detail-markdown {
+    .note-detail-code-editor .cm-editor {
+        padding-block: 0.25em;
+    }
+
+    .markdown-preview {
+        padding: 0.5em;
+    }
+}
+

apps/client/src/widgets/type_widgets/code/Markdown.tsx

@@ -1,12 +1,24 @@
+import "./Markdown.css";
+
+import { Marked } from "marked";
+import { useMemo, useState } from "preact/hooks";
+
+import { SanitizedHtml } from "../../react/RawHtml";
 import SplitEditor from "../helpers/SplitEditor";
 import { TypeWidgetProps } from "../type_widget";
 
+const marked = new Marked({ breaks: true, gfm: true });
+
 export default function Markdown(props: TypeWidgetProps) {
+    const [ content, setContent ] = useState("");
+    const html = useMemo(() => marked.parse(content) as string, [ content ]);
+
     return (
         <SplitEditor
             noteType="code"
             {...props}
-            previewContent={<div>Hello World</div>}
+            onContentChanged={setContent}
+            previewContent={<SanitizedHtml className="markdown-preview" html={html} />}
         />
     );
 }