Created Markdown input and display.

package-lock.json

@@ -7,6 +7,9 @@
     "": {
       "name": "~TODO~",
       "version": "0.0.1",
+      "dependencies": {
+        "marked": "^2.1.3"
+      },
       "devDependencies": {
         "@sveltejs/kit": "next",
         "eslint": "^7.22.0",
@@ -1047,6 +1050,17 @@
         "sourcemap-codec": "^1.4.4"
       }
     },
+    "node_modules/marked": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-2.1.3.tgz",
+      "integrity": "sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==",
+      "bin": {
+        "marked": "bin/marked"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
@@ -2392,6 +2406,11 @@
         "sourcemap-codec": "^1.4.4"
       }
     },
+    "marked": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-2.1.3.tgz",
+      "integrity": "sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA=="
+    },
     "minimatch": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",

package.json

@@ -17,5 +17,8 @@
     "prettier-plugin-svelte": "^2.2.0",
     "svelte": "^3.34.0"
   },
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "marked": "^2.1.3"
+  }
 }

src/lib/Markdown.svelte

@@ -0,0 +1,26 @@
+<script>
+	import marked from 'marked';
+
+	export let text = '';
+	let markdownText = text;
+	// Reactive expression
+	$: {
+		markdownText = marked(text);
+	}
+</script>
+
+<div class="markdown-container">
+	<textarea id="" cols="30" rows="10" bind:value={text} />
+	<div>
+		{@html markdownText}
+	</div>
+</div>
+
+<style>
+	.markdown-container {
+		display: flex;
+	}
+	.markdown-container > * {
+		width: 50%;
+	}
+</style>

src/routes/index.svelte

@@ -1,15 +1,21 @@
 <script>
 	import SearchFilter from '$lib/SearchFilter.svelte';
 	import Field from '$lib/Field.svelte';
+	import Markdown from '$lib/Markdown.svelte';
 	// import BetterAccordion from '$lib/BetterAccordion.svelte';
 	// import Toggle from '$lib/Toggle.svelte';
 	let isToggled = false;
+
+	let text = '';
+	$: console.log(text);
 	let search = '';
 	let items = ['scott', 'wes', 'landon', 'courtney', 'lucie', 'brooklyn', 'Samson'];
 </script>
 
 <h1>Welcome to Level Up UI {search}</h1>
 
+<Markdown bind:text />
+
 <Field bind:value={search} label="Search" insrustions="Type to search" placeholder="Joe" />
 
 <Field value={0} label="Number" type="number" />