App.vue
xxxxxxxxxx
59
<!--
A simple markdown editor.
-->
<script setup>
import { marked } from 'marked'
import { debounce } from 'lodash-es'
import { ref, computed } from 'vue'
const input = ref('# hello')
const output = computed(() => marked(input.value))
const update = debounce((e) => {
input.value = e.target.value
}, 100)
</script>
<template>
<div class="editor">
<textarea class="input" :value="input" @input="update"></textarea>
<div class="output" v-html="output"></div>
</div>
</template>
<style>
body {
margin: 0;
}
.editor {
height: 100vh;
display: flex;
}
.input,
.output {
overflow: auto;
width: 50%;
height: 100%;
Show Error
Auto Save