vue-codemirror
vue-codemirror copied to clipboard
Styling from CDN - How to implement it properly?
I can't seem to get the theme to work from a CDN. Codemirror is working but no highlighting whatsoever.
Output is:
And it is loaded:
Can you please advise?
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.4/codemirror.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-codemirror.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.4/codemirror.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.4/theme/monokai.min.css" rel="stylesheet" >
<div id="shortcodes">
<form class="vueform" @submit.prevent>
<label for="name">Name:</label>
<input id="name" type="text" v-model="editrow.name" >
<label for="enabled">Enabled:</label>
<input id="enabled" type="checkbox" v-model="editrow.enabled" >
<codemirror class="form-control" ref="cm" v-model="editrow.code" :options="cmOption" :loadtheme="true">
</codemirror>
<button class="btn button is-primary" @click="checkData" style="margin-right:20px;">Save</button>
<button class="btn button" @click="cancelEdit">Cancel</button>
</form>
</div>
<script type="module">
Vue.use(VueCodemirror)
var app = new Vue({
el: '#shortcodes',
data () {
return {
editrow: [],
cmOption: {
lineNumbers: true,
styleActiveLine: true,
tabSize: 4,
mode: 'text/javascript',
theme: 'monokai'
}
}
},
mounted () {
<<<code here>>>
},
computed: {
cm() {
return this.$refs.cm.codemirror
}
},
methods: {
<<more code>>
}
});
</script>
Is anyone home?