Deja las tonterías, el código clave: paquetes dependientes: highlight.js, prismjs, vue-prism-editor
<template>
<div>
<img alt="Vue logo" src="../assets/logo.png" />
<prism-editor class="my-editor" v-model="code" :highlight="highlighter" line-numbers></prism-editor>
</div>
</template>
<script lang="ts">
import "highlight.js/styles/atom-one-dark.css";
import {
PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css";
//@ts-ignore
import {
highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css";
export default {
components: {
PrismEditor,
},
data() {
return {
code: "",
};
},
created() {
//@ts-ignore
this.code = `async fucntion post(url: string, query: string) {
return fetch(url, {
method: "post",
headers: {
"Content-type": "application/json",
},
body: JSON.stringify({ query }),
}).then((response) => response.json());
}`;
},
methods: {
highlighter(code: string) {
return highlight(code, languages.js);
},
},
};
</script>
<style scoped lang="scss">
.my-editor {
background: #2d2d2d;
color: #ccc;
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
font-size: 14px;
line-height: 1.5;
padding: 5px;
}
.prism-editor__textarea:focus {
outline: none;
}
</style>
Efecto:
