willaengine/resources/js/Global/components/Inputs/Code-Editor.vue

<template>
  <prism-editor
    class="my-editor LTR height-300"
    v-model="code"
    :highlight="highlighter"
    line-numbers
  ></prism-editor>
</template>

<script>
// import Prism Editor
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css"; // import the styles somewhere

// import highlighting library (you can use any library you want just return html string)
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/components/prism-css";
import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles

export default {
  components: {
    PrismEditor,
  },
  props: ["value", "language"],
  data: () => ({}),
  methods: {
    highlighter(code) {
      return highlight(code, languages[this.language]); // languages.<insert language> to return html with markup
    },
  },
  computed: {
    code: {
      get() {
        return this.value;
      },
      set(e) {
        this.$emit("input", e);
      },
    },
  },
};
</script>

<style>
.height-300 {
  height: 300px;
}
/* required class */
.my-editor {
  /* we dont use `language-` classes anymore so thats why we need to add background and text color manually */
  background: #f5f2f0;
  border: 1px solid #dcdcdc;
  border-left: 10px solid #dcdcdc;
  color: #5a6268;
  border-radius: 5px;

  /* you must provide font-family font-size line-height. Example: */
  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  padding: 5px;
}

/* optional class for removing the outline */
.prism-editor__textarea:focus {
  outline: none;
}
</style>