|
|
|
<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>
|