surmon-china / vue-codemirror

@codemirror code editor component for @vuejs
https://github.surmon.me/vue-codemirror
MIT License
3.3k stars 384 forks source link

Styling from CDN - How to implement it properly? #132

Open kevjustice opened 3 years ago

kevjustice commented 3 years ago

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/vue@2.X/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/vue-codemirror@4.X/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 commented 3 years ago

Is anyone home?