This commit is contained in:
Isaiah 2023-12-02 21:09:24 -05:00
parent ab414f0ea7
commit cf577bb7c9
5 changed files with 31 additions and 64 deletions

View file

@ -1,40 +1,29 @@
<script setup lang="ts">
import { useStorage } from '@vueuse/core';
import { renderMarkdown } from './markdown-viewer.service';
const rawMd = useStorage('markdown-viewer:raw-md', '# Hello World');
const inputElement = ref<HTMLElement>();
import { renderMarkdown } from "./markdown-viewer.service";
</script>
<template>
<n-form-item
label="Your raw MD"
label="Your raw markdown"
>
<c-input-text
ref="inputElement"
v-model:value="rawMd"
placeholder="Paste your raw JSON here..."
rows="35"
multiline
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
monospace
ref="inputElement"
v-model:value="rawMd"
placeholder="Paste your raw markdown here..."
rows="35"
multiline
autocomplete="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
monospace
/>
</n-form-item>
<n-form-item label="Prettified version of your MD">
<c-card style="width: 100%; overflow: scroll" v-html="renderMarkdown(rawMd)"></c-card>
<n-form-item label="Prettified version of your markdown">
<c-card style="width: 100%; overflow: scroll" v-html="renderMarkdown(rawMd)" />
</n-form-item>
</template>
<style lang="less" scoped>
.result-card {
position: relative;
.copy-button {
position: absolute;
top: 10px;
right: 10px;
}
}
</style>