BradNut/svelte-library
1
0
Fork 0
mirror of https://github.com/BradNut/svelte-library synced 2025-09-08 17:40:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Created Markdown input and display.

Browse source
This commit is contained in:
Bradley Shellnut 2021-07-27 16:54:47 -07:00
parent 18a31b769a
commit b4eb67af8c
4 changed files with 56 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
package-lock.json generated
View file

@ -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",

7
package.json
View file

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

26
src/lib/Markdown.svelte Normal file
View file

@ -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>

6
src/routes/index.svelte
View file

@ -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" />