I would like to have 1 textarea with markdown syntax highlighting. I am currently using highlight.js. I wrote a proof of concept, however, this provides me with an additional text area. I would like to have 1 textarea. My current code is as follows:
<template>
<div>
<textarea v-model="code" @input="updateHighlightedCode"></textarea>
<pre v-html="highlightedCode" class="hljs"></pre>
</div>
</template>
<script>
import hljs from 'highlight.js/lib/core';
import 'highlight.js/styles/monokai-sublime.css';
import 'highlight.js/lib/languages/markdown';
export default {
data() {
return {
code: '',
highlightedCode: '',
};
},
methods: {
updateHighlightedCode() {
this.highlightedCode = this.highlightCode(this.code, 'markdown');
},
highlightCode(code, language) {
return hljs.highlight(language, code).value;
},
},
watch: {
code(newValue) {
this.updateHighlightedCode();
},
},
};
</script>
<style scoped>
textarea {
width: 100%;
height: 200px;
}
pre {
background-color: #282c34;
color: #abb2bf;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
}
</style>
This provides me with the following result
I want the highlighting and the typing to be present in the same textarea. Whenever I type in the first textarea, it highlights it and shows it in the second. How can I type and highlight in the same textarea using VueJS + highlight.js?