64 lines
1.2 KiB
HTML
64 lines
1.2 KiB
HTML
|
<script src="https://unpkg.com/marked@0.3.6"></script>
|
||
|
|
<script src="https://unpkg.com/lodash@4.16.0"></script>
|
||
|
|
<script src="../../dist/vue.global.js"></script>
|
||
|
|
|
||
|
|
<div id="editor">
|
||
|
|
<textarea :value="input" @input="update"></textarea>
|
||
|
|
<div v-html="output"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const { ref, computed } = Vue
|
||
|
|
|
||
|
|
const App = {
|
||
|
|
setup() {
|
||
|
|
const input = ref('# hello')
|
||
|
|
const output = computed(() => marked(input.value, { sanitize: true }))
|
||
|
|
const update = _.debounce(e => { input.value = e.target.value })
|
||
|
|
|
||
|
|
return {
|
||
|
|
input,
|
||
|
|
output,
|
||
|
|
update
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Vue.createApp().mount(App, '#editor')
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
html, body, #editor {
|
||
|
|
margin: 0;
|
||
|
|
height: 100%;
|
||
|
|
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
textarea, #editor div {
|
||
|
|
display: inline-block;
|
||
|
|
width: 49%;
|
||
|
|
height: 100%;
|
||
|
|
vertical-align: top;
|
||
|
|
-webkit-box-sizing: border-box;
|
||
|
|
-moz-box-sizing: border-box;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 0 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
textarea {
|
||
|
|
border: none;
|
||
|
|
border-right: 1px solid #ccc;
|
||
|
|
resize: none;
|
||
|
|
outline: none;
|
||
|
|
background-color: #f6f6f6;
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: 'Monaco', courier, monospace;
|
||
|
|
padding: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
code {
|
||
|
|
color: #f66;
|
||
|
|
}
|
||
|
|
</style>
|