70 lines
1.4 KiB
Vue
70 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<textarea ref="code" v-model="code"></textarea>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import CodeMirror from 'codemirror';
|
||
|
|
import 'codemirror/mode/javascript/javascript';
|
||
|
|
import 'codemirror/mode/python/python';
|
||
|
|
import 'codemirror/mode/shell/shell';
|
||
|
|
import 'codemirror/mode/htmlmixed/htmlmixed';
|
||
|
|
import 'codemirror/lib/codemirror.css';
|
||
|
|
import 'codemirror/theme/material.css';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'CodeBlock',
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
codemirror: null
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted () {
|
||
|
|
this.initialize();
|
||
|
|
},
|
||
|
|
beforeDestroy () {
|
||
|
|
this.destroy();
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
code: String,
|
||
|
|
language: {
|
||
|
|
type: String,
|
||
|
|
default: 'javascript'
|
||
|
|
},
|
||
|
|
lineNumbers: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true
|
||
|
|
},
|
||
|
|
theme: {
|
||
|
|
type: String,
|
||
|
|
default: 'material'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initialize () {
|
||
|
|
const allOptions = {
|
||
|
|
mode: this.language,
|
||
|
|
lineNumbers: this.lineNumbers,
|
||
|
|
theme: this.theme,
|
||
|
|
...defaultOptions
|
||
|
|
};
|
||
|
|
this.codemirror = CodeMirror.fromTextArea(this.$refs.code, allOptions);
|
||
|
|
},
|
||
|
|
destroy () {
|
||
|
|
const codemirrorElement = this.codemirror.doc.cm.getWrapperElement();
|
||
|
|
codemirrorElement.remove && codemirrorElement.remove();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
code () {
|
||
|
|
this.codemirror && this.codemirror.setValue(this.code);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const defaultOptions = {
|
||
|
|
readOnly: true,
|
||
|
|
addModeClass: true
|
||
|
|
};
|
||
|
|
|
||
|
|
</script>
|