Currently, I'm working on integrating codemirror into my Vue.js application using a library found at https://github.com/surmon-china/vue-codemirror. The issue I'm facing is that even after importing and utilizing the codemirro component, everything seems to be functioning well except for the line numbers (displaying the number of lines in the code). Below is the code snippet directly taken from the demo page:
<template>
<div class="root">
<nav>
<div id="logo-container">
</div>
</nav>
<div id="left-side">
<div class="codemirror">
<!-- codemirror -->
<codemirror v-model="code"
:options="cmOption"
@cursorActivity="onCmCursorActivity"
@ready="onCmReady"
@focus="onCmFocus"
@blur="onCmBlur">
</codemirror>
</div>
</div>
</div>
</template>
And here is the corresponding script section:
data() {
return {
code: '',
cmOption: {
tabSize: 4,
styleActiveLine: true,
lineNumbers: true,
styleSelectedText: true,
line: true,
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
mode: 'text/javascript',
hintOptions:{
completeSingle: true
},
keyMap: "sublime",
matchBrackets: true,
showCursorWhenSelecting: true,
theme: "monokai",
extraKeys: { "Ctrl": "autocomplete" }
}
}
}