vue-codemirror icon indicating copy to clipboard operation
vue-codemirror copied to clipboard

Styling from CDN - How to implement it properly?

Open kevjustice opened this issue 3 years ago • 1 comments

I can't seem to get the theme to work from a CDN. Codemirror is working but no highlighting whatsoever.

Output is: 2021-03-18_18-32-08

And it is loaded: 2021-03-18_18-35-06

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>

kevjustice avatar Mar 18 '21 22:03 kevjustice

Is anyone home?

kevjustice avatar Mar 23 '21 20:03 kevjustice